Destructuring Objects

Object를 구조 분해 하는 것을 알아보자. API를 통해서 다른 곳에서 정보를 받을 때 대부분 object로 오기 때문에 object 구조 분해를 잘 알아야 사용할 수 있다.

const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  openingHours: {
    thu: {
      open: 12,
      close: 22,
    },
    fri: {
      open: 11,
      close: 23,
    },
    sat: {
      open: 0, // Open 24 hours
      close: 24,
    },
  },
};

위의 코드에서 restaurant 객체에 정보들이 담겨있다. 이제 이 restaurant 객체를 분해하는 방법을 알아보자.

const { name, openingHours, categories } = restaurant;
console.log(name, openingHours, categories);

이렇게 {} 사이에 변수들을 써주면 된다. 변수 이름을 아래와 같이 바꿀 수도 있다.

const {
  name: restaurantName,
  openingHours: hours,
  categories: tags,
} = restaurant;
console.log(restaurantName, hours, tags);

객체에 써있는 이름 대신 원하는 이름으로 분해해줄 수도 있다.

그리고 배열에서 기본값을 =1 같이 지정했었는데, 객체에서는 다음과 같이 지정할 수 있다.

const { menu = [], starterMenu: starters = [] } = restaurant;
console.log(menu, starters);

[]로 써준다.

변수를 변경하고 싶을때는

let a = 111;
let b = 999;
const obj = { a: 23, b: 7, c: 14 };
({ a, b } = obj);
console.log(a, b);//23 7

원래 a, b가 각각 111, 999라는 값을 가지고 있었는데 obj에서 분해를 해줘 값을 변경하는 것이다. 앞서 말했듯이 객체를 destructuring할 때 {}를 써줘야 하는데, 자바스크립트에서 {}를 앞에 써주면 코드 블록이 나올 걸로 예측하기 때문에 오류가 생긴다. 그래서 앞에 ()를 추가해준 것이다. 이렇게 하면 콘솔에서 출력할 때 23, 7이 나온다!

다음으로 객체에서도 nested object가 있다.

const { fri } = openingHours;
console.log(fri);

위의 예시를 보면 openingHours밑에 요일별로 또 object가 있는걸 볼 수 있다.바로 위의 fri를 콘솔에 찍어보면 {open: 11, close: 23} 이렇게 나오는데 여기서 숫자만 빼주기 위해서는

const {
  fri: { open, close },
} = openingHours;
console.log(open, close);

이렇게 fri 객체 안에 있는 것을 또 구조 분해해주면 된다. 변수 이름을 다르게 해서 아래와 같이 구조 분해해줘도 된다.

const {
  fri: { open: o, close: c },
} = openingHours;
console.log(o, c);

다음은 restaurant 객체에 orderDelivery 메소드를 추가한 예시이다.

const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  openingHours: {
    thu: {
      open: 12,
      close: 22,
    },
    fri: {
      open: 11,
      close: 23,
    },
    sat: {
      open: 0, // Open 24 hours
      close: 24,
    },
  },

  order: function (starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },

  orderDelivery: function ({ starterIndex, mainIndex, time, address }) {
    console.log(
      `Order received! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}`
    );
  },
};

restaurant 객체에 이렇게 orderDelivery를 추가해주고

restaurant.orderDelivery({
  time: '22:30',
  address: 'Via del sole, 21',
  mainIndex: 2,
  starterIndex: 2,
});

이렇게 써줬더니 여기에 나와있는 time, address, mainIndex, starterIndex의 순서와 상관없이 위의 매개변수에 들어가는 것을 볼 수 있었다. 객체 구조 분해 할당을 사용하면 쓰여진 순서에 상관없이 객체 속성 이름에 따라 값이 매개변수에 할당되기 때문이다. orderDelivery에서 이렇게 기본값을 정해줄 수도 있다.

  orderDelivery: function ({starterIndex =1, mainIndex=0,time='20:00',address}) {
    console.log(
      `Order received! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}`
    );
  }

기본값을 정해두면

restaurant.orderDelivery({
 
  address: 'Via del sole, 21',
  
  starterIndex: 1,
});

기본값이 그대로 나오고 address와 starterIndex 값이 각각 'Via del sole, 21'와 1로 들어가게 되는 것이다.