디스트럭처링 할당 (Destructuring Assignment)
구조화된 배열과 같은 이터러블 또는 객체를 destructuring하여 1개 이상의 변수에 개별적으로 할당하는 것
- a.k.a 구조 분해 할당
- 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.
배열 디스트럭처링 할당
- 다음은 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법이다.
// E55
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
- ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다.
- 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스로 순서대로 할당된다.
- 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.
- 배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용하다.
- 배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소 ...을 사용할 수 있다.
- Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야 한다.
객체 디스트럭처링 할당
- ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 한다.
// ES5
var user = { firstName: 'Gabin' , lastName: 'Lee' };
var firstName = user.firstName;
var lastName = user.lastName;
console.log(firstName, lastName); // Gabin Lee
- ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다.
- 이때 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체여야 하며 할당 기준은 프로퍼티 키가 된다.
- 즉 , 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.
const user = { firstName: 'Gabin' , lastName: 'Lee' };
// ES6 객체 디스트럭처링 할당
// 변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당한다.
// 이때 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다.
const { lastName, firstName } = user;
consoLe.log(firstName, lastName); // Gabin Lee
- 배열 디스트럭처링 할당과 마찬가지로 할당 연산자 왼쪽에 프로퍼티 값을 할당받을 변수를 선언해야 한다.
- 이때 변수를 객체 리터럴 형태로 선언한다.
- 객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.
- 객체 디스트럭처링 할당은 객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있다.
- 객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 ...을 사용할 수 있다.
- Rest 프로퍼티는 Rest 파라미터나 Rest 요소와 마찬가지로 반드시 마지막에 위치해야 한다.
// Rest 프로퍼티
// Rest 프로퍼티는 스프레드 프로퍼티와 함께 TC39 프로세스의 stage4(Finished) 단계에 제안되어 있다.
const{ x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y: 2, z: 3 }