Assign items of arrays to multiple variable when creating it (Array Destructuring) Javascript(ES6)

Before ECMAScript 6 we got the array values using its index but using ES6 you can extract values from the array and assign them to variables when creating the array.

//First code example
const [value_1, value_2, value_3] = ["item_1", "item_2", "item_3"]
console.log(value_1);
console.log(value_2);
console.log(value_3);

//Second code example
const [fruits, vegetables] = [
    [{"name": "Orange"}, {"name": "Grapes"}, {"name": "Banana"}],
    [{ "name": "Potato" }, { "name": "Onion" }, { "name": "Lady fingers" }]
];
console.log(fruits);
console.log(vegetables);

In the code snippet, we have created an array that consists of three items and we want to extract these items and assign them to three variables while creating it.

In the second code example, we have an array that consists of two items. The first item has the different objects of fruits and the second item has different objects of vegetables. So when creating it we want to assign fruits array and vegetable array to the different variables. Before ES6 we used to do that by using array indexes as below

const fruits_vegetables = [
    [{"name": "Orange"}, {"name": "Grapes"}, {"name": "Banana"}],
    [{ "name": "Potato" }, { "name": "Onion" }, { "name": "Lady fingers" }]
];

const fruits = fruits_vegetables[0];
const vegetables = fruits_vegetables[0]

But using ES6 we can do that while creating our array as shown in the code snippet. It is also called Array Destructuring where we extract multiple array values.

Live Demo

Example 1: Create array with new Array and assign its values

const [score, subject, chapter] = [
    90,
    {"name": "Math", "code": "M01"},
    "Arithmetic"
];

console.log(score);
console.log(subject);
console.log(chapter);

Here we have an array that contains the score, subject information and chapter information. We can assign them to the respective variables when creating it. You can see a live demo of above code here

Example 2: Extract properties from array using array destructuring

let [a, b, c, d] = ["a", "b", "c", "d"];

//the above code is equivalent to
const data = ["a", "b", "c", "d"];
a = data[0];
b = data[1];
c = data[2];
d = data[3];

The destructuring of Array is equivalent to creating variables and assign array items using its index.

Assigning a default value to variable if not in array

const [data_1, data_2 = 'item_2'] = ['item_1'];

console.log(data_1);
console.log(data_2);

Here we have only one item in our array and we are using two variables to assign the values. Our first variable will be filled using the first element of the array. For the second variable, we have assigned a default value as there is no second value in array.

Skipping a value from array while assigning to variables

const [data_1, ,data_2] = ['value_1', 'value_2', 'value_3'];

console.log(data_1); // -> 'value_1'
console.log(data_2); // -> 'value_3'

While assigning array values to variables there may be a case where you want to skip some items or values to be assigned to any variable. We can use blank value there trail with comma.

Was this helpful?