구조 분해 할당

구조 분해 할당을 사용하면 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있습니다.

var candy Machine = {
	status: {
		status: '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() {
		this.status.count--;
		return this.status.count;
	},
};
const { getCandy, status: { count } } = candyMachine;

위 코드는 유효한 문법입니다. candyMachine 객체 안의 속성을 찾아서 변수와 매칭합니다.

그러나 구조 분해 할당을 사용하면 함수의 this가 달라질 수 있습니다. 달라진 this을 원래대로 바꿔주려면 bind 함수를 사용해야 합니다.

배열애 대한 구조분해 할당 문법도 존재합니다.

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 사이의 요소인 10에는 변수명을 지어주지 않았으므로 무시합니다.

 

구조 분해 할당 문법도 코드 줄 수를 상당히 줄여주므로 유용합니다. 특히 모듈 시스템을 사용하므로 이러한 방식을 자주 씁니다.