36장 디스트럭처링 할당

• 디스트럭처링 할당 : 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당 하는 것
• 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

36.1 배열 디스트럭처링 할당

• 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당한다.
• 배열 디스트럭처링 할당 받을 변수를 선언할때 배열 리터럴 형태로 선언한다.
• 이때 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다. 즉, 순서대로 할당된다.
• 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없다.
• 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다.

// ES5
var arr = [1, 2, 3];
var one = arr[0];
var two = arr[1];
var three = arr[2];

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

// ES6
const arr = [1, 2, 3];
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3

// 개수 일치 x
const [e, f] = [1, 2, 3];
console.log(e, f); // 1 2

// 기본값 설정
const [e, f = 10, g = 3] = [1, 2];
console.log(e, f, g); // 1 2 3

36.2 객체 디스트럭처링 할당

• 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당한다.
• 이때 객체 디스트럭처링 할당의 대상(할당문의 우변)은 객체이어야 하며, 할당 기준은 프로퍼티 키다. 순서는 의미가 없으며, 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.
• 객체 디스트럭처링 할당 받을 변수를 선언할때 객체 리터럴 형태로 선언한다.
• 이때 우변에 객체 또는 객체로 평가될 수 있는 표현식을 할당하지 않으면 에러가 발생한다.
• 객체 디스트럭처링 할당을 위한 변수에 기본값을 설정 할 수 있다.

// ES5
var user = { firstName: 'Ungmo', lastName: 'Lee' };
var firstName = user.firstName;
var lastName = user.lastName;
console.log(firstName, lastName); // Ungmo Lee

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

// 기본값 설정
const { firstName = 'Ungmo', lastName } = { lastName: 'Lee' };
console.log(firstName, lastname); // Ungmo Lee

• 만약 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언해야 한다.

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

• 객체 디스트럭처링 할당은 객체에서 프로퍼티 키로 필요한 프로퍼티 값만 추출하여 변수에 할당하고 싶을때 유용하다.
• 객체를 인수로 전달받는 함수의 매개변수에도 사용할 수 있다.

const todo = { id: 1, content: 'HTML', completed: true };
const { id } = todo;
console.log(id); // 1

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

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

// 배열 디스트럭처링 할당 + 객체 디스트럭처링 할당
const todos = [
    { id: 1, content: 'HTML', completed: true },
    { id: 2, content: 'CSS', completed: false },
    { id: 3, content: 'JS', completed: false }
];

const [, { id }] = todos; // 두번째 요소인 객체로부터 id 프로퍼티만 추출
console.log(id); // 2

// 중첩 객체의 경우
const user = {
    name: 'Lee',
    address: {
        zipCode: '03068',
        city: 'Seoul'
    }
};

const { address: { city } } = user;
console.log(city); // Seoul

// Rest 프로퍼티를 변수에 사용할 경우
const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y: 2, z: 3 }