36. 디스트럭처링 할당

디스트럭처링 할당 (구조 분해 할당)

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

---

배열 디스트럭처링 할당

ES5에서 구조화된 배열을 디스트럭처링하여 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의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당함

이때 배열 디스트럭처링 할당의 대상은 이터러블이어야 하며 할당 기준은 배열의 인덱스임 (순서대로 할당)

// ES6
const arr = [1, 2, 3];

// 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당함
const [one, two, three] = arr;
console.log(one, two, three); // 1 2 3

 

배열 디스트럭철이 할당을 위해서는 할당 연산자 왼쪽에 값을 할당받을 변수를 선언해야 함

이때 변수를 배열 리터럴 형태로 선언함

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

 

배열 디스트럭처링 할당의 기준은 배열의 인덱스임 (순서대로)

이때 변수의 개수와 이터러블의 요소 개수가 반드시 일치할 필요는 없음

const [a, b] = [1, 2];
console.log(a, b); // 1 2

const [c, d] = [1];
console.log(c, d); // 1 undefined

const [e, f] = [1, 2, 3];
console.log(e, f); // 1 2

const [g, , h] = [1, 2, 3];
console.log(g, h); // 1 3

 

배열 디스트럭처링 할당을 위한 변수에 기본값 설정 가능

기본값보다 할당된 값이 우선함

// 기본값
const [a, b, c = 3] = [1, 2];
console.log(a, b, c); // 1 2 3

// 기본값보다 할당된 값이 우선함
const [e, f = 10, g = 3] = [1, 2];
console.log(e, f, g); // 1 2 3

 

배열 디스트럭처링 할당을 위한 변수에 Rest 파라미터와 유사하게 Rest 요소를 사용할 수 있음

Rest 요소는 Rest 파라미터와 동일하게 마지막에 위치해야 함

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

---

객체 디스트럭처링 할당

ES5에서 객체의 각 프로퍼티를 객체로부터 디스트럭처링하여 변수에 할당하기 위해서는

프로퍼티 키를 사용해야 함

// ES5
var user = { firstName: 'Ungmo', lastName: 'Lee' };

var firstName = user.firstName;
var lastName = user.lastName;

console.log(firstName, lastName); // Ungmo Lee

 

ES6의 객체 디스트럭처링 할당은 객체의 각 프로퍼티를 객체로부터 추출하여 1개 이상의 변수에 할당함

이때 객체 디스트럭처링 할당의 대상은 객체여야 하며, 할당 기준은 프로퍼티 키임

순서는 의미가 없으며 선언된 변수 이름과 프로퍼티 키가 일치하면 할당됨

// ES6
const user = { firstName: 'Ungmo', lastName: 'Lee' };

// 변수 lastName, firstName을 선안하고 user 객체를 디스트럭처링하여 할당함
const { lastName, firstName } = user;
console.log(firstName, lastName); // Ungmo Lee

 

객체 리터럴 형태로 선언한 변수 lastName, firstName은 프로퍼티 축약 표현으로 선언한 것임

const { lastName, firstName } = user;
// 위 아래 동일
const { lastName: lastName, firstName: firstName } = user;

 

객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당받으려면 다음과 같이 변수를 선언함

const user = { firstName: 'Ungmo', lastName: 'Lee' };

// 프로퍼티 키를 기준으로 디스트럭처링 할당이 이루어짐
// 프로퍼티 키가 lastName인 프로퍼티 값을 ln에 할당함
// 프로퍼티 키가 firstName인 프로퍼티 값을 fn에 할당함
const { lastName: ln, firstName: fn } = user;

console.log(fn, ln); // Ungmo Lee

 

객체 디스트럭처링 할당을 위한 변수에 기본값 설정 가능

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

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

 

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

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 }
];

// 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'

 

객체 디스트럭처링 할당을 위한 변수에 Rest 파라미터나 Rest 요소와 유사하게

Rest 프로퍼티 사용 가능

Rest 프로퍼티는 Rest 파라미터/요소와 동일하게 마지막에 위치해야 함

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