[JavaScript] 구조 분해 할당(Destructuring Nested Objects)

 

 

 

---

목차

 

1. 배열(array)에서의 구조 분해 할당

2. 객체(object)에서의 구조 분해 할당

---

 

 

구조 분해 할당 문법은 배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property) 를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해준다.

 

 

1. 배열(array)에서의 구조 분해 할당

---

구조 분해 할당은 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 해서 대입하는 형식으로 작성하면 된다.

const [i, ,j] = [2, 4, [5, 6]];

console.log(i,j); // 2 [5, 6]

 

 

아래와 같이 미리 저장해 둔 배열로부터 구조 분해 할당하는 형태도 가능다.

const nested = [2, 4, [5, 6]];

const [i, ,j] = nested;
console.log(i,j); // 2 [5, 6]

 

 

 

...로 나머지 요소 가져오기

---

배열 앞쪽에 위치한 값 몇 개만 필요하고 나머지 값들은 한데 모아 저장하고 싶을 때 ...를 붙이 매개변수 하나를 추가하면 '나머지(rest)'요소들을 가져올 수 있다. 아래와 같이 쓰이는 ... 요소는 Rest elements라고 한다.

let array = [1, 2, 3, 4, 5];
let [a, b, ...rest] = array;
console.log(rest); // [3, 4, 5];

 

 

 

2. 객체(object)에서의 구조 분해 할당

---

객체(object)에서의 구조 분해 할당은 배열에서의 구조 분해 할당과 쓰이는 의미는 동일하되 쓰이는 대상이 객체로 바뀐 것 뿐이다. 단, 분해되는 대상이 배열은 array의 value(element) 였다면, 객체는 분해되는 대상이 객체의 property 인 차이가 있다.

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};
const { name, age, memo } = obj;
console.log(name); // "John"
console.log(age); // 18
console.log(memo); // "Hello"

// 만약 구조 분해 할당을 사용하지 않는다면?
// 아래와 같이 직접 대입해 주어야 한다.
const name = obj.name;
const age = obj.age;
const memo = obj.memo;

 

이처럼 obj 내부의 name, age, memo 프로퍼티들을 각각 프로퍼티명과 이름이 동일한 name, age, memo 변수에 알아서 분해하여 할당해 주고 있다.

 

물론 객체의 프로퍼티명과 다른 변수명으로 새롭게 지정해 줄 수도 있다.

아래는 obj로부터 분해된 name 프로퍼티의 값을 새롭게 이름지은 YourName 변수에 할당하고 있다.

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};
const { name: YourName, age, memo } = obj;
console.log(YourName); // 'John'

 

 

 

객체 구조 분해 할당은 프로퍼티를 기준으로 하기 때문에 배열 구조 분해 할당과 달리 그 순서가 뒤바뀌어도 전혀 문제없이 해당 프로퍼티의 값을 가져올 수 있다. 

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};
// memo, name, age 순으로 작성해도 상관이 없다. 알아서 해당 프로퍼티명에 해당하는 값을 저장한다.
const { memo, name, age } = obj;
console.log(name); // 'John'
console.log(age); // 18
console.log(memo); // 'Hello'

// 배열 구조 분해 할당의 경우 작성된 순서대로 배열의 값을 넣어준다.
const [a, b, c] = [10, 20, 30];
console.log(a, b, c); // 10 20 30

 

 

 

여기서도 ... 문법을 활용할 수 있다.

const obj = {
  name: "John",
  age: 18,
  memo: "Hello",
};
const { name, ...rest } = obj;
console.log(name); // "John"
console.log(rest); // { age : 18, memo: 'Hello' }

obj 객체 중 name에 프로퍼티 값이 저장되고, 나머지 age와 memo는 ...rest가 받아서 rest 변수에 모아 객체로 저장해 준다. 객체의 구조 분해 할당에서 위의 역할로 ...이 쓰이는 것을 가리켜 Rest properties 라고 부른다. 

 

위 object rest properties를 응용하면, 쓰고 싶은 프로퍼티만 골라서 새로운 객체로 저장할 수 있는 효과를 볼 수 있다.

 

 

아래와 같은 코드가 있다고 가정해보자.

price 객체에 담긴 프로퍼티 중 apple만 제외한 나머지 프로퍼티들로 이루어진 객체를 만들고 싶을 경우, 어떻게 하면 될까?

const price = {
  apple: 1000,
  banana: 500,
  orange: 600,
  grape: 700,
};
const { apple, ...otherPrice } = price;
console.log(otherPrice); // { banana: 500, orange: 600, grape: 700 }

 

이렇게 Rest properties를 사용하면 객체 구조 분해 할당으로 otherPrice 객체에 apple을 제외한 나머지 프로퍼티들이 모여서 저장되므로 특정 프로퍼티만 제외한 새로운 객체를 만들어 낼 수 있다.