destructuringObjects.md

[JavaScript] - Destructuring Objects

SOURCE

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 of the param object properties doesn't matter
  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}`
    );
  },
};

Destructuring

In object, order of elements do not matter so we don't need to skip element like in array.

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

Destructuring and reassign to new variables

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

Default values

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

Mutating variables

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

// these are not possible since a and b has already been defined
// let {a, b}
// const {a, b}

// this is a syntax error
// {a, b} = obj;

// the trick to wrap all of these in a parenthesis
({ a, b } = obj);
console.log(a, b);

Nested Objects

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

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

Destructuring param object

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

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