ES6의 주요 변화
November 03, 2021
1. let / const
var와 달리 let과 const로 선언한 변수는 중복 선언이 불가능합니다.
let으로 선언한 변수는 재할당이 가능하지만, const로 선언한 변수는 재할당이 불가능하며, 반드시 선언과 동시에 초기화해야 합니다.
2. Arrow Function
function 키워드 대신 화살표(=>)를 사용하여 간략하게 정의 가능한 함수입니다. 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하기에도 유용합니다. (화살표 함수는 함수 자체의 this 바인딩을 갖지 않기 때문에 화살표 함수 내부에서 this를 참조하면 상위 스코프의 this를 그대로 참조합니다. - lexical this)
3. Promise
프로미스는 비동기 처리를 위한 또 다른 패턴입니다.
전통적인 콜백 패턴이 가진 단점을 보완하여 줍니다.
4. Template Literals
템플릿 리터럴은 ES6에 도입된 새로운 문자열 표기법으로, 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공합니다. 백틱(``)을 사용해 표현합니다.
5. Class
자바스크립트는 프로토타입 기반 객체지향 언어입니다. 클래스는 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 해주는 일종의 syntactic sugar입니다.
6. Destructuring Assignment
구조 분해 할당은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다. 필요한 값만 추출하여 변수에 할당할 때 유용합니다.
7. Rest Parameter, Default Parameter
Rest 파라미터는 매개변수 이름 앞에 ...을 붙여서 정의한 매개변수를 의미합니다. 함수에 전달된 인수들의 목록을 배열로 전달받습니다.
Default 파라미터는 인수가 전달되지 않은 경우와 undefined를 전달받은 경우의 기본값을 할당해준 파라미터입니다.
8. Spread Operator
스프레드 오퍼레이터(...)는 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만들어줍니다. 이터러블에 한정하여 사용할 수 있습니다.
9. Iterable, Iterator / for..of
이터러블은 이터레이터를 반환하는 Symbol.iterator 메서드를 가진 객체입니다. 이터레이터는 next 메서드(이터러블의 각 요소 순회하기 위한 포인터 역할)를 가지며, value와 done 프로퍼티를 갖는 객체를 반환합니다.
빌트인 이터러블로는 Array, String, Map, Set, TypedArray, arguments와 NodeList, HTMLCollection과 같은 DOM 컬렉션 객체 등이 있습니다.
for…of 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당합니다.
for(변수선언문 of 이터러블) {...}10. Module(ES6 Module = ESM)
ESM은 클라이언트 사이드 자바스크립트(브라우저 환경)에서도 동작하는 모듈 기능을 의미합니다.
ESM이 아닌 자바스크립트 파일은 script 태그로 분리해서 로드해도 독자적인 모듈 스코프를 갖지 않습니다.
export 키워드를 사용하여 식별자를 외부에 공개하고, import 키워드를 사용하여 다른 모듈에서 export한 식별자를 자신의 모듈 스코프 내부로 로드합니다.
하나의 값만 export한다면 default 키워드를 사용할 수 있고, 이 경우 이름 없이 export하므로 임의의 이름으로 import할 수 있습니다.
11. Set, Map
Set 객체는 중복되지 않는 유일한 값들의 집합입니다. 배열과 유사하지만 배열과 달리 요소 순서에 의미가 없으며, 인덱스로 요소에 접근할 수도 없습니다.
Map 객체는 키와 값의 쌍으로 이루어진 컬렉션입니다. 객체와 유사하지만 객체와 달리 이터러블이며, 키로 모든 값을 사용 가능합니다.
12. Symbol
ES6 이전에 자바스크립트에는 6개의 타입(문자열, 숫자, 불리언, undefined, null, 객체)이 있었습니다. 심볼은 ES6에 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값입니다. 다른 값과 중복되지 않는 유일무이한 값입니다.
13. Generator
제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수입니다. function* 키워드로 선언하고, 하나 이상의 yield 표현식을 포함합니다.
제너레이터 함수를 호출하면 제너레이터 객체를 생성하여 반환합니다.
제너레이터 객체는 이터러블이면서 동시에 이터레이터입니다.
참고
- github.com/lukehoban/es6features
- 모던 자바스크립트 Deep Dive
