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

javascript Share on :

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

Search Index Data (The code snippet can also be found with below search text)

Array destructuring in Javascript(ES6)
Extract values or properties from an array in Javascript(ES6)

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.

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets

Create your own code snippets and search them using our portal and chrome extension

Programming Feeds

Learn something new everyday on Devsheet

Important Links

Join Devsheet Create new snippet Ask a Question Write an article Online JSON Viewer