[JS] 모던 Javascript Deep Dive 36장 - 디스트럭처링 할당

디스트럭처링 할당은 우리말로 하면 구조 분해 할당이다.

디스트럭처링 할당은 이터러블이나 객체를 파괴하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

[01] 배열 디스트럭처링 할당

const arr = [1, 2, 3];

const [one, two, three] = arr;

console.log(one, two, three); // 1 2 3

const [a, b] = [1, 2, 3]
console.log(a, b); // 1 2

좌변에는 [one, two, three] 처럼 할당받을 변수를 배열 리터럴로 선언해야한다.

우변은 이터러블이어야 하고 변수에 이터러블 인덱스 순서대로 할당된다.

배열 디스트럭처링 할당에서 할당기준은 배열의 인덱스이다.

⚠ 변수의 개수와 이터러블의 요소 개수가 반드시 일치하지 않아도 알아서 할당된다.

그렇다면 이 배열 디스트럭처링 할당이 어떤 상황에서 유용할까?

배열에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때 유용하다고 한다.

const today = new Date(); 
const formattedDate = today.toISOString().substring(0, 10); // "2022-10-14"
const [year, month, day] = formattedDate.split('-');
console.log([year, month, day]); // [ '2019', '05', '21' ]

[02] 객체 디스트럭처링 할당

🎯 문법

const user = { firstName: "Minhye", lastName: "Kang" };

const { lastName, firstName } = user;
console.log(firstName, lastName); // Minhye Kang

좌변에는 객체의 프로퍼티키를 변수 선언해주고, 우변에는 객체를 할당해주면

일치하는 프로퍼티의 값이 변수에 할당된다.

🔍 새로운 변수 이름으로 할당

const user = { firstName: "Minhye", lastName: "Kang" };

const {lastName: ln, firstName: fn} = user;
console.log(ln, fn); // Minhye Kang

만약 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받게 하고 싶다면 기존 프로퍼티 키와 다른 이름을 : 뒤에 입력해주면 된다.

🔍 중첩 객체의 디스트럭처링 할당

const person = {
  name: 'kang',
  address: {
    zipCode: '03068',
    city: 'Incheon'
  }
};

const { address: { city } } = person;
console.log(city); // 'Incheon'

중첩 객체의 경우 : 앞에는 중첩객체 이름을, 뒤에는 중첩 객체의 프로퍼티 키를 선언해주면 된다.

🔍 프로퍼티 키로 필요한 프로퍼티 값 추출하기

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

// todos 배열의 요소인 객체로부터 completed 프로퍼티만을 추출한다.
const completedTodos = todos.filter(({ completed }) => completed);
console.log(completedTodos); // [ { id: 1, content: 'HTML', completed: true } ]