디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.

배열 디스트럭처링 할당

배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다.

const arr = [1,2,3];

const [one, two, three] = arr;

console.log(one, two, three); // 1 2 3 

이때 변수를 배열 리터럴 형태로 선언한다.
변수의 개수와 이터러블이 요소 개수가 반드시 일치할 필요가 없다. 변수가 부족하면 undefined가 들어간다.

배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소 ...을 사용할 수 있다.

const [x, ...y] = [1,2,3];
console.log(x, y); // 1 [2,3]

객체 디스트럭처링 할당

객체 디스트럭처링에서 할당 기준은 프로퍼티 키다.

const user = {firstName: 'Ungmo', lastName: 'Lee'};

// Es6 객체 디스트럭처링 할당
// 변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당
// 이때 프로퍼티 키를 기준으로 디스트럭처링 할당. 순서는 상관 x
const {lastName, firstName} = user;

console.log(firstName, lastName); // Ungmo Lee

객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당하려면 다음과 같이 변수를 선언한다.

const user = {firstName: 'Ungmo', lastName: 'Lee'};

const {lastName:ln, firstName:fn} = user;

console.log(fn, ln); // Ungmo Lee

객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.