구조분해할당

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

1. 배열 구조 분해

let x = [1, 2, 3, 4, 5];

let [y, z] = x;

console.log(y); 
// 1
console.log(z); 
// 2

변수 배열에 나머지를 할당

let 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(rest);
// [30, 40, 50]

선언에서 분리한 할당

구조 분해를 통해 변수의 선언과 분리하여 변수에 값을 할당할 수 있다.

let 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

2. 객체 구조 분해

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

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

선언 없는 할당

구조 분해를 통해 변수의 선언과 분리하여 변수에 값을 할당 수 있음.

ex)

var a, b;

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

새로운 변수 이름으로 할당

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

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

기본값 할당

let { a = 10, b = 5 } = { a: 3 };

console.log(a); 
// 3
console.log(b); 
// 5

새로운 변수명 할당과 기본값 할당을 한번에 가능

let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); 
// 3
console.log(bb); 
// 5