LHJ

I'm a FE developer.

2.1.5 비구조화 할당

01 Aug 2020 » node_book

2.1.5 비구조화 할당(해체 할당)

이름은 어색하지만 매우 유용한 기능입니다.
객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있습니다.

var candyMachine = {
    status: {
        name: 'node',
        count: 5,
    },
    getCandy: function () {
        this.status.count--;
        return this.status.count;
    }
}
var getCandy = candyMachine.getCandy;
var count = candyMachine.status.count;

객체의 속성을 같은 이름의 변수에 대입하는 코드입니다.
이를 다음과 같이 바꿀 수 있습니다.

const candyMachine = {
    status: {
        name: 'node',
        count: 5,
    },
    getCandy: function () {
        this.status.count--;
        return this.status.count;
    }
};
const {getCandy, status: { count }} = candyMachine;

(이터레이션 객체 / 이터러블 객체)

당황스럽겠지만, 위 문법은 유효한 문법입니다.
candyMachine 객체 안의 속성을 찾아서 변수와 매칭해줍니다.
count처럼 여러 단계 안의 속성도 찾을 수 있습니다.
getCandycount 변수가 초기화된 것입니다.

배열도 비구조화할 수 있습니다.

var array = ['nodejs', {}, 10, true];
var node = array[0];
var obj = array[1];
var bool = array[3]

array란 배열의 첫번째, 두번째 요소와 마지막 요소를 변수에 대입하는 코드입니다.
다음과 같이 바꿀 수 있습니다.

const array = ['nodejs', {}, 10, true];
const [node, obj, , bool] = array;

어색해 보이지만, 나름대로 규칙이 있습니다.
node, obj와 bool의 위치를 보면 node는 배열의 첫번째 요소, obj는 두번째 요소, bool은 마지막 요소라는 것을 알 수 있습니다.
obj와 bool 사이의 요소들은 무시합니다.

비구조화 할당 문법도 코드 줄 수를 상당히 줄여주므로 유용합니다.
특히 노드는 모듈을 사용하므로 이러한 방식을 자주 사용합니다.
3.3절에서 자세히 알아보겠습니다.