ES6 Destructuring with Objects and Arrays

Complex Destructuring examples with both objects and arrays together in one complex object (or array!).

by Mike Evans

JavaScript

{
  const avengers = {
    operation: 'Assemble',
    members: [
      { ironMan: 'Tony Stark' },
      { captainAmerica: 'Steve Rogers' },
      { blackWidow: 'Natasha Romanoff' }
    ]
  }

  const { operation, members } = avengers;

  console.log('****** Avengers Assemble Again ******');
  console.log(operation);
  console.log(members);
}


{
   const avengers = {
      operation: 'Assemble',
      members: [
         { ironMan: 'Tony Stark' },
         { captainAmerica: 'Steve Rogers' },
         { blackWidow: 'Natasha Romanoff' }
      ]};

   const { operation, members:[, cap] } = avengers;

   console.log('****** Pluck an Avenger ******');
   console.log(operation);
   console.log(cap);
}

{
   const members = [
         { ironMan: 'Tony Stark' },
         { captainAmerica: 'Steve Rogers' },
         { blackWidow: 'Natasha Romanoff' }
      ];

   const [, cap] = members;

   console.log('****** Avenger Members ******');
   console.log(cap);
}

{
   let bruceBanner = 'Bruce Banner';
   let theHulk = 'The Hulk';

   console.log('****** Swapping Bruce Banner and The Hulk ******');
   console.log('bruceBanner', bruceBanner); // Bruce Banner
   console.log('theHulk', theHulk);  // The Hulk

   // *** Watch Bruce Banner become The Hulk! ***
   [bruceBanner, theHulk] = [theHulk, bruceBanner];

   console.log('bruceBanner', bruceBanner); // The Hulk
   console.log('theHulk', theHulk); // Bruce Banner

}