구조 분해 할당이란?

배열이나 객체의 요소 및 프로퍼티들을 분해해 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식

예제

배열

배열의 구조분해는 index를 이용해 index의 순서대로 변수의 값을 할당한다.

let colors = ["green", "blue", "purple"];

let [c1, c2, c3] = colors;

console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple

선언 분리 할당

변수의 선언을 분리해서 배열의 값을 할당하는 방법

let c1, c2, c3;

[c1, c2, c3] = ["green", "blue", "purple"];

console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple

배열의 길이보다 더 적은 수의 변수에 값을 할당했을 때

let c1, c2;

[c1, c2] = ["green", "blue", "purple"];

console.log(c1); // green
console.log(c2); // blue

배열의 길이보다 더 많은 수의 변수에 값을 할당했을 때

let c1, c2, c3, c4;

[c1, c2, c3, c4] = ["green", "blue", "purple"];

console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple
console.log(c4); // undefined

let c1, c2, c3, c4;

[c1, c2, c3, c4 = "yellow"] = ["green", "blue", "purple"];

console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple
console.log(c4); // yellow

두 개의 변수값을 서로 바꾸기

let a = 10;
let b = 5;

[a, b] = [b, a];

console.log(a, b); // 5 10

객체

객체의 구조분해는 key값을 기준으로 객체를 분해해 변수에 할당한다.

let colors = {
  c1: "green",
  c2: "blue",
  c3: "purple",
};

let {c1, c2, c3} = colors;

console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple

let colors = {
  c1: "green",
  c2: "blue",
  c3: "purple",
};

let {c1: color1, c2: color2, c3: color3} = colors;

console.log(color1); // green
console.log(color2); // blue
console.log(color3); // purple

배열의 길이보다 더 많은 수의 변수에 값을 할당했을 때

let colors = {
  c1: "green",
  c2: "blue",
  c3: "purple",
};

let {c1, c2, c3, c4} = colors;

console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple
console.log(c4); // undefined

let colors = {
  c1: "green",
  c2: "blue",
  c3: "purple",
};

let {c1, c2, c3, c4 = "yellow"} = colors;

console.log(c1); // green
console.log(c2); // blue
console.log(c3); // purple
console.log(c4); // yellow