디스트럭처링 할당 (구조 분해 할당) : 구조화된 배열과 같은 이터러블 또는 객쳬를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것
1. 배열 디스트럭처링 할당
const arr = [1, 2, 3];
// ES6 배열 디스트럭처링 할당
// 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다.
// 이때 할당 기준은 배열의 인덱스다.
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3
- 배열 디스트럭처링 할당의 기준은 배열의 인덱스
- 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다．
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 Ix, ... y] = [1, 2, 3];
consote.log(x, y); // 1 [ 2, 3 ]
2. 객체 디스트럭처링 할당
- ES5에서 객쳬의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 한다．
const user = { firstName: 'Ungrno' , tastName: 'Lee' };
// ES6 객체 디스트럭처링 힐당
// 변수 lastName, firstName을 선언히고 user 객체를 디스트럭처링하여 할당한다．
// 이때 프로퍼티 키를 기준으로 디스트럭처링 힐당이 이루어진다. 순서는 의미가 없다．
const { lastName, firstName } = user;
consoLe.log(firstName, lastName); // Ungmo Lee
const { lastName, firstName } = user; //프로퍼티 축약 표현을 통해 선언한 것
// 위와 아래는 동치다．
const { lastName: lastName, firstNanie: firstName } = user;
// 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수 선언
const user = { firstName: 'Ungmo' , lastName: 'Lee'
// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다，
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당하고,
// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당한다．
const { lastName: ln, firstName: fn } = user;
console.log(fn, ln); // Ungmo Lee
- 객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.
const { firstName = 'Ungmo' , lastName } = { lastName: 'Lee' };
console.log(firstName, lastName); // Ungmo Lee
const { firstName: fn = 'Ungmo' , lastName: ln } = { lastName: 'Lee' };
console.log(fn, ln); // Ungmo Lee
- 배열의 요소가 객체인 경우, 배열 디스트럭처링 할당과 객체 디스트럭처링 할당 혼용 가능
const todos = [
{ id: 1, content: 'HTML ', completed: true },
{ id: 2, content: 'CSS', completed: false },
{ id: 3, content: 'JS', completed: false }
];
// todos 배열의 두 번째 요소인 객체로부터 id 프로퍼티만 추출힌다．
const [, { id }] = todos;
console.log(id); // 2
const user = {
name: 'Lee' ,
address: {
zipCode: '03068' ,
city: 'Seoul'
}
};
// address 프로퍼티 키로 객체를 추출히고 이 객체의 city 프로퍼티 키로 값을 추출한다．
const { address: { city } } = user;
console.log(city); // 'Seoul'
// Rest 프로퍼티
const{ x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y: 2, z: 3 }
