저번에 이어서 ES6의 특징을 알아본다.
객체 디스트럭쳐링
const arr = [1, 2, 3];
const [one, two, three] = arr;위의 코드를 보면 Array로 된 123을 각각 변수one, tow, three에 넣을 수 있다. 이러한 방식을 디스트럭쳐링이라한다.
쉽게 변수 리스트에 값 리스트를 순서대로 넣는 것이다.
const obj = { firstName: '나미', lastName: '오' };
const { lastName, firstName } = obj;위처럼 객체에도 사용할 수 있으며 할당 기준은 key가 되며 중첩된 객체에도 이용할 수 있다.
클래스
ES6에서는 class를 통해서 클래스를 생성할 수 있다.
class Person {
constructor(name) {
this._name = name;
}
sayHi() {
console.log(`안녕 ${this._name}`);
}
}
const me = new Person('오');또한 위처럼 constructor를 통해서 초기화할 수 있다.
클래스 필드에는 오직 메소드만 선언할 수 있다.
또한 getter, setter을 통해서 필드를 접근-할당할 때마다 조작하는 행위를 가능하도록 도와준다.
물론 상속도 가능하고 오버로딩, 오버라이딩, super를 통한 부모 클래스 참조 모두 가능하다.
모듈
ES6는 모듈기능을 통해 모듈을 가져올 수 있지만 구형부라우저, 번들링이슈로 Webpack등의 모듈 번들러를 일반적으로 사용한다.
ES6 모듈은 독자적인 모듈 스코프를 갖는다. 즉 파일을 통해 불러온 같은 변수라 할지라도 독자적인 영역을 가진다.
그로인해 외부에서 사용가능하게 만드려면 export를 사용한다.
그것을 로드할 때는 import를 사용하며 as로 식별자를 만들 수도 있다.
또한 default키워드를 통해 하나만을 export할 수 있다.
Promise
비동기 처리에 사용하며 기존 콜백 패턴에서의 수많은 콜백문제와 에러처리의 한계를 타파하기 위해 만들어졌다.
const promise = new Promise((resolve, reject) => {
if () {
resolve('result');
}
else {
reject('failure reason');
}
});Promise는 상태를 가지고 있고 이를 통해서 적절한 처리를 할 수 있다.
pending, fulfilled, rejected, settled의 상태를 가진다.
또한 메소드 then, catch, finally를 사용하여 후속처리가 가능하다.
특히 then이나 catch 메소드를 이용해 체이닝을 만들어 여러 Promise를 연결할 수 있다.(콜백 헬 해결)
Promise.all을 통해 여러 Promise를 병렬처리할 수도 있다.
Promise.race는 all과 달리 가장 먼저 처리된 프로미스가 resolve한 처리 결과를 resolve하는 새로운 프로미스를 반환한다.
Symbol
Symbol은 Symbol()를 통해 생성하는 호출마다 새로이 값을 생성하는 원시타입의 값이다.
이러한 특성으로 Symbol 값을 키로 갖는 프로퍼티는 다른 어떠한 프로퍼티와도 충돌하지 않는다는 특징이 있다.
이러한 특징으로 협업 시 충돌방지를 위해 사용하기도 한다.
이터레이션 for of
이터레이션은 쉽게 순회가능한 자료구조이다.
이터러블 프로토콜을 준수한 배열은 for...of 문에서 순회 가능하다.
이터레이터 프로토콜은 next 메소드를 가지며 next 메소드를 호출하면 이터러블을 순회하면서 {value, done} 객체를 반환한다.
이러한 이터레이션 프로토콜을 만든이유는 데이터를 사용하는 메소드와 데이터를 공급하는 다양한 자료형에서 문제없이 연결하도록 돕기위한 인터페이스 역할이 필요하기 때문이다. 이를 통해 이터레이션 프로토콜을 지원하도록 규현하는 방식으로 데이터 소비 메소드를 만들기만 하면 된다.
제너레이터와 async/await
이터러블을 생성하는 함수로 비동기 처리에 유용하게 사용하는 문법이다.
일반함수처럼 한번에 실행하는 것이 아니라 일시중지와 재시작을 통해 사용하는 특수한 함수이다.
제너레이터는 function* 키워드로 선언한다. 그리고 하나 이상의 yield 문을 포함해야한다.
// 제너레이터 함수 선언문
function* genDecFunc() {
yield 1;
}이러한 제너레이터의 특징으로 제너레이터를 사용해 비동기 처리를 동기 처리처럼 구현할 수 있다. 적절한 yield의 사용으로 순서를 보장할 수 있다.
물론 이보다 편한 방식으로 ES7의 async/await가 있다.
