구조 분해 할당 (Destructuring Assignment)

구조 분해 할당은 배열이나 객체의 값을 간단한 문법으로 개별 변수에 추출하여 할당할 수 있는 자바스크립트 문법이다. 이 문법을 사용하면, 값을 꺼내기 위해 반복적으로 접근하지 않아도 되어 코드를 더 간결하고 가독성 있게 작성할 수 있다.

• 배열의 구조 분해 할당은 인덱스 순서를 기준으로 값을 변수에 할당한다.
• 객체의 구조 분해 할당은 key(속성 이름)를 기준으로 값을 변수에 할당한다.

구조 분해 할당
├── 배열의 구조 분해 할당
│   ├── 선언 분리 구조 분해 할당
│   ├── 배열 요소 일부만 구조 분해 할당
│   ├── 기본값 설정
│   └── 변수의 값 교환하기
└── 객체의 구조 분해 할당
    ├── 새로운 변수 이름으로 할당하기
    └── 기본값 설정

배열의 구조 분해 할당

// 일반적인 형태
let colors = ["green", "blue", "purple"];

let c1 = colors[0];
let c2 = colors[1];
let c3 = colors[2];

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

// 배열의 구조 분해 할당
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

• 배열의 요소가 3개이지만, 변수는 2개만 선언된 경우 앞에서부터 순서대로 두 개의 값만 분해되어 변수에 할당된다. 나머지 값(여기서는 "purple")은 무시된다.

기본값 설정

// 배열의 길이보다 많은 변수의 배열 요소 할당
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

• 배열 구조 분해 할당에서 변수의 수가 배열의 길이보다 많을 경우, 남는 변수에는 자동으로 undefined가 할당된다.
• 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"

• 변수에 기본값(yellow)을 설정했기 때문에, 배열에 네 번째 요소가 없더라도 undefined 대신 기본값("yellow")이 출력된다.
• 기본값은 할당 대상 값이 undefined일 때만 적용된다.

변수의 값 교환하기

// 기존 방식
let a = 10;
let b = 5;

let temp = a; // 임시변수 temp
a = b;
b = temp;

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

// 구조 분해 할당 사용
let a = 10;
let b = 5;

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

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

• 구조 분해 할당은 배열의 값을 변수에 추출할 때 자주 사용하지만, 두 변수 값을 교환할 때도 사용된다.
• [값을 할당할 변수] = [교환할 값의 변수] 형태로 작성한다.
• 자바스크립트는 평가 순서에 따라 오른쪽의 [b, a]를 먼저 평가하여 [5, 10] 배열을 생성한 뒤, 그 결과를 왼쪽 [a, b]에 각각 할당한다.
• 이 방식은 임시 변수 없이도 값 교환이 가능하다는 장점이 있다.

객체의 구조 분해 할당

// 일반적인 형태
let colors = {
  c1: "green",
  c2: "blue",
  c3: "purple",
};

let c1 = colors.c1;
let c2 = colors.c2;
let c3 = colors.c3;

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

// 구조 분해 할당
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 color1 = colors.c1;
let color2 = colors.c2;
let color3 = colors.c3;

console.log(color1); // green
console.log(color2); // blue
console.log(color3); // 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

• 구조 분해 할당에서는 객체의 key 이름을 그대로 변수 이름으로 사용하는 것이 기본이지만, 필요한 경우 다른 변수명으로 할당할 수도 있다.
• 객체의 key : 원하는 변수 이름 형태로 작성한다.
• c1: color1은 colors.c1 값을 color1 변수에 할당한다는 의미이다.

기본값 설정

// 객체 구조 분해: 기본값 없이
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

• 객체 구조 분해 할당 시, 존재하지 않는 프로퍼티에 접근하면 해당 변수는 undefined가 된다.
• 이 경우 기본값을 설정해 두면 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

• 위 예제에서는 colors 객체에 c4가 없기 때문에, c4에는 기본값 "yellow"가 할당된다.