Destructuring Arrays in Javascript

It is a common thing to assign values of an array to different variables, like below :

var arr = [1, 2, 3];

// 3 statements are required to assign values
var a = arr[0];
var b = arr[1];
var c = arr[2];

// 1
console.log(a);

// 2
console.log(b);

// 3
console.log(c);

Noticing that such assignments were very commonly used, ES6 introduced the destructuring operator for arrays and objects. This helps to assign values to variable from an array (or object), in a shorter syntax.

Structuring, in the english language basically means "creating a structure from various parts". In the same way destructuring means "breaking the structure and getting individual parts".

The same code is re-written using destructuring assignment :

var arr = [1, 2, 3];

// single statement is required to assign values for all
var [a, b, c] = arr;

// 1
console.log(a);

// 2
console.log(b);

// 3
console.log(c);

The syntax may be confusing in the beginning, but it should become easy with use.

We will now discuss various forms in which an array can be destructured.

Assigning Values to Variables

In the most simple case, we can assign variable values from array elements.

// variables declared
var a, b;

var arr = [10, 20];

// variables assigned values
[a, b] = arr;

// 10
console.log(a);

// 20
console.log(b);

It does not matter if the array's length is not equal to the variables to be defined. Array values will be passed from the first element.

// 2 variables to be assigned values
var a, b;

// 3 elements in array
var arr = [10, 20, 30];

// variables assigned values
[a, b] = arr;

// 10
console.log(a);

// 20
console.log(b);

However in some cases we would want to skip over some values in the array. For example we just want the first and third elements in the array. This can be done by placing comma , at proper positions.

var a, b, c;

var arr = [10, 20, 30];

// skip second element in array
[a, , b] = arr;

// skip first and second element in array
[, , c] = arr;

// 10
console.log(a);

// 20
console.log(b);

// 30
console.log(c);

Declaring Variables with Assignment

It is not required to declare the variable first and then use destructuring. We can declare variables and assign values at the same time.

var arr = [10, 20];

// variables declared and assigned values
var [a, b] = arr;

// 10
console.log(a);

// 20
console.log(b);

Assigning Default Values if Array Values are Undefined

Sometimes it may be the case that the array may be empty, or specific elements in the array may not exist. In this case we can assign default values to variables.

var arr = [];

var [a=1, b=2] = arr;

// 1
console.log(a);

// 2
console.log(b);

var a, b, c;

var arr = [5, 10];

[a=1, b=2, c=3] = arr;

// 5
console.log(a);

// 10
console.log(b);

// 3
console.log(c);

Assigning Remaining Values of Input Array to a Variable

We can use the rest pattern ... to capture trailing elements of the input array to a separate variable. This variable would hold an array.

var a, b, c;

var arr = [5, 10, 15, 20, 25];

// capture elements starting from third position into an array 
[a, b, ...c] = arr;

// 5
console.log(a);

// 10
console.log(b);

// [15, 20, 25]
console.log(c);

Multiple Levels of Destructuring

Sometimes the input array may contain array as an element. We can use the destructuring assignement in the same way, going deeper.

var a, b, c;

// third position holds an array
var arr = [5, 10, [15, 20], 25];

// take first and second element of input
// skip second element of the array present in third position of input
[a, b, [, c]] = arr;

// 5
console.log(a);

// 10
console.log(b);

// 20
console.log(c);

Conclusion

The destructuring operator is a bit intimidating at first, and readability of code may become a bit difficult.

However it indeed cuts down the amount of code to write. Javascript code is growing bigger day by day, and destructuring was a required feature. The future Javascript code will heavily use destructuring and other ES6 features, so it is better to start using this in our code now.