Object destructuring -1

지난 포스팅의 restaurant object에 openingHours를 추가하여 진행해보자!

const restaurant = { 
	name: 'Restaurant Name', 
    location: 'Seoul', 
    categories: ['Italian', 'Pizzeria', 'Vegeterian', 'Organic'], 
    starterMenu: ['Foccacia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'], 
    mainMenu: ['Pizza', 'Pasta', 'Risotto'], 
    openingHours: {
    	thu: {
        	open: 12,
            close: 22,
        },
        fri: {
        	open: 11,
            close: 23,
        },
        sat: {
        	open: 0,
            close: 24,
        },
    },
};

 

배열을 destructuring 할 때와 비슷하게,

아래와 같은 방법으로 destructuring 할 수 있다.

 

const { mainMenu, starterMenu } = restaurant;

console.log(mainMenu, starterMenu); 

이 때 주의할 점은 object는 순서가 없으므로

속성의 이름과 일치시켜 주어야 한다는 점이다.

 

이때 속성의 이름이 아닌 다른 이름으로 변수를 지정하고 싶다면

const {mainMenu: main, starterMenu: starter} = restaurant;

와 같은 방법으로 바꿀 수 있다. (menu, starter)

 

---

기존 값 변경하기

 

let a = 111;

let b = 999;

const obj = { a: 23, b: 7, c: 14 };

 

let a, b의 값을 obj.a obj.b값으로 변경해 줄때

{a, b} = obj가 아닌

({a, b}=obj);로 실행한다.

 

console.log(a, b); // 23 7

 

---

object 안의 object

 

위 예제 restaurant 이용

const { fri } = restaurant.openingHours;

console.log(fri); // { open: 11, close: 22 }

 

각 open, close라는 변수로 destructuring하고 싶을 경우

const { fri:{open, close} } = restaurant.openingHours;

 

앞서 변수명을 새로 지정해주는 경우와 같이

const { fri: {open: o, close: c} } = restaurant.openingHours;

로 o, c라는 이름으로 변경할 수 있다.

---