Array and object destructuring helps code be more clear and flexible, this syntax will let you decompose arrays and objects straightforward, we can now return multiple values with less work, there is few things you can do in different ways.

Let’s see some examples:

With Arrays

A nice way to split an array into single objects.

function foo(num){
  return [1,2,3,4,num]
}

const [a, b, c, d, e] = foo(5);

a, b, c, d, e // 1 2 3 4 5
a + b // 3

With Objects

You have different semantic ways of obtaining values from an object which can definitely simplify things.

  function obj(){
    return {
      x: 4,
      y: 5,
      z: 6,
    }
  }
  const { x, y, z } = obj();
  x, y , z //  4, 5, 6
  ---
  function bar(){
    return {
      x: 4,
      y: 5,
      z: 6,
    }
  }
  const { x: four, y: five, z: six } = bar();
  four // 4
  

Note: The name of the key you are assigning has to be the same, otherwise, will throw undefined.

  ....

  const { m: four, y: five, z: six } = obj();
  m // undefined

  

Destructuring a function

Returning multiple objects is much easier when you descompose them.

  const getBtnType = color => {
    switch(color) {
      case 'primary':
        return {
          backgroundColor: 'green',
          textColor: 'LawnGreen ',
        };
      case 'Secondary':
        return {
          backgroundColor: 'blue',
          textColor: 'AliceBlue',
        };
      default:
        return {
          backgroundColor: 'gray',
          textColor: 'Silver ',
        };
    }
  }

  const { backgroundColor, textColor } = getBtnType('primary');

  backgroundColor // "green"

  

Nested Destructuring

You can go deeper and use destructuring with nested objects or arrays.

  const product = { 
    name: 'lg plasma 2.1', 
    category:[ 'tv', 'electrodomestic', 'technologie', 'home' ], 
    price: 120, 
  };

  let { name, category:[tv, electrodomestic, technologie, home], price } = product

  name// lg plasma 2.1

  electrodomestic // electrodomestic

  

Note how easy we got electrodomestic instead of doing something like:

  const product = { name: 'lg plasma 2.1', category:['tv', 'electrodomestic', 'technologie', 'home'], price: 120 };

  let { name, category, price } = product

  category.forEach(function(c) {
    if (c === 'electrodomestic') {
       console.log(c)
    }
  });
  // electrodomestic

  

Repeted Assigment

A value source could be listed multiple times, for example:

  const { a: x, a: y } = { a: 5}

  x, y // 5 5

  const { players: {name: XX, name: YY } } = { players: { name:'Mike'} };

   XX, YY // Mike, Mike

  

Assigment Expressions

The assigment expression with objects or arrays has as completition value, the full righthand object/array value.

  const person = { name: 'Rolando', surname: 'Barbella', age: 38 };
  let name, surname, age, p

  p = { name, surname, age } = person

  name // Rolando 
  surname  // Barbella
  age  // 38

  p === person  // true

  

Destructuring Parameters

Problaby one of the most powerfull and usefull features in ES6 is that you can pass arrays and objets as parameters to a function which will help you avoid using apply or call.

  const foo = ([x, y]) => console.log(x, y)

  foo([1,2]); // 1 2

  const bar = ( { a, b }) => console.log(a, b);

  bar( { a: 3, b: 4} ) // 3 4