ES6 Object destructuring

Code snippets showing how to do object destructuring.

by Mike Evans

JavaScript

/**
  * ES2015 Object destructurimg, by Mike Evans for Untangled.io.
  *
  *  - To see the output of this code, open up your DevTools console and
  *    click run at the top of this Fiddle.
  */
 {
   // Setup our object
   const avengers = {
     ironMan: 'Tony Stark',
     cap: 'Steve Rogers',
     blackWidow: 'Natasha Romanoff'
   };

   // Destructure object to individual variables
   const {
     ironMan: a,
     cap: b,
     blackWidow: c
   } = avengers;

   console.log('****** Avengers Assemble ******');
   console.log(a); // 'Tony Stark '
   console.log(b); // 'Steve Rogers'
   console.log(c); // 'Natasha Romanoff'
 }

 {
   // Setup our object
   const avengers = {
     blackWidow: 'Natasha Romanoff',
     ironManCharacters: {
       couple: {
         ironMan: 'Tony Stark',
         hera: 'Pepper Potts',
       },
       partner: {
         warMachine: 'James Brodie'
       }
     },
     capCharacters: {
       cap: 'Steve Rogers',
       partner: {
         falcon: 'Sam Wilson'
       }
     }
   };

   // Destructure object to individual variables
   const {
     blackWidow: a,
     ironManCharacters: {
       couple: {
         ironMan: b,
         hera: c
       },
       partner: {
         warMachine: d
       }
     },
     capCharacters: {
       cap: e,
       partner: {
         falcon: f
       }
     }
   } = avengers;

   console.log('****** Avengers Really Assemble! ******');
   console.log(a); // 'Natasha Romanoff'
   console.log(b); // 'Tony Stark '
   console.log(c); // 'Pepper Potts'
   console.log(d); // 'James Brodie'
   console.log(e); // 'Steve Rogers'
   console.log(f); // 'Sam Wilson'
 }

 {
   // Setup our object
   const avengers = {
     ironMan: 'Tony Stark',
     cap: 'Steve Rogers',
     blackWidow: 'Natasha Romanoff'
   };

   // Destructure object to individual variables with meaningful names
   const {
     ironMan: ironMan,
     cap: cap,
     blackWidow: blackWidow
   } = avengers;

   console.log('******* Named...