Modern JS
Basic
Destructuring Assignment

디스트럭처링 할당

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

배열 할당

ES5 에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법은 다음과 같다.

var arr = [1, 2, 3];
 
var one = arr[0];
var two = arr[1];
var three = arr[2];
  • 변수 선언은 배열 리터럴 형태로 선언한다. const [x, y] = [1, 2]
  • 배열 디스트럭처링 할당의 기준은 배열이 인덱스이다.
  • 배열 디스트럭처링 할당의 변수 선언문은 선언과 할당을 분리 할 수도 있다. let x, y; [x, y] = [1, 2]
  • 우변에 이터러블을 할당하지 않으면 에러다. const [x, y]
  • 변수의 개수와 이터러블의 요소 개수가 반드시 일치 할 필요는 없다. const [x, , z] = [1, 2, 3];
  • 배열 디스트럭처링 할당의 변수에 Rest 요소를 사용할 수 있다. const [x, ...y] = [1, 2, 3]

객체 할당

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

var user = { firstName: 'Im', lastName: 'Hyuk' };
 
var firstName = user.firstName;
var lastName = user.lastName;
  • 변수 선언은 객체 리터럴 형태로 선언한다.
  • 객체 디스트러거링 할당의 대상은 객체이어야 하며 할당 기준은 프로퍼티 키다.
    const { lastName, firstName } = user;
  • 우변에 객체 또는 객체로 평가 될 수 있는 표현식을 할당하지 않으면 에러다.
  • 객체의 프로퍼티 키와 다른 변수 이름으로 프로퍼티 값을 할당 받을 수 있다.
    const { lastName: ln, firstName: fn } = user;
  • 기본값 설정도 가능하다.

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

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

객체 디스트럭처링 할당을 위한 변수에 Rest 프로퍼티 ... 을 사용할 수 있다.

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