[Javascript] ES2015(es6) 추가사항 정리

주요 추가사항

1.var을 개선한 let과 const.

2.기본 매개변수

3.템플릿 리터럴

4.구조 분해 할당

5.화살표 함수

6.클래스

7.프로미스

8.for-of문

9.Generator

10.import&export

11.Spread 연산자

12.오브젝트 축소 표현

1.var을 개선한 let과 const.

let과 const는 개선된 형태의 변수 선언 키워드다.
기존의 선언자 var는 스코프 오염과 재선언 등의 문제가 있었다.

while이나 if 문 등의 내부 스코프에서 정의된 변수가 새어나오기도 하고

실수로 재선언을 하더라도 알 방법이 없다.

하지만 let과 const는 엄격한 스코프 규칙을 따르며, const의 경우엔 바인딩 또한 제한할 수 있다.
모든 변수는 스코프에 안전하게 갇히며

재선언도 불가하다.

const는 값의 재할당도 막는다.

2.기본 매개변수

기본 매개변수 기능도 제공한다. 매개변수가 전달되지 않을 경우 채워질 값을 지정하는 것이다. 오른쪽에서 왼쪽의 순서로 채워 나갈 수 있다.

3.템플릿 리터럴

템플릿 리터럴은 좀 더 유능해진 문자열 리터럴 표현법이다.

멀티라인 표현이 직관적이며

표현식을 리터럴에 삽입하는 문자열 보간을 지원한다.

4.구조 분해 할당

Es6부터는 오브젝트나 배열을 변수선언의 형태로 분해할 수 있다.

배열 분해의 경우엔 생략을 할 수도 있으며

나머지 표현을 사용할 수도 있다. 맨 뒤에만 사용 가능하다.

5.화살표 함수

Es6에선 새로운 함수 표현법이 생겨났다.
function 키워드 없이 ()와 =>만으로 익명함수를 표현하는 것이다.

인자가 하나일 경우엔 ()를 생략할 수 있으며

단일 표현식일 경우엔 {}도 생략이 가능하다.

이외의 차이점으로, this 캡쳐 규칙이 다르다는 것이 있다.
function의 this는 정해져 있지 않고, 어떻게 호출되었는지에 따라 달라진다.
반면 arrow function의 this는 항상 상위 scope의 this를 가리킨다.
그래서 가급적 arrow 함수를 적극적으로 이용하는 편이 좋다.

다만, vue 등의 일부 라이브러리에서는 function으로만 작동하는 구조를 사용하곤 하니, 주의가 필요하다.

6.클래스

Es6 이전에는 다소 비직관적인 방식으로만 클래스를 정의할 수 있었다.
이른바 ‘프로토타입 방식 클래스’다.

하지만 es6 클래스를 사용하면 보다 직관적이고 정형화된 형태로 클래스를 표현할 수가 있다.

7.프로미스

Promise는 비동기 루틴을 제어하는 타입이다.
기존에 핸들러 함수를 전달해 완료 후 시점을 제어했던 것과 다르게, 좀더 세련된 방식으로 그걸 제어할 수가 있다.

then은 resolve을 호출한다.

8.for-of문

단순히 key만을 받아 제공했던 for-in문과 다르게,
for-of문은 완전한 순회를 제공한다.

9.Generator

Generator는 일종의 stack 기반 coroutine이다.
상태를 저장하며 함수를 정지해서 나오고,
그 상태 그대로 다시 재진입이 가능하다.

이것도 꽤 괜찮은 녀석인데, async&await에 묻힌 감이 있다.

10.import&export

export는 함수 등을 내보내고, import는 가져오는 구문이다.

현재 node LTS에서는 미설정시 동작하지 않으며,
requires 등과 혼용이 불가능하다.
자유로운 사용을 위해서는 babel가 필요하다.

11.Spread 연산자

Spread 연산자는 반복가능한 값을 쉼표로 구분해 풀어낸다.
인자로 해체해서 전달할 때 유용하다.

12.오브젝트 축소 표현

Es6에서는 객체의 생성을 좀더 편리하게 수행할 수 있다.

이런 필드의 지정을

이렇게 퉁 칠 수 있는 것이다.

그렇다.