구조 분해 할당(Destructuring assignment)

오픈 소스 코드를 분석하던 도중, 신기한 코드를 발견했습니다.

const { id, name, password, age, address } = state.info

 

보통 변수 = 값으로 변수를 선언하는 데, 이 코드는 변수명이 여러 개가 존재하고, 값은 하나로 되어 있더군요.

이러한 문법을 구조 분해 할당이라고 합니다. 이 문법이 무엇인지 알아보아요!

 

---

1. 구조 분해 할당 (Destructuring assignment)

구조 분해 할당이란? 배열 or 객체의 속성을 쉽게 수출하여 변수에 할당하는 JavaScript 문법입니다.

이를 통해 코드를 간결하고 직관적으로 작성할 수 있어요.

 

---

2. 배열에서의 구조 분해 할당

배열에서 구조 분해 할당을 사용하면 배열의 요소들을 각각 변수로 쉽게 할당할 수 있어요.

 

example1.js

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

 

---

3. 객체에서의 구조 분해 할당

객체에서는 속성의 이름을 기준으로 값을 변수에 할당합니다.

example2.js

const obj = {
  name: 'Lee',
  age: 25
}
const { name, age } = obj;

console.log(name); // Lee
console.log(age); // 25

 

---

4. 기본값 설정

구조 분해 할당을 사용할 때 undefined일 경우, 기본값을 설정할 수 있어요.

example3.js

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

console.log(a); // 1
console.log(b); // 3

 

---

5. 중첩된 객체의 구조 분해

객체가 중첩된 경우에도 구조 분해 할당을 사용할 수 있습니다.

example4.js

const user = {
  name: 'Kim',
  address: {
    city: 'Seoul',
    zip: '12345'
  }
};

const { name, address: { city, zip } } = user;

console.log(name); // Kim
console.log(city); // Seoul
console.log(zip);  // 12345

 

---

6. 나머지 요소 가져오기 (Rest syntax)

배열 or 객체에서 일부만 분해하고 나머지를 별도의 변수에 할당할 수도 있어요.

example5.js

const [first, ...rest] = [10, 20, 30, 40];
console.log(first); // 10
console.log(rest); // [20, 30, 40]

const { name, ...otherInfo } = { name: 'Park', age: 30, job: 'Developer' };
console.log(name); // Park
console.log(otherInfo); // { age: 30, job: 'Developer' }

 

---

7. 정리하며

지금까지 구조 분해 할당에 대해 알아보았습니다.

복잡한 객체 or 배열에서 원하는 값만 추출하고 싶을 때, 이를 활용하면 좋을 것 같아요.

 

참고

MDN web docs의 구조 분해 할당

JAVASCRIPT.INFO의 구조 분해 할당

January 님의 구조 분해 할당 (Javascript)