구조분해 할당 (destructuring assignment)

객체의 속성과 그 속성을 담는 변수명이 동일할 때

예시1 - 한 줄로 줄일 수 있다

const { body, createElement } = document;

위 코드는 아래의 코드와 동일하다

const body = document.body;
const createElement = document.createElement;

예시2

const obj = { a: 1, b: 2 };

구조분해 할당을 이용하여 아래와 같이 표현할 수 있다.

const { a, b } = obj;

위 코드는 아래의 코드와 동일하다.

const a = obj.a;
const b = obj.b;

예시3 - 객체

const obj = {
  a: 'hello',
  b: {
    c: 'hi',
    d: { e: 'wow' }
  },
};

const a = obj.a;
const c = obj.b.c;
const e = obj.b.d.e;

위의 코드를 구조분해 할당을 사용하여 한 줄로 표현하면 다음과 같다.

const { a, b: { c, d: { e } } } = obj;

const a = obj.a;
const b = obj.b;
const c = obj.b.c;
const d = obj.b.d;
const e = obj.b.d.e;

a, b, c, d, e 모두를 한 줄에 표현하면 다음과 같다

const { a, b, b: { c, d, d: { e } } } = obj;

혹은 조금 더 가독성이 좋도록 아래처럼 작성할 수도 있다.

const { a, b } = obj;
const { c, d } = b;
const { e } = d;

예시4 - 배열

const arr = [1, 2, 3, 4, 5];

지금까지 구조분해 할당을 몰랐더라면 아래와 같이 코드를 작성하였을 것이다.

const one = arr[0];
const two = arr[1];
const three = arr[2];
const four = arr[3];
const five = arr[4];

하지만 구조분해 할당을 사용하면 아래와 같이 한 줄에 깔끔하게 코드를 작성할 수 있다.

const [ one, two, three, four, five ] = arr;

만약 특정 원소만 할당할 것이라면

const one = arr[0];
const three = arr[2];
const five = arr[4];

위와 같이 one, three, five만 할당하여 사용할 것이라면 아래와 같이 빈 칸으로 비워주면 된다

const [one,, three,, five] = arr;