구조 분해 할당

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

배열

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

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

 

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

값이 없는 변수는 undefined가 된다.

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

 

객체

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

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