How to Use the Destructuring Assignment in JavaScript

Destructuring Assignment on Arrays

Photo by Joshua Aragon on Unsplash

Javascript is an immensely popular scripting language that dominates the majority of the front end web frameworks such as Angular, React, Vue, etc. But javascript is such a cool language that today it is no longer limited for front end frameworks but also it has laid the foundation for backend frameworks such as Node.js and also for many other frameworks for developing desktop applications such as ElectronJS. You might wonder why javascript is so popular….and the simple answer would be, the coolest new features it offers to make the programmer’s life easier.

Since the release of ECMA Script 2015 (a.k.a ES6), there are a lot of cool features that were made available for programmers to get a lot of work done in fewer lines of code in a much cleaner and a concise way such as arrow functions, template literals, promises and many more to mention.

For this article, I have picked up one such awesome feature that is known as the “Destructuring Assignment”. Here, I will walk you through the basics of destructuring on arrays and discuss on how to use them in the simplest manner.

Why Destructuring

Destructuring assignment is the JavaScript expression that is used to obtain values from arrays and properties of objects and assign them into distinct variables without using the traditional methods. So before we start exploring this new method, let’s first refresh our memories on how we access values from arrays and objects in the traditional approach before ES6 came.

let letters=['a','b', 'c','d','e','f'];
let a=letters[0]; 
let b=letters[1];
let c=letters[2];
let d=letters[3];
let e=letters[4];
let f=letters[5];

This may not look tedious at a glance, but it will certainly be a headache when you have to make a sequence of variables using the values from the elements in the array.

Let’s say you want to assign all the elements in the array named “letters” into 6 distinct variables. You would probably have to write 6 lines of code just for this small task and here is when Destructuring Assignment comes for the rescue.

Basic Syntax of Array Destructuring

let letters=['a','b', 'c','d','e','f'];
let [a,b,c,d,e,f] = letters;

As shown in the above example instead of using 6 lines of code, using the deconstruction syntax, we can assign all 6 variables in one line. Elements in the array will be respectively mapped to the variables inside the square brackets. Let’s say we want to access only the first 3 elements and it can be achieved as follows.

let letters=['a','b', 'c','d','e','f'];
let [a,b,c] = letters;
//a='a' , b='b' ,c='c';

It is also possible to access elements in random positions. Let’s imagine we want to access array elements in index 0, 2 respectively, all we have to do is keep space between two commas instead of an identifier in the relevant position inside the square brackets just like in the example below.

let letters=['a','b', 'c','d','e','f'];
let [a,,b] = letters; //a='a' b='c'

We can also assign a set of consecutive elements in an array to a single variable with the help of the spread operator which is another cool feature that ES6 introduced.

Let’s say we want to assign an array of elements starting from the third element (index=2) to the rest of it, into a single variable.

let letters=['a','b', 'c','d','e','f'];
let [,,...rest] = letters;
console.log(rest)//[c,d,e,f]

It is also possible to access nested elements in an array using the method following.

let friends=['Joe',['Monica','Ross'], 'Rachel','Phoebe','Chandler'];
let [f1,[f2,f3],f4,f5,f6]= friends;
console.log(f2); //Monica

Destructuring Assignment can also be helpful to obtain the return values from a function that returns more than one value. Consider the following example.

function sumAndSub(a,b){
  return [a+b,b-a];
}
let [sum,sub]=sumAndSub(23,45); //sum=68, sub=22

We can also assign default values for the new variables in the deconstruction assignment process as shown in the example below. As a result, the variables that do not have a value to map in the array will be assigned with the default values.

function sumAndSub(a,b){
  return [a+b,b-a];
}
let [sum,sub,multi="No results found"]=sumAndSub(23,45);

 //sum=68,
 //sub=22 
 //mult="No results found"

In the above example even though there is a variable called “multi”, the function that was called upon only returns two values that are mapped to the first two variables. Therefore the default value will be applied to the variable “multi”.

Final Thoughts

JavaScript is a dominating programming language in which many software applications from different fields have been written. With the addition of new features in ES6, it has enabled programmers with various tools to write simple and cleaner code. Destructuring Assignment is one such great feature that can be useful in array manipulation and object manipulation. This article was focused on the array manipulation and I hope to bring more clarity on this topic with regard to object manipulation in the next article.

Thank you!