ES6: Object and Array Destructuring

Destructuring is a brand new ES6 syntax and allows us to easily work with arrays and objects.

OBJECT DESTRUCTURING

Let’s walk through the code to get an understanding of how this works:

const person = {
  name: 'Robert',
  age:25,
  location: {
   city:'Chicago',
   temp:31
   }
 } 
//With ES5 syntax
const name = person.name;
const age = person.age; console.log(`${name} is ${age}`); //Robert is 26

This syntax works well but the problem with ES-5 syntax is that it does not scale very well and we have to do that each time for each thing we are trying to pull off.

With ES6 destructuring we can pull off properties in a single line.

//ES6 syntax 
const {name, age} = person;
console.log(`${name} is ${age}`); //Robert is 26

  • On the right side, we have the object we want to destructure

  • On the left side, we have the variable type we are trying to create it can be const, let, or var.

This line is equivalent to the two lines in ES-5 syntax they get the exact same thing done. The ES-6 syntax creates two variables (a name variable and an age variable) and gets those values out of the person object. It looks for the person property with the exact same name. So for name it looks for person.name and for age it looks for person.age.

This is was a simple example now let’s look at something a bit more complex

if(person.location.city && person.location.temp){
console.log(`Its ${person.location.temp} in ${person.location.temp}`);
}
Output:
Its 31 in Chicago
The problem with code like this especially when we are grabbing a nested object is that we end up doing it in multiple places throughout our code.

With destructuring, we can simplify our code which looks cleaner and readable.

const {city,temp} = person.location; if(city && temp) {
 console.log(`Its ${temp} in ${city}`)
}
Output:
Its 31 in Chicago

Additional Features with destructuring

  1. Ability to rename the local variable

Use the renaming syntax to change the name of the local variable if you want it to be descriptive or for minimalism.

const {city,temp: temperature} = person.location;

This is going to have the effect of grabbing the temp property off of person.location and adding it to a new temperature const.

2. Ability to set up default values

When we are destructuring we can actually set up defaults.

const {name = 'Anonymous', age} = person;

This line sets name to Anonymous if the name property does not exist on the person object otherwise it is going to use the value provided in the name property.

The two features can be combined together to get

const {city,temp: temperature = 10} = person.location;

ARRAY DESTRUCTURING

It is similar to object destructuring the syntax is just slightly different.

const address=['1340','Chicago',Illinois'60603'];
console.log(`You are in  ${address[1]} $address[2]`);
Output:
You are in Chicago Illinois

This code works but the problem with this kind of code that it's not clear what's happening. If the log statement is viewed in isolation and the address is coming from a database or an API. We don't know what is address[1] whether it is the street number, country, or country code. To get a clear understanding of data, destructuring could be used as shown below:

const address=['1340','Chicago',Illinois'60603'];
const [street, city, state, zip] = address;
console.log(`You are in  ${`city} ${state}`);
Output:
You are in Chicago Illinois

  • On the right side, we have the array we want to destructure

  • On the left side, we have ordered list of variable names

Unlike Object which matches up by name, Array Destructuring matches up by position. Name is not important in Array Destructuring.

Destructuring certain variables

Instead of destructuring all variables of the array. You could destructure the one’s you need.

//Destructure only the first three elements
const [street, city, state] = address;
//Destructure the 2nd and 3rd item of array
const [, city, state] = address;//Destructure the state only
const [,,state]=address

Like Objects, we can set defaults in case of Array destructuring.

const address=[];
const [, , state='New York'] = address;
console.log(`You are in ${state}`);
Output:
You are in New York

Thanks for reading!

© 2021 Asim Ansari | Software Engineer at Simpplr