Array and Object Destructuring in JavaScript

One of the most interesting features that ES6 added to JavaScript was object and array destructuring. With destructuring we can take part of an array or an object very easily. Let’s understand by taking up a few examples

Now if we have to pick the first two items from the alphabets array. The conventional way would be,

It is very obvious that the above approach is very clunky and there is a much easier way of doing this. Using the spread operator syntax,

The question arises is how exactly does it work??
So the idea behind destructuring is we take the array (alphabets array in our case) we want to destructure and put that on the right side of the equals sign. On the left side of the equals sign we take the number of variables we want to pull out of the array and enclose that between brackets ([]). The key point to notice here is the elements inside the array on the left side follow the same order as of the array on the right side. That is how the first element a gets assigned the first element ‘A’ and the second element b gets the second element ‘B’.

Adding a third element c on the left hand side will result in

If we want to skip any element let’s say ‘B’ for example, we can

The another really powerful thing with destructuring and spread operators is we can use it to combine two arrays as well.

The array destructuring is incredibly useful while dealing with functions when we are returning more than one parameter from a function.
Let’s create a simple function first which calculates sum and multiplication of two numbers.

Using array destructuring,

Something handy that we can do we this array destructuring is that we can set default values. Let’s say the function can also return division and if it doesn't we will simply set some value as No division

But if we change the sumAndMultiply function to return the division also , The output will be as

The real power of destructuring comes with objects so let’s jump in and look over object destructuring.

When we want to destructure an object it works very similarly to an array. Let’s say we want to get the name and age of the object. So since we are destructuring an object we will be using {} instead of []

The object destructuring works exactly the same as arrays but instead of based on position it is actually based the name of the key. So the name variable inside the {} is same as the name key in the personOne object and same goes for age. They need to match.

But what if we want to use a different name ?
we can easily do that by simply giving the actual name inside the curly brace and then after that we put a colon and then the variable name we want.

what the above code is doing is taking the name property from the personOne object and mapping it to firstName variable that we are creating.

We can even use default values in object destructuring the same way we were using it with array destructuring . Let’s say we want to get something that the personOne object doesn’t already have. We will be deleting the name property from the personOne object and try to access that along with a new property favoriteFood using default values.

But if we have both the properties in place, we get the actual values despite of any value set as default.

Just like the array deconstructing, we can use the spread operator here as well.

Also something that really nice about object destructuring is we can actually destruct our nested objects.

Another thing we can do with destructuring is that we can combine two different objects. Let’s take two different objects

Let’s try to understand what happened in the above example. It says that take
everything that is present in personOne is put into the personThree object and then again take everything from the personTwo and put into personThree but overwrite anything that was already in personOne.

In the console we get the name ‘Vikash’ which was present in personOne. We get the age 32 because that gets overwritten by personTwo. The favouriteFood shows ‘rice’ because it was only present in personTwo and the address is same as the address in personOne because it’s not present in personTwo.

Object destructing with functions
Another important and useful part of object destructuring is the ability to use it inside functions and arguments. We will be using the same object personOne here

Let’s create a function and see some of the use cases.

what if we want to print only the name and the age inside of the printUser function. We can use destructuring in the function parameters like this

we can also set defaults like

And if we add the favouriteFood property to our object , the default value doesn’t matter at all.

Related posts:

Summer is approaching quickly, and the warm weather we’ve had throughout late spring is returning. Below are five short bike routes around Sunset that are great for casual or amateur cyclists looking…

Get the ball rolling with a simple Angular 6 web application running locally on your machine in less than 5 minutes. This is going to be the start of a series of blog posts explaining how to…

Those who seek the future are being chased by the past., a Medium series by Khaled Samen