📒

구조분해 할당의 대상이 되는 것들은 이터러블, 객체이며 이터러블 혹은 객체를 구조 분해하여 1개 이상의 변수에 개별로 할당하는 것입니다.

✔️배열 구조분해 할당

할당 기준은 배열의 인덱스입니다. 이터러블(배열) 요소 순서대로 각 변수에 할당되는 것입니다.

할당 받을 변수는 배열 리터럴 형태로 선언합니다.

const [x,y] = [1,2];

또한 반드시 변수의 갯수가 이터러블의 요소 갯수와 같을 필요는 없습니다.

const [c,d] = [1];
console.log(c,d); // 1 undefined

배열 구조분해 할당문에 사용하는 변수에 기본값을 설정할 수도 있습니다.

const [c,d=2] = [1];
console.log(c,d); // 1 2

배열 구조분해 할당문에 사용하는 변수에 Rest 요소를 사용할 수도 있습니다..

const [c, ...d] = [1,2,3];
console.log(c,d); // 1 [2, 3]

✔️객체 구조분해 할당

객체의 각 프로퍼티를 객체로부터 구조분해하여 변수에 할당합니다.

할당 기준은 프로퍼티 키이며 순서는 상관 없습니다.

따라서 구조분해 된 프로퍼티의 값을 할당받기 위해서는 변수를 키 이름과 동일하게 해야하며, 할당받는 변수는 객체 리터럴 형태로 선언해야합니다.

const user = {firstName: 'Mingyo', lastName: 'Jeong'};

// 객체 구조분해 할당 대상은 할당 연산자 오른쪽에 와야합니다.
// 할당받는 변수는 객체 리터럴 형태로 선언해야하며, 프로퍼티 키와 동일해야합니다.
// 순서는 의미 없습니다. 키를 기준으로 할당합니다.
const {lastName, firstName} = user;

console.log(lastName, firstName);

객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당 받으려면 변수 선언을 조금 다르게 해야합니다.

const user = {firstName: 'Mingyo', lastName: 'Jeong'};
// lastName키의 값을 ln에 할당, firstName키의 값을 fn에 할당
const {lastName: ln, firstName: fn} = user;

객체 구조분해 할당도 배열 구조분해 할당처럼 변수에 기본값을 설정할 수 있습니다.

마찬가지로 원하는 프로퍼티 값만 추출해서 변수에 할당할 수도 있습니다.

함수의 매개변수에도 객체 구조분해 할당을 사용할 수 있습니다.

중첩 객체 구조분해 할당은 다음과 같이 사용합니다.

const user = {
  name: 'Mingyo',
  address: {
    zipCode: '11111',
    city: '떡잎마을'
  }
};

const { address: {city}} = user;
console.log(city); // 떡잎마을

배열 구조분해 할당의 Rest 요소와 마찬가지로 객체 구조분해 할당에 Rest 프로퍼티가 있습니다.

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