36장 디스트럭처링 할당

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

배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조분해)하여 1개 이상의 변수에 개별적으로 할당하는 것. 필요한 값만 추출하여 변수에 할당할 때 유용하다.

36.1 배열 디스트럭처링 할당

const arr = [1,2,3]

// ES6 배열 디스트럭처링 할당
// 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다.
// 이때 할당 기준은 배열의 인덱스다.
const [one, two, three] = arr
console.log(one, two, three) // 1 2 3

배열 디스트럭처링 할당을 위해서는 할당 연산자 왼쪽에 배열 형태의 변수를 선언해야 한다. 이때 변수를 배열 리터럴 형태로 선언한다.

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

우변에 이터러블을 할당하지 않으면 에러가 발생한다.

또한 변수에 기본값을 설정해 줄 수 있으나 할당되는 값이 우선순위가 높다는 것을 기억해야 한다.

const arr = [1, 2];

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

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

Rest 파라미터 또한 구조분해에서 사용할 수 있다.

const arr = [1, 2, 3];

const [one, ...other] = arr;

console.log(one); // 1
console.log(other); // [2, 3]

36.2 객체 디스트럭처링 할당

객체를 구조분해하기 위해서는 변수명을 객체에서 사용하고 있는 프로퍼티키로 사용해야 한다. 즉 할당의 기준이 배열과 같이 인덱스가 아니라 프로퍼티 키. 또한 배열과 다르게 할당하고자 하는 변수들을 중괄호({})로 묶어줘야 한다.

const name = {
  firstName: 'bs',
  lastName: 'choi'
}

const {lastName, firstName} = name;

console.log(firstName); // bs
console.log(lastName); // choi

또한 다른 변수 이름으로 할당받을 수도 있다.

const name = {
  firstName: 'bs',
  lastName: 'Choi'
}

const {lastName: two, firstName: one} = name;

console.log(one); // bs
console.log(two); // Choi

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

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

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