36. 디스트럭처링 할당

• 디스트럭처링 할당 (destructuring assignment, 구조 분해 할당)
• 구조화된 배열과 같은 이터러블 또는 객체를 비구조화(구조 파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것
• 이터러블 또는 객체에서 필요한 값만 추출하는 경우 유용

36.1. 배열 디스트럭처링 할당

• ES6 배열 디스트럭처링 할당
• 배열의 각 요소를 추출하여 1개 이상의 변수에 할당
• 할당의 대상은 이터러블이어야 함 -> 아닌 경우 에러 발생
• 할당 기준은 배열의 인덱스, 순차적으로 할당됨
• 할당받을 변수를 배열 리터럴 형태로 선언
  • 변수 선언과 할당을 분리할 수도 있지만 권장하지 않음
• 기본값 설정 가능
  • 기본값보다 할당된 값이 우선권
• 변수에 Rest 요소 (...) 사용 가능
  • Rest 파라미터와 같이 마지막에 위치해야 함
  • 남은 값들을 배열로 저장함

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

36.2. 객체 디스트럭처링 할당

• ES6 객체 디스트럭처링 할당
• 각 프로퍼티를 객체로부터 추출하여 변수에 할당
• 할당의 대상은 객체여야 함 -> 아닌 경우 에러 발생
• 할당의 기준은 프로퍼티 키, 순서 무관
• 할당받을 변수를 객체 리터럴 형태로 선언해야 함
• 프로퍼티 키와 다른 변수 이름으로도 할당 가능
• 기본값 설정 가능

const user = { firstName: 'Ungmo', lastName: 'Lee' };
const { lastName: ln = 'Park', firstName: fn } = user;
console.log(fn, ln); // Ungmo Lee

• 객체를 인수로 전달받는 함수의 매개변수에도 사용 가능

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

function printTodo2({ content, completed }) {
  console.log(`할일 ${content}은 ${completed ? '완료' : '비완료'} 상태입니다.`);
}
printTodo2({ id: 1, content: 'HTML', completed: false }); // 할일 HTML 비완료 상태입니다.

• 배열의 요소가 객체인 경우 배열과 객체 디스트럭처링 할당 혼용 가능

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

const [, { id }] = todos;
console.log(id); // 2

• 중첩 객체에도 사용 가능
• Rest 프로퍼티 (...) 사용 가능
  
  

[출처] 모던 자바스크립트, Deep Dive