Object Destructuring even better with ES2018

object-destructuring-snippet-1.js

const hero = {
  id: 1,
  name: "Thor",
  powers: [
    "Teleportation",
    "Master Combatant",
    "Superhuman Stamina",
    "Self-sustenance"
  ],
  weapon: "Mjolnir",
  place: {
    current: 'Earth',
    native: 'Asgard'
  }
};
console.info(hero);
/*
Output:
{
  id: 1,
  name: "Thor",
  powers: [
    "Teleportation",
    "Master Combatant",
    "Superhuman Stamina",
    "Self-sustenance"
  ],
  weapon: "Mjolnir",
  place: {
    current: 'Earth',
    native: 'Asgard'
  }
};
*/

object-destructuring-snippet-2.js

//Extract properties(name and weapon) from hero.
const { name, weapon } = hero;
console.info(name);
/* 
    Output: Thor
    Equivalent to: hero.name
*/
console.info(weapon);
/* 
    Output: Mjolnir
    Equivalent to: hero.weapon
*/

object-destructuring-snippet-3.js

//Extract properties and assign new name.
const { name: heroName, weapon: heroWeapon } = hero;
console.info(heroName);
/* 
    Output: Thor
    Equivalent to:
      let heroName = hero.name
*/
console.info(heroWeapon);
/* 
    Output: Mjolnir
    Equivalent to:
      let heroWeapon = hero.weapon
*/

object-destructuring-snippet-4.js

//Set default value while extracting.
const { name = "Heimdall", brother = "Loki" } = hero;
console.info(name);
/* 
    Output: Thor
    Why: 'Thor' is from the original object. If it was not present then value could be 'Heimdall'
*/
console.info(brother);
/* 
    Output: Loki
    Equivalent to: hero.brother =  !hero.brother ? 'Loki' : hero.brother;
*/

object-destructuring-snippet-5.js

// Extract from nested object/array

const {
  powers: [thorFirstPower],
  place: { native }
} = hero;

console.info(`thorFirstPower: ${thorFirstPower}`); //Output: Teleportationuniverse
console.info(`native: ${native}`); //Output: Asgard

object-destructuring-snippet-6.js

/*
  Extract some individually and others in the group using "rest(...) operator".
  This super cool feature is introduced in ES2018.
*/
const { id, ...remaining } = hero;
console.info(id);    //Output: 1
console.info(remaining);
/*
  Output:
  {
    "name": "Thor",
    "powers": [
      "Teleportation",
      "Master Combatant",
      "Superhuman Stamina",
      "Self-sustenance"
    ],
    "weapon": "Mjolnir",
    place: {
      current: 'Earth',
      native: 'Asgard'
    }
  }
*/

object-destructuring-snippet-7.js

/*
    1) Replace existing properties 
    2) Merge objects using 'spread(...) operator'  
    3) Extend object with new propert[y|ies]
    *) This super cool feature is also introduced in ES2018.
*/

const updatedHero = {
  ...hero,
  name: 'Thor Odinson',
  brother: 'Loki'
};

console.info(updatedHero);
/*
    Output:
    {
      brother: 'Loki'
      name: 'Thor Odinson',
      ...
    }
    Equivalent to: 
      const updatedHero = Object.assign(hero, {
        name: 'Thor Odinson',
        brother: 'Loki'
      })
*/