1-3. 객체 비구조화 할당(Object Destructuring)

- Object Destructuring(객체 비구조화)

구조화 된 객체 내 속성을 비 구조화 해 가져다 쓰는 것

 

color 라는 객체가 있다.

const color = {
    red: "#FF0000",
    black: "#000000",
    white: "#FFFFFF",
    blue: {
      vivid: "#0000FF",
      light: "#87CEEB"
    },
    yellow: "#FFFF00"
  }

이 color의 속성인 red와 blue의 light에 접근하고자 한다면 기존의 방식에서는

const red = color.red;

console.log(`red: ${red}, lightblue: ${color.blue.light}`);
// red: #FF0000, lightblue: #87CEEB

위와 같이 접근하려는 속성마다 변수를 선언하고 값을 할당하거나 "color.{속성}"을 반복해야한다.

 

비구조화 방식을 사용하면?

const {red, blue: { light }} = color;

console.log(`red: ${red}, lightblue: ${light}`);
// red: #FF0000, lightblue: #87CEEB

새로운 변수를 선언하는 대신 { } 를 사용해 객체의 속성을 가져올 수 있다.

const { 속성 } = 객체; const { 속성1, 속성2: { 속성2의 속성 }} = 객체;

 

{ } 내에 : 을 사용하는 경우는 두가지다.

1. 위의 예시처럼 해당 object인 속성의 내부에 접근
2. 속성의 값을 할당할 변수명 지정

두번째 경우의 예시는 아래와 같다 (color 객체를 활용)

const { red: error, black, blue: { light : blue } } = color;

color의 red 속성을 "error"라는 변수에 담아 사용하기로 했으니, 콘솔에서 red를 출력하면 undefined 에러가 출력이 되고, error를 출력하면 원하는 결과값인 color.red 와 같은 값이 출력된다.

일반적인 비구조화 방식으로 color.black 과 같은 값이 출력된다.

color의 blue 속성 안에 light 속성을 "blue" 라는 변수에 담아 사용하겠다 했으니, 콘솔에서 blue를 출력하면 color.blue 가 아닌 color.blue.light 와 같은 값이 출력된다.