[JavaScript] 구조분해할당

 

구조분해할당

 

---

 

# 구조분해할당

 

 객체의 속성 또는 배열의 값을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트의 표현식이다. 객체와 배열에서 사용할 수 있다.

 

 

1. 객체 구조분해할당

 

 객체의 속성을 변수로 사용하기 위해서는 다음과 같이 코드를 적어야 한다. 

 

const user = {
   id: 123,
   name: "kim",
   age: 20,
};

const id = user.id;
const name = user.name;
const age = user.age;

console.log(id, name, age); // 123 "kim" 20

 

 구조분해할당을 이용하면 간단해진다.

 

const user = {
   id: 123,
   name: "kim",
   age: 20,
};

const { id, name, age } = user;
console.log(id, name, age); // 123 "kim" 20

 

 각 변수의 이름을 새로 지정해줄 수도 있다.

 

const user = {
   id: 123,
   name: "kim",
   age: 20,
};

const { id: userId, name: userName, age: userAge } = user;
console.log(userId, userName, userAge); // 123 "kim" 20

 

 객체의 속성 모두를 다 작성할 필요 없이 필요한 속성만 가져와 쓸 수 있다.

 

const user = {
   id: 123,
   name: "kim",
   age: 20,
};

const { id: userId, age: userAge } = user;
console.log(userId, userAge); // 123 20

 

 

2. 배열 구조분해할당

 

객체와 마찬가지로 배열도 구조분해할당으로 표현할 수 있다.

 

const week = [
  "monday",
  "tuesday",
  "wednesday",
  "thursday",
  "friday",
  "saturday",
  "sunday",
];

const [day1 ,day2, day3, day4, day5, day6, day7] = week;

 

 배열의 원소 중 특정 원소를 제외해서 사용하고 싶다면 그 부분을 빈칸으로 작성해주어야 한다.

 

const week = [
  "monday",
  "tuesday",
  "wednesday",
  "thursday",
  "friday",
  "saturday",
  "sunday",
];

const [day1, , day3, day4, , day6, day7] = week;
console.log(day3); // wednesday

 

 day1과 day3 사이에 빈칸을 두었더니 tuesday는 건너뛰고 변수가 생성되었다.

 

---

 

참고 자료

라매개발자 https://youtu.be/fKjJIzvBJcg