ES6 Object Destructuring Examples

#JavaScript #ES2015 #ES6 #Destructuring

Object destructuring is a new way of extracting data into variables, available in ES6. It makes declaring and assigning variables based off an object shorter and more readable.

The basics

In essence, this is what destructuring does:

In ES5:

var google = {
  founded: '04/10/1998',
  ceo: 'Sundar Pichai',
  hq: 'Mountain View'
};

var founded = google.founded;
var ceo = google.ceo;
var hq = google.hq;

console.log(ceo); // 'Sundar Pichai'

In ES6:

const google = {
  founded: '04/10/1998',
  ceo: 'Sundar Pichai',
  hq: 'Mountain View'
};

const { founded, ceo, hq } = google;

console.log(ceo); // 'Sundar Pichai'

What used to take 3 lines now takes one. We can declare 3 variables and assign them to corresponding values of an object. The variable names and object properties names have to match.

If you have used the import statement in ES6, you might have run into things like:

import { add , substract } from "math-operations";

This is one very common and useful way to use destructuring.

Advanced usages

Default Values

You can use ES6 default parameters in conjunction with destructuring

const google = {
  founded: '04/10/1998',
  hq: 'Mountain View'
};

const {founded, ceo='Sundar Pichai', hq='California'} = google;

console.log(ceo); // 'Sundar Pichai' 
console.log(hq); // 'Mountain View'

Here, we have assigned default values to ceo and hq.

Since ceo does not have a value setup in the initial object, the default value is used.
Since hq has a value setup in the base object, the default value is not used.

Changing variables names

const google = {
  founded: '04/10/1998',
  ceo: 'Sundar Pichai',
  hq: 'Mountain View'
};

const {ceo: daddy, hq: home} = google;

console.log(home); // 'Mountain View'

In case using the object’s property names as variable names is not possible for you, it is possible to reassign them.

Here, we have reassigned the google.ceo property to daddy and google.hq to home.

Assignment without declaration

If you want to assign values to existing variables, you need to use (..).

let ceo, hq;

const google = {
  founded: '04/10/1998',
  ceo: 'Sundar Pichai',
  hq: 'Mountain View'
};

({ceo, hq} = google); // Notice the parentheses

console.log(ceo); // 'Sundar Pichai'

Nested Objects

It is possible to use destructuring with nested objects:

const google = {
  founded: '04/10/1998',
  ceo: 'Sundar Pichai',
  hq: {
    city: 'Mountain View',
    state: 'California'
  }
};

const {ceo, hq: {city, state: s}} = google;

console.log(city);
console.log(s);

Just replicate the structure of the initial object. As you can see in the example above, you can change the variable name at the same time.

Usage in for loop

One creative use of destructuring would be declaring a for loop:

const companies = [
  {
    name: 'Google',
    ceo: 'Sundar'
  }, {
    name: 'Facebook',
    ceo: 'Mark'
  }
];

for(let {name, ceo} of companies) {
  console.log(name); // 'Google', 'Facebook'
}

The name and ceo values are extracted into new variables directly inside the loop declaration. Everybody will appreciate how clean and compact that looks like.

There are many other ways this can be used. Checkout MDN for more.

Thanks for reading !