구조 분해 할당

Destructuring assignment(구조분해할당)

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

알다시피 객체 및 배열 리터럴 표현식을 사용하면 new Array, new Object 같은 구문 없이 배열, 객체를 만들 수 있다.
구조분해 할당은 이와 비슷하지만 할당문의 좌변에 사용해서 원래 변수에서 어떤 값을 분해해 할당할지 정한다.

ar 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}

//새로운 변수 이름으로 할당 할 수 있다.
var o = { p: 42, q: true };
var { p: foo, q: bar } = o;

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

//객체로 부터 해체된 값이 undefined인 경우 사용할 기본 값 할당
var { a = 10, b = 5 } = { a: 3 }; // b에 5를 기본 값으로 할당
//우측 객체에 b가 없으므로 undefined, b는 기본 값인 5를 log한다.

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

참고자료
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment