[Javascript]구조분해할당(Destructuring)

개요

구조 분해 할당(Destructuring)은 배열이나 객체에서 값을 가지고 와서 개별적인 변수에 할당할 수 있는 표현식입니다.
또한 구조 분해 할당을 사용함으로써 배열이나 객체에서 필요한 값만 가지고 올 수 있습니다.

배열 구조 분해

기존의 ES5에서는 배열의 값을 변수에 할당하기 위한 방법은 다음과 같습니다.

val arry = [1, 2, 3];

val a = arry[0];
val b = arry[1];
val c = arry[2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

그러나 ES6에서는 배열의 구조 분해 할당을 이용하여 각각의 변수에 값을 할당할 수 있으며, 변수에 값을 할당하는 기준은 배열의 Index 기준으로 할당되어 집니다.

const arry = [1, 2, 3];

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

변수를 선언할 때 초기값을 할당하지 않아도 구조 분해 할당을 이용하여 값을 할당할 수 있습니다.

let a, b;

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

구조 분해 할당을 이용하여 값을 할당할 때, 값이 undefined인 경우 기본값을 할당할 수 있습니다.

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

Spread 문법을 사용하여 값을 할당할 수 있습니다.

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

객체 구조 분해

ES5에서는 배열의 값을 변수에 할당하기 위한 방법은 다음과 같습니다.

val obj = { firstName: 'DongHee', lastName: 'HAN' };
val firstName = obj.firstName;
val lastName = obj.lastName;
console.log(firstName); // 'DongHee'
console.log(lastName);  // 'HAN'

그러나 ES6에서는 객체에서 각각의 변수에 값을 할당하는 기준은 프로퍼티 키를 기준으로 할당됩니다.

const obj = { firstName: 'DongHee', lastName: 'HAN' };
const { firstName, lastName } = obj;
console.log(firstName); // 'DongHee'
console.log(lastName);  // 'HAN'

객체의 프로퍼티 키 명이 아닌 다른 이름의 변수에 할당하기 위한 방법은 아래와 같습니다.

const obj = { firstName: 'DongHee', lastName: 'HAN' };
const { firstName: fName, lastName: lName } = obj;
console.log(fName); // 'DongHee'
console.log(lName);  // 'HAN'

구조 분해 할당을 이용하여 값을 할당할 때, 값이 undefined인 경우 기본값을 할당할 수 있습니다.

const obj = { firstName: 'DongHee', lastName: 'HAN' };
const { firstName, middleName = 'Middels' ,lastName } = obj;
console.log(firstName); // 'DongHee'
console.log(middleName); // 'Middels'
console.log(lastName);  // 'HAN'

Spread 문법을 사용하여 값을 할당할 수 있습니다.

const obj = { a: 1, b: 2, c: 3};
const { a, ...etc } = obj;
console.log(a); // 1
console.log(etc); // { b: 2, c: 3 };

const { color, zIndex, ...otherProps } = this.props;

render() {
    <SampleComponent style={{ color, zIndex }} ...otherProps />
}

참고자료

(MDN Web Docs: 구조 분해 할당)[https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment]