ES6: Best Parts — Part 1 — Destructuring

EcmaScript6 — ES6 — has been around for quite sometime now. There are plenty of tutorials on the internet on how can you get started with ES6.

This is not exactly a tutorial , In this series we will be dealing with the fruitful parts of ES6 — that you can actually use when writing javascript day in day out. In this part we will go through Destructuring in ES6. I personally feel this is the most important feature that makes writing Javascript easy.

I started with ES6 very late. If you have never started with ES6 and is wondering what the big deal about ES6 is , this for you. I will try to dive directly into the code and keep the description less.

Let’s Begin.

Destructuring

Single most powerful feature from ES6.

Let’s take a simple object.

var obj = {
 prop1:1,
 prop2:2
}

To get the properties, in ES5 we will do:

var prop1 = obj.prop1 , prop2 = obj.prop2

In ES6 we can do the same with:

var {prop1,prop2} = obj

Or if we need prop1 alone , we can use:

var {prop1} = obj

This is the most simplest of use cases. In case of large number of properties destructuring becomes highly useful. We can use prop1,prop2 etc as normal javascript variables.

Creating property names dynamically

Destructuring can be used to create property names dynamically. You must have come across many use cases where you are not aware of the property name before , and has to be created depending on a variable.

In ES5 you would do

var dynamic = “foo”; // this can be any value
var obj ={};
obj[“prop”+dynamic] = “my value”;

This creates a property with name propfoo

In ES6 you can:

var dynamic = “foo”
var obj ={
  [“prop”+dynamic] = “my value”;
}

In short you can use array notation directly inside an object. This saves just a line , but makes the code much cleaner.

Passing arguments to function — The new way.

This is another very important reason to use ES6.

Let’s consider this function:

function printVal(alpha,beta,gamma){
 if(alpha){
  console.log(“alpha=”,alpha);
 }
 if(beta){
  console.log(“beta=”,beta);
 }
 if(gamma){
  console.log(“gamma=”,gamma);
 }
}

Its a very simple function to log the passed values if they are present. The ideal call to this function will look like

printVal(alpha,beta,gamma);

What if you want to print beta or gamma alone. In ES5 you would do:

printVal(null,beta);
printVal(null,null,gamma)

We have to pass the null values unnecessarily.

But with destructuring you can do the same using objects in a much better way.

Function will look like:

function printVal({alpha,beta,gamma}){
 if(alpha){
  console.log(“alpha=”,alpha);
 }
 if(beta){
  console.log(“beta=”,beta);
 }
 if(gamma){
  console.log(“gamma=”,gamma);
 }
}

And if you want to pass gamma , or beta alone the function call will be:

printVal({beta});
printVal({gamma});

What this basically does is, pull out the required values from the object and use it.

Even the order doesn’t matter and the best part is you can have default values or alias names for the arguments. The function definition can be

function printVal({beta:b,alpha:a,gamma = 25}){ 
 if(a){
 console.log(“alpha=”,a);
 }
 if(b){
 console.log(“beta=”,b);
 }
 console.log(“gamma=”,gamma);
}
//alpha can be referred as a and beta as b, gamma will always have default value 25 if nothing is passed.

and call to this can be

printVal({alpha,beta,gamma});

Notice that the order of arguments have changed , but it will work perfectly since ES6 does the matching on it’s own. With this we have default arguments, named arguments etc in javascript.

Like I already stated above , this is a very simple use case just to demonstrate it. In case of real life applications with large number of functions and arguments , this feature can come in really handy.

I have come across this situation multiple times where I will have to pass a lot of ‘null’ values as arguments to functions.

With large number of default arguments , instead of passing the arguments as options , with destructuring we have much cleaner and less error prone code.

That is the basics about ES6 Destructuring , The feature I found most useful among all the new fancy features in ES6.

It’s already late to start with ES6, but if you haven’t started yet shed your inhibitions and get started with it.