32. Object Destructuring (객체 구조분해 할당, 비구조화)

안녕하세요. 박기린 입니다.

저번 Array Destructuring 소개에 이어서, 이번엔 Object를 Destructuring 하는 방법에 대해 알아보겠습니다.

(Array Destructuring 방식을 미리 숙지한 후 이 글을 보시는 것을 추천드립니다.)

 

 

전제

Object Destructuring을 소개하기에 앞서, 설명에 사용될 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,
    },
  },

  order: function(starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },
  
  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}`
    );
  }
};

레스토랑 운영에 관한 정보를 object에 담았습니다.

일일이 스크롤 하면서 보기 어려울 수 있으니, VSCode나 다른 JS IDE에 복붙을 하신 후 보시는 것을 추천드립니다.

 

 

---

Object Destructuring

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

const/let/var {object의 property들을 담고자 하는 변수 리스트} = obejct의 변수명 (포인터);

- Array의 분해는 [대괄호] 였던 것처럼, Object는 {중괄호}로 분해가 이루어집니다.

- 다만 Array는 변수의 순서에 따라 요소가 저장이 되었다면, Object는 property의 이름과 동일한 변수명의 변수에 저장이 됩니다.

- 만약 변수명이 property로 존재하지 않는 변수이 있다면, 'undefined'가 담깁니다.

 

 

---

변수 이름 변경

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

만약 변수명을 다르게 해서 Destructuring을 하고 싶다면,  ': (콜론)'을 사용하시면 됩니다.

':'의 좌항에는 Object property의 이름, 우항에는 원하는 변수명을 넣습니다.

 

---

Default Value

// menu property는 restaurant Object에 존재하지 않는다.
const { menu = [], starterMenu: starters = []} = restaurant;
console.log(menu, starters); // menu는 빈 array로 나옴.

일치하는 property 명이 없을 경우 undefined가 저장되는 것을 막기 위해 기본값(Default Value)를 지정해줄 수 있습니다.

destructuring {중괄호} 안에 할당 연산자(=)로 기본값을 지정해줍니다.

 

 

 

---

중첩된 Object Destructuring

property 안에 Object가 저장된 경우가 있습니다. Object가 중첩된 상황입니다.

이런 경우 Destructuring을 진행해도 내부 Object는 그대로 남아 있습니다.

여기에서 내부 Object까지 함께 Destructuring을 할 수 있습니다.

 

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

중첩된 Array Destructuring과 비슷하게, destructuring 내부에 한 번 더 destructuring을 해줍니다. 이때는 {중괄호}를 겹쳐서 적어줍니다.

 

 

---

JS 함수의 Destructuring

1. JS의 함수는 Object를 인수로 받으면,

2. 함수의 매개변수 목록에 {중괄호}가 있을 경우,

3. 즉시 Destructuring을 수행한 후,

4. 매개변수명과 일치한 Object property 값을 해당 인수에 전달합니다.

// restaurant object의 method 중 하나
  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 object를 보시면 위와 같은 메소드가 선언되어 있습니다. (함수의 매개변수에도 Default Value를 지정할 수 있습니다.)

 

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

이 메소드에 위와 같은 object 인수를 전달합니다.

그러면 자동으로 orderDelivery() 메소드의 매개변수인 time, address, mainIndex, starterIndex에 destructuring 후 입력을 해줍니다.