• 디스트럭처링 할당 (구조 분해 할당) : 조회된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것

36.1 배열 디스트럭처링 할당

• 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당.
• 이때 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야하며, 할당 기준은 배열의 인덱스. 즉 순서대로 할당.

const arr = [1, 2, 3];

const [one, two, three] = arr;

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

• 우변에 배열 리터럴 형태이어야 하며, 할당하지 않으면 에러가 발생.

const [x, y] = [1, 2];

const [x, y]; // SyntaxError

const [a, b] = {}; // TypeError

• 배열 디스트럭처링 할당의 기준은 배열의 인덱스. 즉, 순서대로 할당.

const [a, b] = [1, 2];
console.log(a, b) // 1 2

const [c, d] = [1];
console.log(c, d); // 1 undefined

const [e, f] = [1, 2, 3];
console.log(e, f); // 1 2

const [g, , h] = [1, 2, 3];
console.log(g, h); // 1 3

• 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정 가능.

// 기본값
const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3

// 기본값보다 할당된 값이 우선한다.
const [e, f = 10, g = 3] = [1, 2];
console.log(e, f, g); //  1 2 3

• 배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 **Rest 요소**를 사용. Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치함.

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

36.2 객체 디스트럭처링 할당

• 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당.
• 순서와 상관없이 프로퍼티 키를 기준으로 할당.

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

const { lastName, firstName } = user;

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

• 프로퍼티 축약 표현으로 선언.

const { lastName, firstName } = user;
// 위와 아래는 동치.const { lastName: lastName, firstName: firstName } = user;