36장 디스트럭처링 할당

구조화된 배열과 같은 이터러블 또는 객체를 디스트럭처링하여 1개 이상의 변수에 개별적으로 할당하는 것.

📖배열 디스트럭처링 할당

const arr = [1, 2, 3];
const [one, two, three] = arr;

배열 디스트럭처링 할당의 대상은 이터러블이어야 하며 할당 기준은 인덱스다.

변수의 개수와 이터러블 요소 개수가 반드시 일치할 필요는 없다

const [c, d] = [1];
console.log(c, d); // 1 undefined
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
```
배열 디스트럭처링 할당은 배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용하다.
배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소(Rest element) ...을 사용할 수 있음. Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야한다.
```
// Rest 요소
const [x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [ 2, 3 ]
```

📖객체 디스트럭처링 할당

ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 함.

// ES5
var user = { firstName: 'Ungmo', lastName: 'Lee' };
 
var firstName = user.firstName;

ES6의 객체 디스트럭처링 할당 기준은 프로퍼티 키다. 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체이어야 함.

const user = { firstName: 'Ungmo', lastName: 'Lee' };
 
// ES6 객체 디스트럭처링 할당
const { firstName, lastName } = user;
console.log(firstName, lastName); //Ungmo Lee
const { lastName, firstName } = { firstName: 'Ungmo', lastName: 'Lee' };

객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언한다.
```
const user = { firstName: 'Ungmo', lastName: 'Lee' };
const { lastName: ln, firstName: fn } = user;
```

기본값도 설정할 수 있다.

const { firstName = 'Ungmo', lastName } = { lastName: 'Lee' };
console.log(firstName, lastName); //Ungmo Lee

객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.

const str = 'Hello';
//String 래퍼 객체로부터 length프로퍼티만 추출한다.
const { length } = str;
console.log(length); //5

배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.

const todos = [
  { id: 1, content: 'HTML', completed: true },
  { id: 2, content: 'CSS', completed: false },
  { id: 3, content: 'JS', completeld: false },
];
//todos배열의 두 번째 요소인 객체로부터 id 프로퍼티만 추출.
const [, { id }] = todos;
console.log(id); // 2

중첩 객체의 경우

const user = {
  name: 'Lee',****
  address: {
    zipCode: '03068',
    city: 'Seoul',
  },
};
//addres 프로퍼티 키로 객체를 추출하고 이 객체의 city프로퍼티 키로 값을 추출한다.
const {
  address: { city },
} = user;
console.log(city); // 'Seoul'

객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 ...을 사용할 수 있다. 반드시 마지막에 위치해야 함!

// Rest 프로퍼티
const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y : 2, z : 3 }

스터디 개요