Array Destructuring In JavaScript

Introduction

This is just a new syntax introduced in JavaScript. Destructuring expression lets us extract the values from the most used data structures in JavaScript, namely, objects and arrays. We can unpack the values from the array or various properties of an object into variables.

Let's take an example of how we used the values from an array before the introduction of array destructuring. 

var myArray = [ “array”,  “destructuring”,  “example”]      
var firstValue = myArray[0];      
var secondValue = myArray[1];      
console.log(firstValue);      
console.log(secondValue); 

This is how we used to get the values from an array. We used the index of the element and saved it in a variable to use it further.

Here, the values of the array "myArray" are first assigned to the variables individually by accessing the index of the element in the array. Then, those variables are further used for printing the values in the console.

"Destructuring doesn't mean destructing the arrays".

It is simply the shorter way of writing the same things. It helps us to store the values of the array in a variable without modifying the values of an array.

Now, let's get started with the new expression introduced in ES6 – Object/ Array Destructuring.

Array Destructuring

As we have seen, when we want to extract data from an array, we need to do the same things repeatedly, which is hectic for any developer. But yes, this can be made easier by using the destructuring assignment introduced by ES6.

Basic Destructuring 

var myArray = [ “array”,  “destructuring”,  “example”]    
var [ firstValue, secondValue ] = myArray;    
console.log(firstValue);    
console.log(secondValue);  

Here, we first declare an array and then assign that array to the destructured values, as shown above. Those values are then printed in Console. This concept removes the need to repeatedly write the same things, as we saw in the first example.

Skip some elements

It is not necessary that we need to extract all the values from the array if we want to use some of them. We can skip the unnecessary element of the array.

var myArray = [ “array”,  “destructuring”,  “example”]    
var [ firstValue, , thirdValue ] = myArray;    
console.log(“firstValue: ”,  firstValue);    
console.log(“thirdValue: ”, thirdValue);  

Yes, something interesting! We can also skip the first and last elements of the array.

var myArray = [ “array”,  “destructuring”,  “example”]    
var [ , secondValue , ] = myArray;    
console.log(“secondValue: ”,  secondValue);   

It is simple. We need to add the comma for the elements we want to skip. In the above example, we skipped the second element of the array by adding an extra comma.

Declaring variables

We can declare the variables first and then destructure the array element, whichever we want to.

var firstValue, thirdValue;    
var [ firstValue , , thirdValue ] = [ “array”,  “destructuring”,  “example”]    
console.log(“ firstValue”,  firstValue);    
console.log(“thirdValue: ”,  thirdValue);   

The rest "..."

Surprisingly, yes. We can also assign more than one element to a single variable. We can use "…" to assign all the elements to a single variable. We can add an extra variable with three dots which gathers all the following elements in the variable.

var myArray = [ “array”,  “destructuring”,  “example”];    
var [ firstValue , ...rest]  = myArray;    
console.log(“ firstValue:  ”,  firstValue);    
console.log(“ rest: ”,  rest);  

Here, we defined an array with three values. While extracting the values, we use the "..." operator, which returns the array of the rest of the elements. Yes, you read it right. The rest of the variable will have the rest of the values in the form of an array.

Using default values

We can alter the default values assigned to the elements of the array.

var myArray = [ firstValue  = “array”,  secondValue = “destructuring”,  thirdValue = “example”] = [“c# corner” ];    
console.log(“ firstValue:  ”,  firstValue);    
console.log(“secondValue: ", secondValue);    
console.log(“thirdValue: ", thirdValue);   

Here, we have modified the default value of the first element in the array by giving it some other value.

var myArray = [ firstValue  = “array”,  secondValue = “destructuring”,  thirdValue = “example”] = [“c# corner” , , “article” ];    
console.log(“ firstValue:  ”,  firstValue);    
console.log(“secondValue: ", secondValue);    
console.log(“thirdValue: ", thirdValue);   

Here, we have used two concepts together. We skipped the second element and changed the default value of the element.

Using Prompt function

var [ name = prompt(‘name?’),  type = (‘type?’) ] = [“Array destructuring” ];    
console.log(name);    
console.log(type);   

Here, we used the prompt function for two defaults. A prompt will appear asking for the missing value. It will run only for the missing one.

Summary

Destructuring is helpful when the property names and variable names are the same.

There will be no error if there are fewer values in the array than variables in the assignment. Missing values are considered undefined.