es6 문법 정리

2019-09-01
#javascript, ES6

ECMAScript 2015(ES6)는 매년마다 업데이트 되고 있으며 현재 ES7,ES8,ES9,ES10 까지 나온상태이다.
그 중에서도 ES6는 현재 모든 프론트엔드 개발자들이 사용하고 있으며 표준화되어 있다.
ES6를 사용하면서도 정확한 개념을 잘 모르고 사용한 것들을 정리해보았다.

arrows

기존 function을 대신해서 화살표(=>)를 사용하여 함수를 선언할 수 있다.
그러나 완전히 function을 대신하지는 않는다.

1
2
3
4
5
6
7
8
9
10
11
const abc = function(a) {
  return a + 1;
};

// arrow function
const abc = a => {
  return a + 1;
};

// 매개변수 1개일 때는 소괄호 생략 가능 및 함수 한줄 표현가능시 중괄호 생략 및 자동 return
const abc = a => a + 1;


1) this 변경

항상 이 부분이 헷갈렸다. function으로 선언했을 때 this와 화살표 함수로 선언했을 때 this의 차이점!!!
화살표 함수는 자신을 포함하는 외부 scope에서 this를 계승받는다.
즉, 자신만의 this를 생성하지 않는다. (lexical this)
화살표 함수에서는 내부함수여도 this가 화살표 함수가 선언된 곳에서 상위의 context를 가리치게 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//function 예제
function Text(text) {
  this.text = text;
}

setText.prototype.array = function(arr) {
  console.log(this.text); // hi
  return arr.map(function(v) {
    return `${this.text} ${v}`; // undefined aa, undefined bb
  });
};

const text = new Text('hi');
Text.array(['aa', 'bb']);

// 화살표 함수 예제
function Text(text) {
  this.text = text;
}

Text.prototype.array = function(arr) {
  return arr.map = v => return `${this.text} ${v}`;
});

const text = new Text('hi');
Text.array(['aa', 'bb']); // hi aa, hi bb


2) 화살표함수 사용하면 안되는 케이스

객체의 this를 바인딩하지 않고 전역객체가 바인딩된다.
즉, 객체의 메소드를 정의할 때는 사용하면 안된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const obj1 = {
  name: 'Lee',
  sayName: () => {
    console.log(`hi + ${this.name}`);
  }
};
obj1.sayName(); // hi +

const obj1 = {
  name: 'Lee',
  sayName: function() {
    console.log(`hi + ${this.name}`);
  }
};
obj1.sayName(); // h i+ Lee

마찬가지로 생성자 함수로 사용할 수 없다.
또한 addEvent Listener함수에서 콜백함수에서 사용하면 this는 상위 컨텍스트를 가르킨다.

1
2
3
4
5
6
7
8
const btn = document.getElementById('button');
btn.addEventListner('click', function() {
  console.log(this); // this === btn 객체
});

btn.addEventListner('click', () => {
  console.log(this); // this === window
});


3) arguments 대신 args 사용

매개변수를 지정하지 않아도 arguments라는 프로퍼티가 함수에 자동으로 생성되어 사용가능했었다. es6에는 arguments는 사라지고 args가 생겼다.(매개변수지정필요)
매개변수 부분에 rest파라미터 (…)을 사용하여 가변인자 함수 내부에 배열로 전달 할 수 있다.

1
2
3
4
5
6
7
8
9
const foo = function() {
  console.log(arguments);
};
foo(1, 2); // {'0': 1, '1': 2}

const foo2 = (...args) => {
  console.log(args);
};
foo(1, 2); // [1,2]


Destructuring(구조분해할당)

배열과 객체에서 패턴 매칭을 통한 데이터 바인딩을 제공한다.
할당 실패시에는 undefined값이 자동으로 할당된다.

1) array Destructuring (배열 구조분해할당)

1
const [a, b, ...c] = [1, 2, 3, 4, 5, 6]; // a: 1, b: 2, c: [3,4,5,6]

…을 사용하여 나머지 변수들에 배열 구조분해할당이 가능하다.

2) object Destructuring (객체 구조분해할당)

1
2
const { a, b } = { a: 1, b: 2 }; //a: 1, b: 2
const { p, q } = { e: 3, q: 2 }; // p: undefined, q: 2,

객체의 키값이 동일할 때 구조분해할당이 가능하다.