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:
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];
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.
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;
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
.
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
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
In JavaScript, you can use array destructuring in two scenarios.
let x = 15, y = 20; [y, x] = [x, y]; console.log(x); //20 console.log(y); //15
function getSalesRecord(){ return [10000, 9243, 13287]; } let [January, February, March] = getSalesRecord(); console.log(January); //10000 console.log(February); //9243 console.log(March); //13287