▶ 구조 분해 할당이란?

• 구조분해할당(destructuring)
  • 배열[]이나 객체{}의 속성(값, 프로퍼티)을 분해해서 그 값을 변수에 할당할(담을) 수 있게 해주는 문법이다.
  • 객체나 배열에 저장된 데이터 일부를 사용하기 위해 사용한다.

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

▶ 배열 분해하기

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

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

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

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

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

const [name, age] = ["sieun", 22];
console.log(name); // sieun
console.log(age); // 22

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

const numbers = [1, 2, 3];
const [a, b] = numbers;
console.log(a, b); // 1 2

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

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

... 문법을 사용하여 배열로 저장할 수 있는데, 가장 많이 쓰인다고 한다.

const array = [1, 2, 3];
const [...NewArr] = array;
console.log(NewArr); // [1, 2, 3]

const [a, ...rest] = array;
console.log(a) //1
console.log(rest) // [2, 3]

이런식으로 배열의 각 요소를 하나하나 저장하는 방식이 아니라 한줄로 저장하는게 가능하다.

▷ .entries()로 반복하기

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

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

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

---

▶ 객체 분해하기

아래와 같은 객체가 있을 때

const person = {
  name: "John",
  age: 30,
};

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

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

const { name, age } = person;
console.log(name, age); // sieun 22

아래와 같이 구조 분해 할당을 사용할 수 있다.

let { name, age } = {
  name: "sieun",
  age: 22,
};
console.log(name); // "sieun"
console.log(age); // 22

아래와 같이 새로운 이름으로 할당할 수 있다.

let user = {
  name: "sieun",
  age: 22,
};
let { name: newName, age: newAge } = user;
console.log(newName); // sieun
console.log(newAge); // 22

아래와 같이 값이 없는 경우,

let user = {
  name: "sieun",
  age: 22,
};
let { name, age, birthDay } = user;
console.log(birthDay); // undefined

초기값을 설정해 줄 수 있다.

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

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

📎참조

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