모던 자바스크립트 Deep Dive / 36장 디스트럭처링 할당

디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를

destructuring(비구조화, 구조 파괴)하여 1개 이상의 변수에 개별적으로

할당하는 것을 말한다.

 

배열 디스트럭처링 할당

배열 구조 분해 할당은 할당의 대상(우변)이 이터러블이어야 하며,

할당 기준은 배열의 인덱스다.

const arr = [1, 2, 3];
const [one, two, three] = arr;

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

const [x, y] = [1, 2];

console.log(x, y); // 1 2

 

배열 구조 분해 할당은 순서대로 할당되는데, 이때 변수의 개수와

이터러블의 요소 개수가 반드시 일치할 필요는 없다.

 

배열과 같은 이터러블에서 필요한 요소만 추출하여 변수에 할당하고 싶을 때

유용하며 Rest 파라미터와 유사하게 Rest 요소를 사용할 수 있다.

const [x, ...y] = [1, 2, 3];

console.log(x, y); // 1 [2, 3]

 

객체 디스트럭처링 할당

객체 구조 분해 할당은 할당의 대상(우변)이 객체여야 하며 할당 기준은 프로퍼티 키다.

할당받을 변수는 객체 리터럴 형태로 선언해야 한다.

 

객체에서 프로퍼티 키로 필요한 값만 추출하여 변수에 할당하고 싶을 때 유용하다.

const obj = {
  name: "Lee",
  age: 20,
  gender: "male",
};

const { name, gender } = obj;

console.log(name, gender); // Lee male

 

객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있다.

function printTodo({ content, complete }) {
  console.log(`할일 ${content}은 ${complete ? "완료" : "비완료"} 입니다.`);
}

printTodo({ id: 1, content: "study", complete: "true" });

 

배열의 요소가 객체인 경우 배열/객체 구조 분해 할당을 혼용할 수 있다.

const todos = [
  { id: 1, content: "html", complete: false },
  { id: 2, content: "css", complete: false },
  { id: 3, content: "javascript", complete: false },
];

const [, , { id }] = todos;

console.log(id); // 3

 

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

const user = {
  name: "Lee",
  address: {
    zipCode: "1234",
    city: "Seoul",
  },
};

const {
  address: { city },
} = user;

console.log(city); // Seoul

 

 

Rest 파라미터와 유사하게 Rest 프로퍼티 ... 을 사용할 수 있다.

const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y: 2, z: 3 }