JavaScript - 구조분해할당

🔍 1. 구조분해 할당이란

객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요할 경우 객체나 배열을 분해할 수 있게 해주는 특별한 문법을 구조분해할당(destructuring assignment)이라 합니다.

✅ 2. 배열 디스트럭처링 할당

배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스입니다.

배열 분해 예시

// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]

// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;

alert(firstName); // Bora
alert(surname);  // Lee

배열 분해할당 특징

1 분해(destructuring)는 파괴(destructive)를 의미하지 않습니다. (복사후 변수로 분해지 분해대상을 수정또는 삭제하지 않습니다.)
2 쉼표를 사용하여 요소 무시하기

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

alert( title ); // Consul

3 할당 연산자 우측엔 모든 이터러블이 올 수 있습니다.

// 배열 뿐만 아니라 모든 이터러블(iterable, 반복가능 객체)에 구조 분해 할당을 적용할 수 있습니다.
let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

4 할당 연산자 좌측엔 할당할 수 있는(assignables)것이라면 어떤 것이든 올 수 있습니다.

let user = {};
[user.name, user.surname] = "Bora Lee".split(' ');

alert(user.name); // Bora

5 .entires()로 반복하기

let user = {
  name: "John",
  age: 30
};

// 객체의 키와 값 순회하기
for (let [key, value] of Object.entries(user)) {
  alert(`${key}:${value}`); // name:John, age:30이 차례대로 출력
}

6 변수 교환 트릭

let guest = "Jane";
let admin = "Pete";

// 변수 guest엔 Pete, 변수 admin엔 Jane이 저장되도록 값을 교환함
[guest, admin] = [admin, guest];

alert(`${guest} ${admin}`); // Pete Jane(값 교환이 성공적으로 이뤄졌습니다!)

✅ 2. 객체 디스트럭처링 할당

ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 1개 이상의 변수에 할당합니다. 이때 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체이어야 하며. 할당 기준은 프로퍼티 키입니다. 즉, 순서에 의미가 없으며 변수 이름과 프로퍼티 키가 일치하면 할당됩니다.

객체 분해할당 예시

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

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

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

//중첩 객체
const user = {
  name : 'Lee',
  address: {
    zipCode : '03068',
    city: 'Seoul'
  }
};
// address 프로퍼티 키로 객체를 추출하고 이 객체의 city 프로퍼티 키로 값을 추출
const {address: {city} } = user;
console.log(city); // Seoul