concept/javascript - ES6
-
ES6 - Class / superconcept/javascript - ES6 2020. 5. 10. 02:53
요기서 ES5로 이렇게 만들어줬던 코드를 ES6로는 이렇게 간단하게 표현할 수 있다. class Human { constructor(name) { this.name = name; } sleep() { console.log('zzz') } } let john = new Human('john'); class Student extends Human { constructor(name){ super(name); } learn() { console.log('study hard') } } let oana = new Student('oana'); john.sleep(); // 'zzz' oana.learn(); // 'study hard' oana.sleep(); // 'zzz' 그런데 객체지향에서는 다형성이라는 특징..
-
ES6 - for ... of loopsconcept/javascript - ES6 2020. 5. 2. 03:22
iterable = 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복해서 작동한다. array의 경우 const array1 = ['a', 'b', 'c']; for (const element of array1) { console.log(element); } // expected output: "a" // expected output: "b" // expected output: "c" string의 경우 let str = 'CodeStates'; for(let char of str) { console.log(char); } // C // o // d // e // S // t // a // t // e // s objec..
-
ES6 - Arrow Functions (화살표 함수)concept/javascript - ES6 2020. 5. 2. 03:12
함수를 간단하게 쓸 수 있는 방법이다. arrow function은 block scope가 생성된다. (function scope와 비교되는 말) 화살표 함수에 없는 3가지는 1. 함수이름 2. this (실행 컨텍스트) 3. arguments 이다. 먼저 arrow function을 어떻게 쓰는지 보자. :: 쓰는 방법 :: let adder = function(x){ return function(y){ return x + y; } } 이 함수를 let adder = x => { return y => { return x + y; } } 이렇게 쓸 수 있다. 여기서 끝이 아니라 return 을 생략할 수도 있다. let adder = x => y => x + y; 즉, arrow function을 통해 ..
-
ES 6 - Template literalsconcept/javascript - ES6 2020. 5. 2. 00:46
이건 아주 간단한 개념! 예제로 바로 보는게 이해하기 더 빠를 것 같다. ES5에서는 아래와 같이 구현했어야 했던 코드를 var myAge = 28; console.log("저는 " + myAge + "세 입니다."); // "저는 28세 입니다." ES6에서는 이렇게 구현할 수 있다는 것! var myAge = 28; console.log(`저는 ${myAge}세 입니다.`); // "저는 28세 입니다." 여기서 백틱 ( ` )과 ${} 이 기호를 활용한다는 것이 포인트다. 백틱은 키보드의 ~ 키에 함께 있다. 이걸 사용할 때 백틱이 나오지 않아 고생한 적이 있는데 내 노트북에서만 그런 것인지는 모르겠지만 한글로 쓰다가 이 키를 누르면 ₩ 이렇게 나온다는 것.. 영어로 전환한 후 이 키를 눌러줘야 `..
-
ES6 - Default Parameter / Spread operator / Rest parametersconcept/javascript - ES6 2020. 5. 2. 00:18
Default Parameter function sum(x = 0, y = 0) { return x + y; } console.log(sum(1)); // 1 console.log(sum(1, 2)); // 3 이렇게 x,y 값을 default 0으로 설정해놓으면 전달인자가 전달되지 않은 경우에는 자동으로 0으로 설정이 된다! Spread operator 배열을 인자로! Spread 문법(Spread Syntax, ...)는 대상을 개별 요소로 분리한다. Spread 문법의 대상은 iterable이어야 한다. Symbol.iterator 메소드를 구현하거나 프로토타입 체인에 의해 상속한 객체 대표적으로 array 와 string let a = '12345'; console.log(...a); // 1 2..
-
ES 6 - destructuring assignment (구조분해할당)concept/javascript - ES6 2020. 5. 1. 16:39
destructuring assignment 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 (mdn) 배열을 해체한 경우 let a, b, rest; [a, b] = [10, 20]; console.log(a); // expected output: 10 console.log(b); // expected output: 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // expected output: Array [30,40,50] 객체를 해체한 경우 ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); console.log(a); // 10 console...