디스트럭처링 할당은 구조화된 이터러블 또는 객체를 distructuring하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.
배열 디스트럭처링 할당
ES6의 배열 디스트럭처링 할당은 이터러블의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다. 이때 배열 디스트럭처링 할당의 대상은 이터러블이어야 하며, 할당 기준은 인덱스이다. 즉, 순서대로 할당됩니다.
const arr = [1, 2, 3];
cosnt [one, two, three] = arr;
console.log(one, two, three); // 1 2 3배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 합니다. 이때 변수를 배열 리러털 형식으로 선언해야 합니다.
그리고 우변에 이터러블을 할당하지 않으면 에러가 발생합니다.
배열 디스트럭처링 할당의 기준은 배열의 인덱스다. 즉, 순서대로 할당됩니다. 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없습니다.
const [a, b] = [1];
console.log(a, b); // 1 undefined
const [c, d] = [1, 2, 3];
console.log(c, d, e); // 1 2 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있습니다. 이때 기본값보다 할당된 값이 우선됩니다.
const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 값만 추출하여 변수에 할당하고 싶을 때 유용합니다.
배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소 ... 을 사용할 수 있습니다. Rest 요소는 Rest 파라미터와 마찬가지로 가장 마지막에 위치해야 합니다.
const [x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [2, 3]객체 디스트럭처링 할당
ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당합니다. 이때 객체 디스트럭처링 할당의 대상은 객체이어야 하며, 할당 기준은 프로퍼티 키입니다. 즉, 순서는 의미가 없으며 선언된 변수의 이름과 프로퍼티 키가 일치하면 할당됩니다.
const user = {firstName: 'Kim', lastName: 'DongHyun' };
cosnt { lastName, firstName } = user;
console.log(firstName, lastName); // Kim DongHyun배열 디스트럭처링 할당과 마찬가지로 객체 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 프로퍼티를 할당받을 변수를 선언해야 합니다. 이때 변수를 객체 리터럴 형식으로 선언헤야 합니다.
우변에는 객체 또는 객체로 평가될 수 있는 표현식을 할당하지 않으면 에러가 발생합니다.
위 예제에서 객체 리터럴 형태로 선언한 변수는 firstName, lastName이다.
이때 프로퍼티 축약 표현을 통해 선언한 것입니다.
const {firstName, lastName} = user;
// 위와 아래는 동치이다.
cosnt {frstName: firstName, lastName: lastName} = user;따라서 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언해야 합니다.
const user = {firstName: 'kim', lastName: 'DongHyun'};
const {lastName: ln, firstName: fn} = user;
console.log(fn, ln); // Kim DongHyun객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있습니다.
const {firstName = 'Kim', lastName} = {lastName: 'DongHyun'};
console.log(fristName, lastName); // Kim DongHyun
const {firstName: fn = 'Kim', lastName: ln} = { lastName: 'DongHyun' };
console.log(fn, ln); // Kim DongHyun객체 디스트럭처링 할당은 객체에서 필요한 프로퍼티 값만 추출하여 변수에 할당할 때 유용합니다.
객체 디스트럭처링 할당은 객체 리터럴을 할당받는 함수의 매개변수에도 사용할 수 있습니다.
객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 ...을 사용할 수 있습니다. Rest 프로퍼티 또한 반드시 마지막에 위치해야 합니다.
const {x, ...rest} = {x: 1, y: 2, z: 3};
console.log(x, rest); // 1, {y: 2, z: 3}