[JS] 구조 분해 할당

1. 구조 분해 할당 개요

1.1 구조 분해 할당 개념

구조분해할당(destructuring) 이란

① 배열[]이나 객체{}의 속성(값, 프로퍼티)을 분해해서 그 값을 변수에 할당할 수 있게 해주는 문법이다.

② 객체나 배열을 변수로 분해하여 객체나 배열에 저장된 데이터 일부를 사용하기 위해 사용한다.

⚠️ this를 사용할 때엔 구조 분해 할당을 사용하면 안된다.

2. 구조 분해 할당 사용하기

2.1 배열 분해하기

이 배열에서 첫 번째 요소와 두 번째 요소를 각각 변수 a와 b에 할당하려면 기존 방식으로는 다음과 같이 작성해야 한다.

const numbers = [1, 2, 3];
const a = numbers[0];
const b = numbers[1];

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

하지만 구조 분해 할당을 사용하면 다음과 같이 간단히 작성할 수 있다.

numbers에 담긴 1, 2, 3이 분해되어 각각 a, b에 저장되었다.

const numbers = [1, 2, 3];
const [a, b] = numbers;

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

배열 [“Julias”, 20]이 분해되어 각각 name과 age에 저장되었다.

const [name, age] = ["sieun", 22];

console.log(name); // sieun
console.log(age); // 22

아래와 같이 값이 없는 경우 초기값을 설정해 줄 수 있다.

let arr = ["value1", "value2", "value3"];
let [a, b, c, d = 4] = arr;

console.log(a); // value1
console.log(b); // value2
console.log(c); // value3
console.log(d); // 4

2.2 객체 분해하기

객체에서 name 속성과 age 속성을 각각 변수 name과 age에 할당하려면 다음과 같이 작성할 수 있다.

const person = {
  name: "sieun",
  age: 22,
};

const { name, age } = person; // 구조 분해 할당
console.log(name, age); // sieun 22

새로운 이름으로 할당할 수 있다.

const person = {
  name: "sieun",
  age: 22,
};

let { name: newName, age: newAge } = person;

newName = "kori";
newAge = 8;

console.log(newName, newAge); // "kori", 8

같이 값이 없는 경우, 초기값을 설정해 줄 수 있다.

let user = {
  name: "sieun",
  age: 22,
};

let { name, age, birthDay = "today" } = user;
console.log(birthDay); // today

.entries() 메서드와 구조 분해를 조합하면 객체의 키와 값을 변수로 분해 할당할 수 있다.

let user = {
  name: "sieun",
  age: 22,
};

// 객체의 키와 값 순회하기
for (let [key, value] of Object.entries(user)) {
  console.log(`${key}:${value}`); // name:sieun, age:22이 차례대로 출력
}

3. 참조

• mozilla 구조 분해 할당
• info 구조 분해 할당