배열과 객체의 구조 분해 할당을 알아보자!

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

MDND에서 가져온 구조 분해 할당에 대한 설명이다.

 

말 그대로 배열이나 객체를 분해해서 값을 가져올 수 있는 걸 말한다.

 

const animals = [
  { name: "cat", sound: "야옹" },
  { name: "dog", sound: "왈왈" }
];

 

animals이라는 배열이 있다. 동물의 이름과 소리에 대한 정보를 가진 객체가 2개 있다.

 

animals 배열을 분해해보자!

 

import animals from "./data";

const [cat, dog] = animals;

console.log(cat);
console.log(dog);

우선 animals 배열이 있는 파일을 import 해주었다.

 

그리고 배열을 분해하기 때문에 [ ] 괄호를 사용해야 한다. 객체가 담길 적절한 변수명을 만들어주고 배열을 넣어준다.

 

cat에는 animals 배열의 첫 번째 객체가 담기고 dog에는 두 번째 객체가 담길 것이다.

 

콘솔에도 같은 결과가 나왔다. 기존 방식으로 cat이라는 객체를 만들려면 아래처럼 했어야 한다.

var cat = animals[0];

 

배열에서 분해된 cat과 dog는 이제 하나의 객체이다. 이 객체 안에도 name과 sound라는 요소가 존재한다.

 

그러면 배열과 다르게 객체는 어떻게 분해해야 할까??

 

배열을 선언하고 분해할 때는 [ ] 괄호를 사용했다. 객체도 마찬가지다.

 

객체를 선언할 때 { } 괄호를 사용하니까 분해도 같은 방식이다.

const { name, sound } = cat;

console.log(name);
console.log(sound);

cat 객체를 name과 sound 변수로 분해해보았다.

 

콘솔에 name과 sound를 각각 찍어보면 cat 객체의 요소인 "cat"과 "야옹"이 담긴 걸 확인할 수 있다.

 

배열과 객체를 분해할 때 주의해야 할 부분이 있다!!

배열을 분해할 때는 변수명을 자유롭게 지정할 수 있지만,

객체를 분해할 때는 객체의 요소의 이름을 그대로 가져와야 한다!!

 

만약 다른 이름을 쓰고 싶다면 아래와 같이 분해하면 된다.

const { name: catName, sound: catSound } = cat;

console.log(catName);
console.log(catSound);

 

위와 같이 분해하고 지정한 변수명을 콘솔에 찍어보면 같은 결과를 볼 수 있다!

 

그렇다면 객체 속에 또 다른 객체가 있는 경우에는 어떻게 분해를 해야 할까???

 

const animals = [
  {
    name: "cat",
    sound: "야옹",
    feeding: {
      water: 1,
      food: 3
    }
  },
  { name: "dog", sound: "왈왈" }
];

export default animals;

 

우선 animals 배열 속 첫 번째 객체에 feeding이라는 먹이를 주는 정보를 가진 객체를 하나 만들었다.

 

그리고 이 객체를 분해하는 방법은 아래 코드를 보자!

 

const {name, sound, feeding: { food, water }} = cat;

console.log(cat);
console.log(food);

 

cat 객체를 찍어보면 name, sound 변수와 feeding이라는 객체를 볼 수 있다.

 

그리고 위처럼 객체를 분해하는 방식 안에서 원하는 객체를 다시 한번 분해해주면 문제를 해결할 수 있다!

 

const {name, sound, feeding } = cat;

console.log(feeding.food);

feeding 객체를 직접 분해하지 않고 feeding이라는 객체 변수를 만들어서 feeding.food로 접근하는 방식도 가능하다.