[JavaScript] 배열과 객체의 구조 분해 할당 [배열이나 객체의 요소를 분해하여 각각의 변수에 할당]

---

- 배열과 객체 구조 분해 할당

구조 분해 할당 : 배열이나 객체를 분해해서 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식

---

1. 배열의 구조 분해 할당

1) 기본 변수 할당

// 배열에 담긴 값
let colors = ["green", "blue", "purple"];

// 구조 분해 사용 X
let c1 = colors[0]; // "green"
let c2 = colors[1]; // "blue"
let c3 = colors[2]; // "purple"

// 구조 분해 사용 O
let [c1, c2, c3] = colors;

// 결과는 동일하다.
console.log(c1); // "green"
console.log(c2); // "blue"
console.log(c3); // "purple"

---

2) 선언 분리 할당

// colors라는 배열을 별도로 선언하지 않고, 이 변수들에 배열의 값을 바로 할당
let [c1, c2, c3] = ["green", "blue", "purple"];

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

// 변수가 배열의 길이보다 더 적은 경우, 각 변수들에 배열 요소의 순서대로 green과 blue의 값이 할당된다.
let [c1, c2] = ["green", "blue", "purple"];

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

// 변수가 배열의 길이보다 더 많은 경우, undefined가 할당된다.
let [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 = "yellow"] = ["green", "blue", "purple"];

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

---

3) 변수값 교환하기

// a와 b의 값을 서로 바꾸려 한다.
let a = 10;
let b = 5;

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

// 구조 분해 사용 X
let tmp;
tmp = a;
a = b;
b = tmp;

// 구조 분해 사용 O
[a, b] = [b, a];

// 결과는 동일하다.
console.log(a, b); // 5, 10

---

2. 객체의 구조 분해 할당

1) 기본 변수 할당

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

// 구조 분해 사용 X
let c1 = colors.c1;
let c2 = colors.c2;
let c3 = colors.c3;

// 구조 분해 사용 O
let { c1, c2, c3 } = colors;

// 결과는 동일하다.
console.log(c1);// "green"
console.log(c2);// "blue"
console.log(c3);// "purple"

---

2) 새로운 변수 이름으로 할당

// 프로퍼티 key 값과 다른 이름으로 변수를 할당하고 싶을 때
let colors = {
    c1: "green",
    c2: "blue",
    c3: "purple",
};

// 구조 분해 할당 X
let color1 = colors.c1;
let color2 = colors.c2;
let color3 = colors.c3;

// 구조 분해 할당 O
let { c1: color1, c2: color2, c3: color3 } = colors;

// 결과는 동일하다.
console.log(color1); //green
console.log(color2); //blue
console.log(color3); //purple

---

3) 변수 기본값 설정

// 프로퍼티의 개수보다 많은 변수를 할당할 수 있다.
let colors = {
    c1: "green",
    c2: "blue",
    c3: "purple",
};

// 프로퍼티의 수보다 많을 경우, undefined로 할당된다.
let { c1, c2, c3, c4 } = colors;

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

// 객체도 배열처럼 기본값 설정이 가능하다.
let { c1, c2, c3, c4 = "yellow" } = colors;

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

---

- 참고자료

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의

---