What is Array Destructuring in JavaScript?

Array destructuring allows you to extract array elements to distinct variables. Array destructuring and object destructuring were introduced in ES6. Before array destructuring comes into existence, you use square brackets to access array elements. Let's see this old-age method of accessing array element and check out how array destructuring will make it easy for you to extract array elements.

Suppose you have an array that stores the first quarter sales records.

let salesRecords = [12000, 6832, 10361];

To get individual sales record, you use square brackets to access them:

let januarySalesRecord = salesRecords[0],
    februarySalesRecord = salesRecords[1],
    marchSalesRecord = salesRecords[2];

Using array destructuring, you can directly access the elements of an array in a short and concise manner.

let [januarySalesRecord, februarySalesRecord, marchSalesRecord] = salesRecords;

Array destructuring has the following form:

let [variable1, variable2, ..., variablen] = array;

In array destructuring, the righthand side of the equals sign is an array. On the left-hand side, you specify variables using array literals notation.

Here, variable1, variable2, and others represent the variables to which you wish to assign the value of array elements.

Based on the number of variables on the left-hand side, there are three situations that you will face while using array destructuring:

1. When the number of variables on the left-hand side of the destructuring assignment is equal to the array elements. In this case, one to one mapping of array elements to the variables on the left-hand side.

let firstQuarterSales = [10000, 9243, 13287];
let [January, February, March] = firstQuarterSales;

The above code is equivalent to the following code:

let January = firstQuarterSales[0],
	February = firstQuarterSales[1],
	March = firstQuarterSales[2];

2. When the number of variables on the left-hand side is less than the array elements, extra elements of the array are ignored.

let firstQuarterSales = [10000, 9243, 13287];
let [January, February] = firstQuarterSales;

The above code is equivalent to the following code:

let January = firstQuarterSales[0],
	February = firstQuarterSales[1];

You can see that the March month sales record is ignored.

3. When the number of variables on the left-hand side is more than the array elements, extra variables on the left side are set to undefined.

let firstQuarterSales = [10000, 9243, 13287];
let [January, February, March, April, May] = firstQuarterSales;
console.log(April); //undefined
console.log(May); //undefined

The above code is equivalent to the following code:

let January = firstQuarterSales[0],
	February = firstQuarterSales[1],
	March = firstQuarterSales[2],
	April, May;

Rest operator in array destructuring

In the second situation, you have seen that extra array elements are ignored. Instead of ignoring them, you can store the remaining elements of an array in a separate new array using the rest operator.

let salesRecords = [12000, 6832, 10361, 10000, 9243, 13287];
let [January, February, March, ...secondQuarter] = salesRecords;
console.log(January); //12000
console.log(February); //6832
console.log(March); //10361
console.log(secondQuarter); //[10000, 9243, 13287]

In this example, the first quarter sales records are destructured to three different variables, January, February and March. And the second-quarter sales are stored in a new array, secondQuarter.

How to set default values in array destructuring?

If you are unsure about the number of elements in an array and avoid setting undefined value to the extra variables of the left side, use the default value.

let firstQuarterSales = [10000, 9243, 13287];
let [January, February, March, April=0] = firstQuarterSales;
console.log(April); //0

How to do nested array destructuring?

To perform nested array destructuring, you have to follow the structure of an array whose elements you wish to extract.

let iPhoneSpecs = [
  'Apple iPhone 12',
  162,
  [146.7, 71.5, 7.4]
];
let [pdtName, weight, [height, width, depth]] = iPhoneSpecs;
console.log(pdtName); //"Apple iPhone 12"
console.log(weight); //162
console.log(height); //146.7
console.log(width); //71.5
console.log(depth); //7.4

What are the applications of array destructuring?

In JavaScript, you can use array destructuring in two scenarios.

1. Array destructuring allows you to swap variables easily without using a third variable or a temporary variable.

let x = 15,
    y = 20;

[y, x] = [x, y];
console.log(x); //20
console.log(y); //15

2. When a function returns multiple values in the form of an array, you can destructure the returned array using array destructuring.

function getSalesRecord(){
  return [10000, 9243, 13287];
}
let [January, February, March] = getSalesRecord();
console.log(January); //10000
console.log(February); //9243
console.log(March); //13287