36장 디스트럭처링 할당
구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.
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
// ES6 배열 디스트럭처링 할당
// 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다.
// 이때 할당 기준은 배열의 인덱스다.
const arr = [1, 2, 3];
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3
배열 디스트럭처링 할당을 위해서는 왼쪽에 값을 할당받을 변수를 선언해야 한다. 이때 변수를 배열 리터럴 형태로 선언한다.
const [x, y] = [1, 2];
만약 우변에 이터러블을 할당하지 않으면 에러가 발생한다.
const [x, y]; // SyntaxError...
const [a, b] = {}; // TypeError: {} is not iterable
배열 디스트럭처링 할당의 기준은 배열의 인덱스다. 즉 순서대로 할당된다. 개수가 일치할 필요는 없다.
const [a, b] = [1, 2];
console.log(a,b); // 1 2
const [c, d] = [1];
console.log(c); // 1
const [e, f] = [1, 2, 3];
console.log(e, f); // 1 2
배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.
// 기본값
const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 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'
}
*/
배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소 … 을 사용할 수 있다. Rest 요소는 Rest 파라미터와 마찬가지로 반드시 마지막에 위치해야 한다.
// Rest 요소
const [x, ...y] = [1, 2, 3];
console.log(x, y); // 1 [2, 3]
2 객체 디스트럭처링 할당
ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는 프로퍼티키를 사용해야 한다.
// ES5
var user = { firstName : 'Ungmo', lastName : 'Lee' };
var firstName = user.firstName;
var lastName = user.lastName;
console.log(firstName, lastName); // Ungmo Lee
ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다. 이때 할당의 대상은 객체(우변)이어야 하며, 할당 기준은 프로퍼티 키다. 즉 순서는 의미가 없으며 선언된 이름과 프로퍼티 키가 일치하면 할당된다.
const user = { firstName: "Ungmo", lastName: "Lee" };
// ES6 객체 디스트럭처링 할당
// 변수 lastName, firstName을 선언하고 user 객체를 디스트럭처링하여 할당한다.
const { lastName, firstName } = user;
// 선언된 변수 이름과 프로퍼티 키가 일치하지 않으면 할당되지 않는다.
console.log(firstName, lastName);
위 예제에서 객체 리터럴 형태로 선언한 변수는 축약 표현을 통해 선언할 수 있다.
const { lastName, firstName } = user;
// 위와 아래는 동치다.
const { lastName : lastName, firstName: firstName} = user;
선언된 변수 이름과 프로퍼티 키가 일치하지 않으면 할당되지 않는다.
const user = { firstName: "Ungmo", lastName: "Lee" };
// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어진다.
// 프로퍼티 키가 lastName인 프로퍼티 값을 in에 할당하고,
// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당한다.
const { lastName: ln, firstName: fn } = user;
console.log(fn, ln);
만약 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언하면 된다.
const user = { firstName: "Ungmo", lastName: "Lee" };
const { firstName = "Ungmo", lastName } = { lastName: "Lee" };
console.log(firstName, lastName);
const { firstName: fn = "Ungmo", lastName: ln } = { lastName: "Lee" };
console.log(fn, ln);
객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을 때 유용하다.
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
객체를 인수로 전달받는 매개변수 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: "JavaScript", completed: false },
];
// todos의 배열의 두 번째 요소인 객체로부터 id 프로퍼티만 출력한다.
const [, { id }, { content }] = todos;
console.log(id);
// todos의 배열의 세 번째 요소인 객체로부터 completed 프로퍼티만 출력한다.
console.log(content); // JavaScript
중첩 객체의 경우 프로퍼티를 출력하는 방법
const todos = [
{ id: 1, content: "HTML", completed: true },
{ id: 2, content: { CSS: true, SASS: false }, completed: false },
{ id: 3, content: "JavaScript", completed: false },
];
const [
,
{
content: { CSS },
},
{ content },
] = todos;
// todos 배열의 두 번째 요소인 content 객체를 꺼내 그중 CSS 객체의 프로퍼티를 출력한다.
console.log(CSS);
// todos 배열의 세 번째 요소인 객체로부터 completed 프로퍼티만 출력한다.
console.log(content); // JavaScript
객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게 Rest 프로퍼티 … 을 사용할 수 있다. Rest 요소들은 반드시 마지막에 위치해야 한다.
// Rest 프로퍼티
const { x, ...rest } = { x: 1, y: 2, z: 3};
console.log(x, rest); // 1 { y: 2, z: 3 };
Last modified: 09 January 2025