객체 분해

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'],

  // ES6 enhanced object literals
};
const { name, categories, mainMenu } = restaurant;
console.log(name, categories, mainMenu);
// Classico Italiano (4) ["Italian", "Pizzeria", "Vegetarian", "Organic"] (3) ["Pizza", "Pasta", "Risotto"]

배열분해와는 다르게 순서는 중요하지 않다 다만, 추출할 속성의 이름 그대로 변수를 설정해야한다. const 변수로 설정하면 변수를 수정할 일이 없지만 const 변수가 객체를 담은 경우 여전히 힙에 저장되어있는 객체 주소만을 복사하기 때문에 객체의 깊은 복사는 이뤄지지 않는다.

객체 분해시 변수이름을 속성과 다르게 설정

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'],

  // ES6 enhanced object literals
};
const { name: restaurantName, categories: tags, mainMenu: menus } = restaurant;
console.log(restaurantName, tags, menu);
// Classico Italiano (4) ["Italian", "Pizzeria", "Vegetarian", "Organic"] (3) ["Pizza", "Pasta", "Risotto"]

변수이름의 속성값을 설정해주면 같은 기능을하되 속성값으로 변수가 설정이된다.

객체가 존재하지 않을 경우 기본값을 넣기

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'],

  // ES6 enhanced object literals
};
const { name: restaurantName, categories: tags, menus : dishes = [] } = restaurant;
console.log(restaurantName, tags, dishes);
// Classico Italiano (4) ["Italian", "Pizzeria", "Vegetarian", "Organic"] []

위 코드에서 배열분해와 같이 기본값을 설정하면 찾는 속성이 해당객체에 없는경우 기본값을 할당한다. 위 코드에서는 restaurant에 menus 속성이 없어서 dishes 로 변수는 할당하되 기본값이 할당된 모습이다. 배열 구조화 할당과 마찬가지로 해당 속성이 없고 기본값을 넣지 않았을 경우 undefined 를 할당한다.

기존에 존재하는 변수와 객체의 속성이 같을 경우 대체하기

let a = 8;
let b = 7;
const testObj = {
  a: 22,
  b: 30,
};
({ a, b } = testObj);// 중괄호는 문법적으로 = 등호가 맞지 않기 때문에 ()로 묶어야만 제 기능을 한다. ?? 잘 모르겠다. 
console.log(a, b);

이중객체 안의 속성을 변수로 정의학기

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'],
  fri: {
    open: 11,
    close: 23,
  },
};

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

이중 배열 구조화 할당과 매우 비슷하게 할당하면 된다. 마찬가지로 해당 값이 없을 경우 기본값을 넣어 할당해주면 된다.

함수의 매개변수에 객체 비구조화 전달

const testObj = {
  testFunc: function ({ name, age, gender, voice = 'high' }) {
    console.log(name, age, gender);
    console.log(voice);
  },
};

testObj.testFunc({
  name: 'doodream',
  age: 21,
  gender: 'male',
});
// doodream 21 male

함수에 객체의 정보를 전달할때에 객체의 속성 자체를 전달할 수 있다. 물론 매개변수를 전달할 때에 해당 속성이 전달 받은 객체에 없으면 undefined가 할당되며 방지하기 위해서 기본값을 넣을수 있다.