디스트럭처링 할당은 구조화된 배열과 같은 이터러블이나 객체를 파괴하여 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다.
36.1 배열 디스트럭처링 할당
ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 다음과 같습니다.
var arr = [1, 2, 3];
var one = arr[0];
var two = arr[1];
var three = arr[2];
console.log(one, two, three); // 1, 2, 3
JavaScript
복사
배열 디스트럭처링 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스입니다.
const arr = [1, 2, 3];
const [one, two, three] = arr;
console.log(one, two, three); // 1, 2, 3
JavaScript
복사
배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 합니다. 이때 변수를 배열 리터럴 형태로 선언합니다.
const [x, y] = [1, 2];
JavaScript
복사
배열 디스트럭처링 할당의 기준은 배열의 인덱스입니다. 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없습니다.
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];
consolt.log(g, h); // 1, 3
JavaScript
복사
배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소 … 을 사용할 수 있습니다. Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야 합니다.
const [x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [2, 3]
JavaScript
복사
36.2 객체 디스트럭처링 할당
ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 합니다.
var user = { firstName: 'Ungmo', lastName: 'Lee' };
var firstName = user.firstName;
var lastName = user.lastName;
console.log(firstName, lastName); // Ungmo Lee
JavaScript
복사
ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당합니다. 이때 객체의 디스트럭처링 할당의 대상은 객체이어야 하며, 할당 기준은 프로퍼티키입니다.
const user = { firstName: 'Ungmo', lastName: 'Lee' };
const { lastName, firstName } = user;
console.log(firstName, lastName); // Ungmo Lee
JavaScript
복사
축약 표현을 통해서 이름을 변경할 수도 있으며, 기본값을 할당할 수도 있습니다.
const user = { firstNAme: 'Ungmo', lastName };
const { lastName: ln = 'Lee', firstName: fn } = user;
console.log(fn, ln); // Ungmo Lee
JavaScript
복사
객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 …을 사용할 수 있습니다. Rest 프로퍼티는 Rest 파라미터나 Rest 요소와 마찬가지로 반드시 마지막에 위치해야합니다.
const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y: 2, z: 3 }
JavaScript
복사