JavaScript의 구조 분해

구조 분해 할당이란?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JS의 표현식

ex)

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

// Stage 4(finished) proposal
({ a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 });
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

구조 분해 할당은 Perl이나 Python 같은 다른 언어도 가지고 있는 기능이다.

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

나머지 연산자를 사용하지 않으면 값을 앞에서 부터 가져온다.

선언부에서 값 할당을 분리해도 구조 분해가 가능하다.

var a, b;

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

기본값을 할당할 경우 분해한 값이 undefined일 때 기본값을 사용한다.

var a, b;

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

분해할당 활용처

원래 값을 교환하려면 임시 변수가 필요하다
하지만 분해할당을 사용하면 임시 변수 없이 두 변수의 값을 교환할 수 있다.

var a = 1;
var b = 3;

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

변수에 배열의 나머지 값 할당하기

...(나머지 구문)를 사용하면 구문을 분해하고
남은 부분을 하나의 변수에 할당할 수 있음.

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

이 때 나머지 구문은 항상 마지막에 와야함.
아닐 경우 syntaxError가 발생함

객체 구조 분해

var o = { p: 42, q: true };
var { p, q } = o;

console.log(p); // 42
console.log(q); // true

var o = { p: 42, q: true , f: false, k:30};
var { p: foo, q: bar, ...g } = o;

console.log(foo); // 42
console.log(bar); // true
console.log(g); // { f: false, k: 30 }

객체 구조 분해도 선언과 할당을 분리할 수 있다.

var a, b;

({ a, b } = { a: 1, b: 2 });

새로운 변수 이름으로 할당하기

기존에 할당된 이름 대신 새로운 변수명을 할당시킬 수 있다.

var o = { p: 42, q: true };
var { p: foo, q: bar } = o;

console.log(foo); // 42
console.log(bar); // true