ES2015 비구조화 할당 (Destructuring Assignment)


비구조화 할당 혹은 구조분해 할당을 이용하면 손쉽게 배열, 객체에서 데이터를 추출하여 변수에 할당할 수 있습니다.

ES5

기존의 JavaScript에서 객체의 값을 각각 할당하려면 아래와 같이 합니다.

var myObj = { a: 1, b: 2 };
var a = myObj.a;
var b = myObj.b;

객체 비구조화 할당

이때 ES6의 비구조화 할당 형식으로 표현하면 훨씬 손쉽게 표현할 수 있습니다.

let { a, b } =  = { a: 1, b: 2 };

// 아래와 같이 객체에 존재하지 않는 키를 불러올 경우에는 undefined가 할당됩니다.
let { a, b, c } =  = { a: 1, b: 2 };
// c: undefined

비구조화 할당은 모듈을 import 할 때 사용되는 것을 많이 볼 수 있습니다. 아래 예는 react에서 컴포넌트 클래스를 불러올 때 비구조화 할당을 사용하는 예시입니다.

import React, { Component } from "react";

배열 비구조화 할당

배열에서도 마찬가지 방법으로 사용할 수 있습니다.

var list = [1, 2, 3];
var [a, , b] = list;

아래와 같이 구조분해 할당을 응용하면 각 변수의 값을 손쉽게 바꿀 수 있습니다.

[b, a] = [a, b];

배열에서는 또한 Spread 연산자를 사용할 수도 있습니다.

// 확산 연산자
const arr = [1, 2, 3, 4, 5];
let [x, y, ...rest] = arr;
// x: 1, y: 2: rest: [3,4,5]

이렇게 확산 연산자를 사용해서 손쉽게 배열에서 필요한 값을 뽑아낼 수 있습니다.