es2015 요약

ES2015#

ES2015는 Javascript의 버전이다. Ecma라는 단체에서 기존의 결점을 보완한 표준 자바스크립트 버전을 매년 발표한다. ES는 EcamaScript의 줄임말이다.

let#

• 블록 스코프 변수(block scoped variable)이다.
• var가 함수 스코프 변수 이라는 점에서 대비된다.
• 블록 단위안에서도 hoisting 되지 않는다.
• 같은 스코프에서 재선언이 불가능하다.

ex:

1. 블록 스코프 변수 / 함수 스코프 변수 예제

   1
   if(true) {
   2
       var a = 'a';
   3
       let b = 'b';
   4
       console.log('a => ', a); // a
   5
       console.log('b => ', b); // b
   6
   }
   7
   console.log('a => ', a); // a
   8
   console.log('b => ', b); // b is not defined
   

2. hoisting 예제

   1
   if(true) {
   2
       console.log('a => ', a); // undefined
   3
       console.log('b => ', b); // b is not defined
   4
       var a = 'a';
   5
       let b = 'b';
   6
   }
   

3. 같은 스코프에서 재선언 불가능 예제

   1
   var a = 'a';  // a = 'a'
   2
   var a = 'aa'; // a = 'aa'
   3
   let b = 'b';  // b = 'b'
   4
   let b = 'bb'; // Identifier 'b' has already been declared
   

const#

• 읽기 전용 상수
• 객체를 할당하면 참조값이 상수에 할당되므로 객체의 프로퍼티는 변경 가능
• const 또한 block scoping을 따르며 hoisting 되지 않는다.

ex:

1. 읽기 전용 예제

   1
   const a = 'a'; // a = 'a'
   2
   a = 'b'        // Assignment to constant variable.
   

2. 프로퍼티 변경 예제

   1
   const a = {name: 'a'};
   2
   console.log('a.name => ', a.name); // a
   3
   a.name = 'b';
   4
   console.log('a.name => ', a.name); // b
   

Set - Collection#

• Set은 유일한 값들로 구성된 Collection
• add한 순서대로 원소를 가지고 있다.
• 중복된 값은 자동 삭제된다.

ex:

1
const a = new Set();
2
a.add(1).add(2).add(1); // Set {1, 2}
3
console.log('a size: ', a.size); // 2
4
a.delete(2); // Set {1}
5
a.forEach(f => console.log(f)); // 1

WeakSet - Collection#

• weakly하게 값을 참조한다는 뜻인데 WeakSet이 갖는 객체의 참조값이 다른곳에서 참조되지 않으면 객체는 garbage collect 대상
• 객체 참조값만 가진다.
• iterable 객체가 아니다.
• .has(), .get(), .set(), .delete()만 지원

ex:

1
const ws = new WeakSet();
2
const value = {a: 'a'};
3
ws.add(value).add({b: 'moon'});
4
console.log(ws); // WeakSet {Object {b: "moon"}, Object {a: "a"}}
5
/* after the garbage Collection has run */
6
console.log(ws); // WeakSet {Object {a: "a"}}

Map - Collection#

• key-value로 이루어진 Collection
• iterable 객체
• 삽입한 순서대로 원소를 가진다.

ex:

1
const map = new Map();
2
const obj = {a: 2};
3
map.set(obj, 2).set(1, 1).set(1, 2);
4
console.log('map has 1: ', map.has(1)); // map has 1:  true
5
console.log('value of 1: ', map.get(1)); // value of 1: 2
6
map.delete(1);
7
console.log('map has 1: ', map.has(1)); // map has 1: false

WeakMap - Collection#

• WeakSet 과 비슷한 개념으WeakMap 의 key 가 약하게 참조된다.
• key는 객체참조 값만을가진다.
• iterable 객체가 아니다.

ex:

1
const ws = new WeakMap();
2
const obj = {a: 'a'};
3
ws.set(obj, 1).set({b: 2}, 2);
4
console.log(ws); // WeakMap {Object {a: "a"} => 1, Object {b: 2} => 2}
5
/* after the garbage Collection has run */
6
console.log(ws); // WeakMap {Object {a: "a"} => 1}

arrow function#

• 보다 간결한 구문을 지닌 익명함수이다.
• 자기 고유의 this 를 갖지 않고, 외부 스코프의 this 를 그대로 가진다 (lexical binding)

ex:

1
const func = (x, y) => { return x + y; };
2
/* json을 리턴할 때에는 괄호를 넣어준다. */
3
const func2 = () => ({ foo: 1 });

class#

• 기존모델에 단지 새롭게 추가된 구문일 뿐,전혀 새로운 객체지향 모델이 아니다.
• 생성자나 상속의 좀 더 간단하고 명확한 구문이 제공된다.
• 생성자는 constructor 로 표현된다.
• 클래스 바디는 중괄호 안에 두고 여기에 메소드를 function 키워드 없이 정의한다.
• 메소드는 prototype 프로퍼티에 추가된다.
• class는 프로퍼티와 메소드로 이루어져 있다.
• class 는 extends 구문으로 다른 class 를 상속한다.
• 자식 클래스에 constructor 가 없으면 부모의 그것이 자동으로 호출된다.
• 생성자에서 super 키워드를 통해 상속 계층을 구현한다. this 보다 먼저 사용하지 않으면 예외가 발생한다.
• static 키워드를 통해 정적 메소드를 만들 수 있다. 이 메소드는 클래스 prototype 프로퍼티가 아닌 클래스 자체 메소드 다. (유틀리티 함수 작성에 쓰인다.)

ex:

1. 일반 예제

   1
   class Point {
   2
       constructor(x, y) {
   3
           this.x = x;
   4
           this.y = y;
   5
       }
   6
       static distance(a, b) {
   7
           const dx = a.x - b.x;
   8
           const dy = a.y - b.y;
   9
           return Math.sqrt(dx*dx + dy*dy);
   10
       }
   11
   }
   12
   const p1 = new Point(5, 5);
   13
   const p2 = new Point(10, 10);
   14
   console.log(Point.distance(p1, p2)); // 7.0710678118654755
   

2. 상속

   1
   class Cat {
   2
       constructor(name) {
   3
           this.name = name;
   4
       }
   5
       speak() {
   6
           console.log(this.name + ' makes a noise.');
   7
       }
   8
   }
   9
   class Lion extends Cat {
   10
       speak() {
   11
           super.speak();
   12
           console.log(this.name + ' roars.');
   13
       }
   14
   }
   15
   const lion = new Lion('happy');
   16
   lion.speak();
   

Template string#

• 백틱(Backtick)을 이용해 문자열을 만드는 새로운 방법
• 코드의 가독성을 높여준다.
• ${} 표현식을 사용하여 변수, 함수, 연산식 등을 표현 할 수 있다.

ex:

1
const name = 'dowon';
2
const myStr = `Hi ${name}. Have a great day!`;
3
console.log(myStr); // Hi dowon. Have a great day!
4
console.log("string text line 1\n"+
5
"string text line 2");
6
/* "string text line 1
7
 string text line 2" */
8
console.log(`string text line 1
9
string text line 2`);
10
/* "string text line 1
11
 string text line 2" */
12
const a = 5;
13
const b = 10;
14
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`); // Fifteen is 15 and not 20.
15
const a = () => "test";
16
console.log(`a: => ${a()}`);

for~of 구문#

• for~in 문은 객체의 열거가능한 모든 속성에 대해 반복했다면, for ~ of 문은 컬렉션의 요소를 반복.
• forEach(), for in 구문과 달리, break, continue, 그리고 return 구문과 함께 사용할 수 있습니다.
• for~of 루프 구문은 data를 순회하기 위한 구문
• 배열 뿐만 아니라 Collection 객체, DOM NodeList 등등 을 다를수 있다.

ex)

1
for (let chr of "12") {
2
console.log(chr);
3
}
4
//1
5
//2
6
let iterable = [10, 20, 30];
7
for (let value of iterable) {
8
    console.log(value);
9
}
10
let iterable = new Uint8Array([0x00, 0xff]);
11
for (let value of iterable) {
12
    console.log(value);
13
}
14
// 0
15
// 255
16
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
17
for (let entry of iterable) {
18
    console.log(entry);
19
}
20
// [a, 1]
21
// [b, 2]
22
// [c, 3]
23
for (let [key, value] of iterable) {
24
    console.log(value);
25
}
26
// 1
27
// 2
28
// 3
29
let iterable = new Set([1, 1, 2, 2, 3, 3]);
30
for (let value of iterable) {
31
    console.log(value);
32
}
33
// 1
34
// 2
35
// 3

Iterator#

• Iterator 는 새로운 문법이나 built-in 이 아니라 프로토콜(약속)이다.
• 간단한 약속만 지키면 누구나 만들수 있다.
• Set Map Array 등이 Iterator 객체이다.
• Symbol.iterator 를 Key 로 갖는 속성이 반드시 존재해야 한다.
• 다음 규칙에 따라 next() 메서드를 구현한 객체를 iterator 라고 한다:

1
아래의 두 속성을 가지는 객체를 리턴하며 인자가 없는 함수:
2
1. done (boolean)
3
    - iterator 가 순회를 모두 마쳤을 경우 true
4
    - iterator 가 순회할 다음 value 가 존재할 경우 false
5
2. value - iterator 에 의해 리턴될 값. done 이 true 일 경우 생략 가능

ex:

1
var iterable = {
2
  [Symbol.iterator]() {
3
    return {
4
      i: 0,
5
      next() {
6
        if (this.i < 3) {
7
          return { value: this.i++, done: false };
8
        }
9
        return { value: undefined, done: true };
10
      }
11
    };
12
  }
13
};
14
for (var value of iterable) {
15
  console.log(value);
16
}
17
// 0
18
// 1
19
// 2

Rest Parameter 와 Default Parameter#

이건 코드로 확인하는게 가장 편하다.

1. rest parameter

   1
   // 사용법은 아래와 같다.
   2
   function(a, b, ...theArgs) {
   3
      // ...
   4
   }
   5
   // ex
   6
   function restParam(...arg) {
   7
       for(let val of arg) console.log(val);
   8
   }
   9
   restParam(1,2,3,4,5);
   10
   // es2
   11
   function restParam2(first, ...arg) {
   12
       console.log(first); // 시작
   13
       for(let val of arg) console.log(val);
   14
       // 1
   15
       // 2
   16
       // 3
   17
       // 4
   18
       // 5
   19
   }
   20
   restParam('시작', 1,2,3,4,5);
   

2. Default Parameter

   • parameter 값이 없을 시 Default로 값을 넣어준다.

   1
   function defaultParam(a = 'test', b = 'done') {
   2
       console.log(`a: ${a}`);
   3
       console.log(`b: ${b}`);
   4
   }
   5
   defaultParam();
   6
   //
   

기타#

1
const obj = {a:1, b:2};
2
const {a,b} = obj;
3
console.log(a,b); // 12
4
const a = [1,2,3];
5
const aCopy = [...a];
6
console.log(aCopy);