ES 2015 Array Destructuring

Runnable examples of ES2015 Array Destructuring

by Mike Evans

JavaScript

/**
 * ES2015 Array 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 array
  const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff'];

  // Destructure array items to individual variables
  const [ironMan, cap, blackWidow] = avengers;

   console.log('****** Avengers Assemble ******');
   console.log(ironMan);    // 'Tony Stark '
   console.log(cap);        // 'Steve Rogers'
   console.log(blackWidow); // 'Natasha Romanoff'
}

{
   // Don't want the last item?
   const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff'];

   const [ironMan, cap] = avengers;

   console.log('****** IronMan vs Captain America ******');
   console.log(ironMan);        // 'Tony Stark '
   console.log(cap);            // 'Steve Rogers'
   // console.log(blackWidow);  // Error: undefined
}

{
  // Don't want the first item?
  const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff'];
  
  const [, cap, blackWidow] = avengers;

  console.log('****** We don\'t need you, Tony ******');
  // console.log(ironMan);    // Error: udenfined
  console.log(cap);           // 'Steve Rogers'
  console.log(blackWidow);    // 'Natasha Romanoff'
}

{
  // Don't want the middle item?
  const avengers = ['Tony Stark', 'Steve Rogers', 'Natasha Romanoff'];

  // Capless
  const [ironMan, , blackWidow] = avengers;

  console.log('****** No Captain America ******');
  console.log(ironMan);       // 'Tony Stark'
  // console.log(cap);            // Error: undefined
  console.log(blackWidow);    // 'Natasha Romanoff'

 }
 
 {
  // Destructuring Nested Arrays
  const avengers = ['Natasha Romanoff', ['Tony Stark', 'James Rhodes'], ['Steve Rogers', 'Sam Wilson']];

  const [blackWidow, [ironMan, warMachine], [cap, falcon]] = avengers;
  
  console.log('****** Avengers and their partners ******');
  console.log(blackWidow);  // 'Natasha Romanoff'
...