Destructuring Assignment
구조 분해 할당 구문은 배열의 값이나 객체의 속성을 별개의 변수로 추출할 수 있게 하는 자바스크립트 식(expression)입니다.
영상 강의
PART 1
NOTE
영상 강의는 구조 분해 할당을 비구조화 할당이라고 말하고 있습니다. 비 구조화 보다 구조 분해가 이해하기 쉽습니다.
codepen
예제
구조 분해 할당은 배열 혹은 객체에서 편리한 문법을 이용해 값을 추출하고 저장하는데에 활용됩니다.
배열 구조 분해 할당
기존 코드는 배열의 아이템을 각 변수에 할당하기 위해서는 아래와 같이 작성해야 했습니다.
var arr = [1, 2, 3, 4];
var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];
console.log(a); // 1
console.log(b); // 2
ES6+ 부터는 배열을 구조 분해하여 각 변수에 아이템을 손쉽게 할당하는 구문을 사용할 수 있습니다.
let [a, b, c, d] = [1, 2, 3, 4];
console.log(a); // 1
console.log(b); // 2
배열의 특정 아이템만 변수에 할당하고자 한다면 배열 아이템의 인덱스에 맞게 구조 분해 할당을 해야 합니다.
let [a, , ,d] = [1, 2, 3, 4];
console.log(a); // 1
console.log(d); // 4
객체 구조 분해 할당
기존 코드는 객체의 멤버를 각 변수에 할당하기 위해서는 아래와 같이 작성해야 했습니다.
var obj = {
type: 'Object',
collection: 'key: value',
isItTheParentOfAllObjects: true
};
var type = obj.type;
var collection = obj['type'];
var isItTheParentOfAllObjects = obj.isItTheParentOfAllObjects;
console.log(type); // 'Object'
console.log(isItTheParentOfAllObjects); // true
ES6+ 부터는 객체를 구조 분해하여 각 변수에 멤버를 손쉽게 할당하는 구문을 사용할 수 있습니다.
let { type, collection, isItTheParentOfAllObjects } = obj;
console.log(type); // 'Object'
console.log(isItTheParentOfAllObjects); // true