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. 
  1. var myArray = [ “array”,  “destructuring”,  “example”]      
  2. var firstValue = myArray[0];      
  3. var secondValue = myArray[1];      
  4. console.log(firstValue);      
  5. console.log(secondValue);     
Array Destructuring In JavaScript
 
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 and 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 that when we want to extract the data from an array, we need to do the same things again and again which is hectic for any developer. But yes, this can be made easier by using the destructuring assignment introduced by ES6.

Basic Destructuring

  1. var myArray = [ “array”,  “destructuring”,  “example”]    
  2. var [ firstValue, secondValue ] = myArray;    
  3. console.log(firstValue);    
  4. console.log(secondValue);   
 
Array Destructuring In JavaScript
 
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 for writing the same things again and again 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.
  1. var myArray = [ “array”,  “destructuring”,  “example”]    
  2. var [ firstValue, , thirdValue ] = myArray;    
  3. console.log(“firstValue: ”,  firstValue);    
  4. console.log(“thirdValue: ”, thirdValue);   
 
Array Destructuring In JavaScript
 
Yes, something interesting! We can also skip the first and last elements of the array.
  1. var myArray = [ “array”,  “destructuring”,  “example”]    
  2. var [ , secondValue , ] = myArray;    
  3. console.log(“secondValue: ”,  secondValue);   
 
Array Destructuring In JavaScript
 
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 for that.
 

Declaring variables

 
We can declare the variables first and then destructure the array element whichever we want to.
  1. var firstValue, thirdValue;    
  2. var [ firstValue , , thirdValue ] = [ “array”,  “destructuring”,  “example”]    
  3. console.log(“ firstValue”,  firstValue);    
  4. console.log(“thirdValue: ”,  thirdValue);   
 
Array Destructuring In JavaScript
 

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.
  1. var myArray = [ “array”,  “destructuring”,  “example”];    
  2. var [ firstValue , ...rest]  = myArray;    
  3. console.log(“ firstValue:  ”,  firstValue);    
  4. console.log(“ rest: ”,  rest);   
Array Destructuring In JavaScript
 
Here, we defined an array with three values. While extracting the values, we are using 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.
  1. var myArray = [ firstValue  = “array”,  secondValue = “destructuring”,  thirdValue = “example”] = [“c# corner” ];    
  2. console.log(“ firstValue:  ”,  firstValue);    
  3. console.log(“secondValue: ", secondValue);    
  4. console.log(“thirdValue: ", thirdValue);   
Array Destructuring In JavaScript
 
Here, we have modified the default value of the first element in the array by giving it some other value.
  1. var myArray = [ firstValue  = “array”,  secondValue = “destructuring”,  thirdValue = “example”] = [“c# corner” , , “article” ];    
  2. console.log(“ firstValue:  ”,  firstValue);    
  3. console.log(“secondValue: ", secondValue);    
  4. console.log(“thirdValue: ", thirdValue);   
Array Destructuring In JavaScript
 
Here, we have used two concepts together. We have skipped the second element and changed the default value of the element.
 

Using Prompt function

 
Array Destructuring In JavaScript
 
  1. var [ name = prompt(‘name?’),  type = (‘type?’) ] = [“Array destructuring” ];    
  2. console.log(name);    
  3. console.log(type);   
 
Array Destructuring In JavaScript
 
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.
 
If there are fewer values in the array than variables in the assignment, there will be no error. Absent values are considered undefined.