[JS] 디스트럭처링 할당(구조분해 할당)
디스트럭처링 할당
일명 구조 분해 할당이라 부르는 디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 구조 분해하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출해 변수에 할당할 때 유용하다.
배열 구조 분해 할당
배열 디스트럭처링 할당은 배열의 각요소를 배열로부터 추출해 1개 이상의 변수에 할당한다. 이때, 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다. 즉 순서대로 할당된다.
var foo = ["one", "two", "three"];
var [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"
우항에 이터러블을 할당하지 않으면 에러가 발생한다.
const [x, y]; // SyntaxError: Missing initializer in destructuring declaration
const [a, b] = {}; // TypeError: {} is not iterable
변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.
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 [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
처음에 언급했듯이 디스트럭처링 할당은 필요한 요소만 추출해 변수에 할당하고 싶을때 유용하다.개인적으로 이게 디스트럭처링 할당의 꽃이 아닐까 생각해봤다.
// url을 파싱하여 protocol, host, path 프로퍼티를 갖는 객체를 생성해 반환한다.
function parseURL(url = '') {
// '://' 앞의 문자열(protocol)과 '/' 이전의 '/'으로 시작하지 않는 문자열(host)과 '/' 이후의 문자열(path)을 검색한다.
const parsedURL = url.match(/^(\w+):\/\/([^/]+)\/(.*)$/);
console.log(parsedURL);
/*
[
'https://developer.mozilla.org/ko/docs/Web/JavaScript',
'https',
'developer.mozilla.org',
'ko/docs/Web/JavaScript',
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');
console.log(parsedURL);
/*
{
protocol: 'https',
host: 'developer.mozilla.org',
path: 'ko/docs/Web/JavaScript'
}
*/
객체 디스트럭처링 할당
객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출해 1개 이상의 변수에 할당한다. 이때 객체 디스트럭처링 할당의 대상(할당문의 우면)은 객체이어야 하며, 할당 기준은 프로퍼티 키다. 즉 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.
const user = { firstName: 'Seungho', lastName: 'An' };
// 변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당한다.
// 이때 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다. 순서는 의미가 없다.
const { lastName, firstName } = user;
console.log(firstName, lastName); // Seungho An
객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언한다.
const user = { firstName: 'Seungho', lastName: 'An' };
// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다.
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당하고,
// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당한다.
const { lastName: ln, firstName: fn } = user;
console.log(fn, ln); // Seungho An
객체 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.
const { firstName = 'Seungho', lastName } = { lastName: 'An' };
console.log(firstName, lastName); // Seungho An
const { firstName: fn = 'Seungho', lastName: ln } = { lastName: 'An' };
console.log(fn, ln); // Seungho An
객체 디스트럭처링 할당 역시 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출해 변수에 할당하고 싶을 때 유용하다.
const str = 'Hello';
// String 래퍼 객체로부터 length 프로퍼티만 추출한다.
const { length } = str;
console.log(length); // 5
const todo = { id: 1, content: 'HTML', completed: true };
// todo 객체로부터 id 프로퍼티만 추출한다.
const { id } = todo;
console.log(id); // 1
객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있다.
function printTodo(todo) {
console.log(`할일 ${todo.content}은 ${todo.completed ? '완료' : '비완료'} 상태입니다.`);
}
printTodo({ id: 1, content: 'HTML', completed: true });
// 할일 HTML은 완료 상태입니다.
여기서 객체를 인수로 전달받는 매개변수 todo에 객체 디스트럭처링 할당을 사용하면 좀 더 간단하고 가독성 좋게 표현할 수 있다.
function printTodo({ content, completed }) {
console.log(`할일 ${content}은 ${completed ? '완료' : '비완료'} 상태입니다.`);
}
printTodo({ id: 1, content: 'HTML', completed: true });
// 할일 HTML은 완료 상태입니다.
배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.
const todos = [
{ id: 1, content: 'HTML', completed: true },
{ id: 2, content: 'CSS', completed: false },
{ id: 3, content: 'JS', completed: false }
];
// todos 배열의 두 번째 요소인 객체로부터 id 프로퍼티만 추출한다.
const [, { id }] = todos;
console.log(id); // 2