Knowledge Wiki (169) 썸네일형 리스트형 [ JavaScript ES 6 ] prototype 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) 내 부모 .. [ JavaScript ES 6 ] Spread Operator 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}; .. [ JavaScript ES 6 ] Tagged Literal 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]); } [ JavaScript ES 6 ] 변수 Hoisting 현상 1. 변수의 Hoisting 현상 변수의 선언을 변수 범위 맨 위로 끌고오는 현상 즉, 변수의 선언과 할당이 함께 되어 있어도 JavaScript는 선언과 할당을 분리해서 해석한다. console.log(age); // undefined 출력, 선언 전에도 출력 가능. 왜냐면 선언은 되어있고 할당은 안되어 있는 시점이기 때문. var age = 30; console.log(age); // 30 출력 [ JavaScript ES 6 ] 변수 let, const 1. 변수명을 나타내는 키워드가 ES6 이전에는 var밖에 없었지만 이후 let, const가 추가됨 var => 재선언 O, 재할당 O, 범위는 자신이 선언된 함수 내부 let => 재선언 X, 재할당 O, 범위는 중괄호 const => 재선언 X, 재할당 X, 범위는 중괄호 [ JavaScript ES 6 ] 함수 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.. [ JavaScript ES 6 ] 전역변수 1. 전역변수 함수나 변수를 전역공간에서 만들면 {window}에 보관함 {window}는 전역변수 그래서 전역으로 정의한 func()를 호출할 때 window.func()도 동일하게 동작함..!! function func(){ console.log(this); } // 둘 다 동일한 동작 func(); window.func(); [ JavaScript ES 6 ] Arrow Function 1. ES6 함수 신 문법 Arrow Function 특징 : 1) 형식 : () => {} 2) 기존 function과 달리 this를 따로 재정의하지 않아서 함수 밖에 있는 this를 그대로 따름 이전 1 2 3 4 5 6 ··· 22 다음