비구조화 할당

ESNext는 '비구조화 할당'이라고 하는 구문을 제공한다. 비구조화 할당은 객체 혹은 배열에 적용할 수 있다. 비구조화 할당은 객체나 배열의 속성을 해제하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다.

객체에 적용

let person = {name: "Jane", age: 22}
let {name, age} = person

console.log(name); // "Jane"
console.log(age); //22

배열에 적용

let array = [1, 2, 3, 4]
let [head, ...rest] = array

console.log(array); // [1, 2, 3, 4]
console.log(head); // 1
console.log(rest); // [2, 3, 4]

Swap 예시

let a = 1;
let b = 2;

[a, b] = [b, a]

console.log(a); // 2
console.log(b); // 1

화살표 함수

화살표 함수(arrow function expression)은 전통적인 함수 표현식에 간편한 대안이다. 하지만 몇가지 제한점이 있다.

제한점

• 화살표 함수 표현은 this와 super에 대한 바인딩이 없다.
• new.target 키워드가 없다.
• 생성자를 사용할 수 없다.
• 스코프를 지정할 때 call, apply, bind 메서드를 사용할 수 없다.

// 기본 함수 표현식
function add(a,b){
	return a + b;
}

// 화살표 함수 표현식
const add = (a, b) => {
	a + b;
}

모듈

모듈을 사용하여 코드를 여러 개의 파일로 분할하여 작성할 수 있다. 변수나 함수, 클래스 등에 export 키워드를 사용하여 다른 파일에서 사용할 수 있다. export를 사용하여 만든 모듈을 가져와 사용하고 싶을 때 import 키워드를 사용하면 된다.

import Add from './add'
let a = 1;
let b = 2;

const sum = Add(1, 2);

console.log(sum) // 3;

Promise와 async / await

ES5로 비동기 콜백 함수를 구현하려면 코드가 상당히 복잡해진다. ESNext의 async, await는 이를 보다 간편하게 구현할 수 있게 한다.

async function get(){
  let values = [];
  values.push(await Promise.resolve(1));
  values.push(await Promise.resolve(2));
  values.push(await Promise.resolve(3));
  return values
}

get().then(values => console.log(values)); // [1, 2, 3]