객체와 배열은 자바스크립트에서 가장 많이 쓰이는 자료구조다.

키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 때는 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용한다. 개발을 하다 보면 함수에 객체나 배열을 전달해야 하는 경우가 생기곤 하는데, 가끔은 객체나 배열에 저장된 데이터 전체가 아니라 일부만 필요한 경우가 생기기도 한다.

이럴 때 객체나 배열을 변수로 분해할 수 있게 해 주는 특별한 문법인 구조 분해 할당을 사용할 수 있다. 이외에도 함수의 매개변수가 많거나, 매개변수 기본값이 필요한 경우 등에서 구조 분해를 이용한다.

배열 분해

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

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

// 혹은 let [firstName, surname] = "Bora Lee".split(' '); 도 사용가능

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

쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수도 있다.

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

alert( title ); // Consul

할당 연산자 좌측에는 할당할 수 있는 것이라면 어떤 것이든 올 수 있다. 아래와 같이 객체의 프로퍼티 값도 가능하다.

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

alert(user.name); // Bora

Object.entries(obj) - 객체의 키, 값을 쌍으로 담아 배열로 묶어주는 메서드

와 함께 구조 분해를 조합하면 객체의 키와 값을 순회해 변수로 분해 할당할 수 있다.

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

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

두 변수에 저장된 값을 교환할 때에도 구조 분해 할당을 사용할 수 있다.

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

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

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

객체 분해하기