구조 분해 할당은 매번 인덱스를 통해 배열의 요소에 접근하는 것이 아니라 할당된 변수를 통해 간단하게 배열의 요소를 불러올 수 있습니다.

1. 구조분해할당이 뭐죠?

• 구조분해할당 이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식입니다.

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

• 객체 및 배열 리터럴 표현식을 사용하면 즉석에서 쉽게 데이터 뭉치를 만들 수 있습니다.

let arr = [1,2,3,4,5]

• 구조 분해 할당의 구문은 위와 비슷하지만, 할당문의 좌변에서 사용하며, 원래 변수에서 어떤 값을 분해해 할당할 지 정의 합니다.

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

2. 배열 구조 분해

2-1. 기본 변수 할당

let foo = ["one", "two", "three"];

let [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

2-2. 선언에서 분리한 할당

• 변수의 선언이 분리되어도 구조 분해를 통해 값을 할당할 수 있습니다.

let a, b;

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

2-3. 기본 값

• 변수에 기본값을 할당하면, 분해한 값이 undefined일 때 그 값을 대신 사용합니다.

let a, b;

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

2-4. 변수 값 교환하기

• 하나의 구조 분해 표현식만으로도 두 변수의 값을 교환활 수 있습니다. 구조 분해 할당 없이 두 값을 교환하려면 임시 변수가 필요합니다.

let a = 1;
let b = 3;

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

2-5. 변수에 배열의 나머지를 할당하기

• 배열을 구조 분해 할경우, 나머지 구문을 이용해 분해하고 남은 부분을 하나의 변수에 할당할 수 있습니다.

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

나머지 요소의 오른쪽 뒤에 쉼표가 있으면 syntaxError가 발생합니다.

let [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

3. 객체 구조 분해

3-1. 기본 할당

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

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

3-2. 새로운 변수 이름으로 할당하기

• 객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있습니다.

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

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

3-3. 기본값

• 객체로부터 해체된 값이 undefined 인 경우, 변수에 기본값을 할당할 수 있습니다.

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

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

3-4. 기본값을 갖는 새로운 이름의 변수에 할당하기

• 새로운 변수명 할당과 기본값 할당을 한번에 할 수 있습니다.

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

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