JavaScript – Destructuring Array

Destructuring in JavaScript is a simplified way to unpack arrays or properties from objects into a bunch of distinct variables.

The destructuring feature in JavaScript was added in ES6 version.

Previously, In array each item/element arranged in some index. So, when you have to access an array element, you have to pass index value. Please have a look at the below example.

let introduction = ["Hello", "Peter"];
let greeting = introduction[0];
let name = introduction[1];

document.write(greeting);
document.write(name);

#Output
Hello
Peter

Here you see that, in order to access each element from an array, you have to assign to a variable and have to do the same thing over and over again.

Let us try the same example by destructuring.

let introduction = ["Hello", "Peter"];
let [greeting, name] = introduction;

document.write(greeting);
document.write(name);

#Output
Hello
Peter

In the above example, the left hand side variables are for assigning values unpacked from the destructuring.

We can also do the above example as below with the same result:

let [greeting, name] = ["Hello", "Peter"];

document.write(greeting);
document.write(name);

#Output
Hello
Peter

Declaring Variables before Assignment: You can declare the variables before assignment of destructuring elements.

let greeting, name;
[greeting, name] = ["Hello", "Peter"];

document.write(greeting);
document.write(name);

#Output
Hello
Peter

Skipping Items in an Array

If you want to get only the first and last item of an array, then you will have to skip the whichever items comes in-between of first and last item.

let greeting, name;
[greeting,,,,,name] = ["Hello", "I", "am", "your", "classmate", "Peter"];

document.write(greeting);
document.write(name);

#Output
Hello
Peter

In the above example, we have used multiple comma(,). If you want to skip an item, we have to put a comma in place of that item. So, in order to skip 4 items, we have put 4 commas.

Accessing the rest of all items from an array

In order to assign some items to variable and rest of the variables into a single variable, we should to use rest operator(…) in array destructuring.

let greeting, name;
[greeting,...name] = ["Hello", "I", "am", "your", "classmate", "Peter"];

document.write(greeting);
document.write(name);

#Output
Hello
I,am,your,classmate,Peter

Destructuring Assignment with Function returns

You can also unpack data of returned array from a function.

function get_array()
{
    return ["Hello", "Peter"];
}

let [greeting,name] = get_array();

document.write(greeting);
document.write(name);

#Output
Hello
Peter

Array destructuring and Default values

Default values is very useful when we are unpacking array and assigning to left variables when the array values is undefined. Then the default values are used in place of undefined.

let greeting, name;
[greeting='hello',name='Peter'] = ["Hi, Dear"];

document.write(greeting);
document.write(name);

#Output
Hi, Dear
Peter

Swapping Values using the Destructuring Assignment

Using destructuring feature, we can even swap the values of variable.

let a = 10;
let b = 20;

[a,b] = [b,a];

document.write(a);
document.write(b);

#Output
20
10

Share on Facebook

Tweet

Follow us

Save