JavaScript-구조분해 할당

구조분해 할당

배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있도록 표현하는 것

이는 어떤 객체의 속성과 그 속성을 담은 변수의 변수명이 동일할 경우에 사용가능하다.

const body = document.body;

위와 같이 속성과 변수명이 같으면 아래의 코드와 같이 넣을 수 있다.

const { body } = document;

다른 예를 들어보면

const obj = {a: 1, b: 2};
const a = obj.a;
const b = obj.b;
const {a, b} = obj;				//바로 위의 두 줄의 코드를 한 줄로 표현할 수 있다.

또한, 배열에 대한 구조분해 할당도 가능하다.

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;

로 넣을 수 있고 위의 예시에서 two와 four는 넣고 싶지 않다면,

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

위와 같이 그냥 공백으로 두면 된다.

문제
다음 객체에서 a,c,e 속성을 구조분해 할당 문법으로 변수에 할당하라.

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

정답

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