목록Knowledge Wiki/Javascript (51)
KorSA
1. ES6에서 import&export를 이용하여 파일간 모듈식 개발 가능 는 옛날 방식, but 호환성은 그만큼 좋음 require()도 옛날 방식 // main.js // library.js var a =10; export default a; 2. export default는 파일 하나당 한번만 사용 가능 여러개 export 하려면 export {a, b, c}; 이렇게 하거나 export {a}; export {b}; 이렇게 하거나 export var a = 10; 이렇게 하면 됨 3. export를 여러개 하는 파일을 import할 때에는 export 변수명과 똑같이 맞춰서 써주어야 함. 똑같이 맞추는 게 기존이지만 이름을 재지정해줄 수 있음 import {a as myA} from '/libr..
1. Destructuring ES6에서 Array로부터 변수 만들기 좀 더 쉬워짐 var [a,b,c] = [2,3,4]; 2. Destructuring 하면서 몇개 빼먹을 경우를 대비해 default 값 지정 가능 var [a,b,c = 10] = [2,3]; 3. Object 데이터의 Destructuring 변수명을 key명과 똑같이 써주어야 함 var { name, age } = { name : 'Kim', age : 30 }; // 변수명 변경 가능하고 default 값 지정도 가능 var { name : myName, age = 31 } = { name : 'Kim' }; 4. Destructuring을 역으로 이용하는 방법이 많이 쓰임 var name = 'Kim'; var age = 30..
1. ES5부터 getter, setter 문법이 추가됨 get 함수들 -> return이 있어야 함, 파라미터가 없어야 함 set 함수들 -> 파라미터가 1개 있어야 함
1. ES5 상속 기능 -> 2010년 부터는 ES5 스타일로 상속을 쉽게 구현함 child.create(parent); // parent를 상속받아 child를 생성, 즉 child의 prototype이 parent가 됨 2. ES6 상속 기능 -> 타 객체지향언어 스타일 class parent { constructor(){ this.name = 'Kim'; this.sayHi = function(){} } sayHi2(){ } } var child = new parent(); child.sayHi(); // 있음 chid.sayHi2(); // 없음. constructor에 선언된게 아니니까. 3. extends 와 super class granpa { constructor(name){ this.fi..
1. prototype - 상속을 구현할 수 있는 또 하나의 문법 prototype은 '유전자' prototype에 값을 추가하면 모든 자식들이 물려받기 가능 function machine(){ this.name= 'mac'; } machine.prototype.gender = 'neutral'; // 멤버가 아니어도 출력이 가능...!! 유전자에 등록되어 있기 때문 console.log(machine.gender); // "neutral" '.' 키워드는 맨 처음에 멤버 변수를 탐색하고 없으면 prototype을 탐색한다. 2. 내장함수 obj.toString(); // toString()은 Object/Array에 붙일 수 있는 내장함수 3. prototype 특징 1) 함수에만 생김 2) 내 부모 ..
1. Spread Operator -> 쉽고 유용해서 많이 씀 Array의 대괄호를 제거하는 문법 문자열을 문자로 나열하는 문법 var arr = ['hello', 'world']; console.log(...arr); // "hello world" var str = 'hello'; console.log(...str); // h e l l o 2. Spread Operator 사용 예 1) List 합치기 var a = [1,2,3]; var b= [4,5]; var c= [...a, ...b]; console.log(c); // 1 2 3 4 5 2) Obj 합치기 (Deep Copy) -> Spread Operator는 대괄호 뿐만 아니라 중괄호도 풀어준다! var obj1 = {a:1, b:2}; ..
1. ES6 Tagged Literal 함수명 뒤에 문자열을 붙여 쓸 수 있음 function divider(charrs, var1){ console.log(charrs); console.log(var1); } var index = 10; divider`This is suffix number ${ index }` 첫번째 파라미터(charrs) -> backtick 문자들을 Array화 해줌 두번째 파라미터(var1) -> 첫번째 ${변수}를 뜻함. 세번째 파라미터(var2) -> 두번째 ${변수}를 뜻함. 변수마다 파라미터 추가하기 싫으면 function divider(charrs, ...vars){ console.log(charrs); console.log(vars[0]); }
1. 변수의 Hoisting 현상 변수의 선언을 변수 범위 맨 위로 끌고오는 현상 즉, 변수의 선언과 할당이 함께 되어 있어도 JavaScript는 선언과 할당을 분리해서 해석한다. console.log(age); // undefined 출력, 선언 전에도 출력 가능. 왜냐면 선언은 되어있고 할당은 안되어 있는 시점이기 때문. var age = 30; console.log(age); // 30 출력
1. 변수명을 나타내는 키워드가 ES6 이전에는 var밖에 없었지만 이후 let, const가 추가됨 var => 재선언 O, 재할당 O, 범위는 자신이 선언된 함수 내부 let => 재선언 X, 재할당 O, 범위는 중괄호 const => 재선언 X, 재할당 X, 범위는 중괄호
1. 함수를 constructor로 사용할 수 있음 function machine(){ this.name = 'mac'; } var obj = new machine(); 2. 함수는 축약 가능 // 축약 전 var func = function(a){ return a + 10; } // 축약 후 var func = a => a + 10; 3. 함수 파라미터가 전체 개수보다 적게 전달인자로 넣어도 에러가 안남. 4. 함수의 default 파라미터 // 초기값을 넣을 수 있음 function add(a, b = 10){ console.log(a + b); } add(1); // "11" // 연산도 넣을 수 있음 function add2(a, b = a * 2){ console.log(a + b); } add..