디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.
배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.
ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 아래와 같다.
/* ES5 */
var arr = [1, 2, 3];
var one = arr[0];
var two = arr[1];
var three = arr[2];
console.log(one, two, three); // 1, 2, 3
ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로서 추출하여 1개 이상의 변수에 할당한다.
이때 배열 디스트럭처링 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스이다.
const arr = [1, 2, 3];
const [one, two, three] == arr;
console.log(one, two, three); // 1, 2, 3
배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 배열 리터럴 형태로 선언한다.
아래와 같은 경우 에러가 발생한다.
const [x, y]; // SyntaxError: Missing initializer in destructuring declaration
const [a, b]; = {}; // TypeError: {} is not iterable
배열 디스트럭처링 할당의 변수 선언문은 아래와 같이 선언과 할당을 분리할 수 있지만, 이 경우 const 키워드로 변수를 선언할 수 없으므로 권장하지는 않는다.
let x, y;
[x, y] = [1, 2];
배열 디스트럭처링 할당의 기준은 배열의 인덱스이기 때문에 순서대로 할당된다. 이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.
/* 변수의 개수 = 이터러블의 요소 개수 */
const [a, b] = [1, 2];
console.log(a, b); // 1 2
/* 변수의 개수 > 이터러블의 요소 개수 */
const [c, d] = [1];
console.log(c, d); // 1 undefined
/* 변수의 개수 < 이터러블의 요소 개수 */
const [e, f] = [1, 2, 3];
console.log(e, f); // 1 2
const [g, , h] = [1, 2, 3];
console.log(g, h); // 1 3
const [x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [2, 3]
배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.
const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3
const [e, f = 10, g = 3] = [1, 2];
console,log(e, f, g); // 1 2 3
배열 디스트럭처링 할당은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용하다.
function parseURL(url = '') {
const parsedURL = url.match(/^(\\w+):\\/\\/([^/]+)\\/(.*)$/);
console.log(parsedURL);
/*
[
'<https://developer.mozilla.org/ko/docs/web/JavaScript;,>
'https',
'developer.mozilla.org',
'index: 0',
input: '<https://developer.mozilla.org/ko/docs/web/JavaScript>',
groups: undefined
]
*/
if (!parsedURL) return {};
const [, protocol, host, path] = parsedURL;
return { protocol, host, path };
}
const parsedURL = parseURL('<https://developer.mozilla.org/ko/docs/web/JavaScript>');
ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티 키를 사용해야 한다.
/* ES5 */
var obj = { ka: 'va', kb: 'vb' };
var ka = obj.ka;
var kb = obj.kb;
console.log(ka, kb); // va vb
ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다.
이때 객체 디스트럭처링 할당의 대상은 객체이어야 하며, 할당 기준은 프로퍼티 키이다.
즉, 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.
배열 디스트럭처링 할당과 마찬가지로 객체 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 프로퍼티 값을 할당받을 변수를 선언해야 하며, 이때 변수를 객체 리터럴 형태로 선언한다.
const obj = { ka: 'va', kb: 'vb' };
const { ka, kb } = obj; // 프로퍼티 축약 표현(아래와 동치)
const { ka: ka, kb: kb } = obj;
console.log(va, vb); // va vb
만약 우변에 객체 또는 객체로 평가될 수 있는 표현식을 할당하지 않으면 에러가 발생한다.
const { ka, kb }; // SyntaxError: Missing initializer in destructuring declaration
const { ka, kb } = null; // TypeError: Cannot destructure property 'ka' of 'null' as it is null
객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.
const { ka = 'va', kb } = { kb: 'vb' };
console.log(ka, kb); // va vb
const { ka: a = 'va', kb: b } = { kb: 'vb' };
console.log(a, b); // va vb
객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.
const str = 'Hardy';
const { length } = str;
console.log(length); // 5
const todo = {id: 1, content: 'WakeUp', completed: true};
const { content } = todo;
console.log(content); // WakeUp
객체 디스트럭처링 할당은 객체를 인수로 전달받은 함수의 매개변수에도 사용할 수 있다.
function printTodo(todo) {
console.log(`${todo.id}번째 할일 ${todo.content}은 ${todo.completed ? '완료된' : '완료되지 않은'} 상태입니다.`);
}
function printTodo({ id, content, completed }) {
console.log(`${id}번째 할일 ${content}은 ${completed ? '완료된' : '완료되지 않은'} 상태입니다.`);
}
print({ id: 1, content: 'WakeUp', completed: true })
// 1번째 할일 WakeUp은 완료된 상태입니다.
배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.
const todos = [
{ id: 1, content: 'A', completed: true },
{ id: 2, content: 'B', completed: true },
{ id: 3, content: 'C', completed: false }
];
const [,,{ id }] = todos;
console.log(id); // 3
중첩 객체의 경우는 아래와 같이 사용한다.
const user = {
name: 'Lee',
address: {
zipCode: '03068',
city: 'Seoul'
}
};
const { address: {city} } = user;
console.log(city); // Seoul
객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 …을 사용할 수 있다. 이때 Rest 프로퍼티는 반드시 마지막에 위치해야 한다.
const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y: 2, z: 3 }