destructuring assignment
는 구조화된 배열과 같은 이터러블과 객체를destructuring
비구조화하여 1개 이상의 변수에 개별적으로 할당하는 방법
배열 디스트럭처링 할당의 우변은 이터러블이어야 하며, 할당 기준은 배열의
인덱스
이다
const arr = [1,2,3]
const [one, two, three] = arr
console.log(one, two, three); //1,2,3
//순서대로 할당
const [a, , b] = arr
console.log(a, b); //1, 3
//기본값보다 할당값이 우선
const [c =5, d=12] = arr
console.log(c,d) //1, 2
//Rest요소 할당 -> 마지막 인수만 가능!!!!!!!
const [x, ...y] = arr
console.log(x, y) // 1, [2,3]
객체 디스트럭처링 할당의 우변은 객체이어야 하며, 할당 기준은
프로퍼티 키
이다const user = { firstName: 'Ungmo', lastName: 'Lee' };
// ES6 객체 디스트럭처링 할당
// 변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당한다.
// 이때 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.
const { lastName, firstName } = user;
console.log(firstName, lastName); // Ungmo Lee
만약 객체의 프로퍼티 키와 ```다른 변수의 이름```으로 프로퍼티 값을 할당받으려면,
```js
const user = { firstName: 'Ungmo', lastName: 'Lee' };
// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다.
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당하고,
// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당한다.
const { lastName: ln, firstName: fn } = user;
console.log(fn, ln); // Ungmo Lee
이외에도 중첩객체
를 사용하여 이름 디스트럭처링 할당이 가능하다
const user = {
name: 'Lee',
address: {
zipCode: '03068',
city: 'Seoul'
}
};
// address 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출한다.
const { address: { city } } = user;
console.log(city); // 'Seoul'