36장. 디스트럭처링 할당

디스트럭처링 할당이란?

구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다.
배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

36.1 배열 디스트럭처링 할당

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] = [1,2]; // x는 1, y는 2
const [c,d] = [1]; // c는 1, d는 undefined 
const [g, ,h] = [1,2,3]; // g는 1, h는 3

36.2 객체 디스트럭처링 할당

객체 디스트럭처링 할당 기준은 프로퍼티 키다.
즉, 순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

const user = {firstName: 'Ungmo', lastName: 'Lee'};

// 디스트럭처링 할당
const {lastName, firstName} = user;

console.log(firstName, lastName); // Ungmo Lee

객체 디스트럭처링 할당은 객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있다.

function printTodo(todo){
  console.log(`할일 ${todo.content}은 ${todo.completed ? '완료' : '비완료'} 상태입니다.`);
}

printTodo({id: 1, content: 'HTML', completed: true})

위 예제에서 객체를 인수로 전달받는 매개변수 todo에 객체 디스트럭처링 할당을 사용하면 좀 더 간단하고 가독성 좋게 표현할 수 있다.

function printTodo({content, completed}){
  console.log(`할일 ${todo.content}은 ${todo.completed ? '완료' : '비완료'} 상태입니다.`);
}

printTodo({id: 1, content: 'HTML', completed: true})

배열의 요소가 객체인 경우 배열 디스트럭처링 할당과 객체 디스트럭처링 할당을 혼용할 수 있다.

const todos = [
   {id: 1, content: 'HTML', completed: true},
   {id: 2, content: 'CSS', completed: false},
   {id: 3, content: 'JS', completed: true},
]

// todos 배열의 두 번째 요소인 객체로부터 id 프로퍼티만 추출
const [, {id}] = todos;
console.log(id); // 2

중첩 객체인 경우는 다음과 같이 사용한다.

const user = [
   name: 'Lee',
   address: {
  	zipCode: '03068',
  	city: 'Seoul'
  }
];

// address 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출한다.
const {address: {city}} = user;
console.log(city); // 'Seoul'