June 26, 2020

How to Destructure an Array in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to destructure an array in javascript. Array destructuring is the process of extracting elements from an array and assigning them to the variables of your choice with a single statement. Array destructuring simply saves you from writing extra lines of code.

Without array destructuring, your code will become lengthy and hard to maintain because you will have a bunch of variable assignments all over your code file. In this example, we are only going to cover a very basic process of array destructuring. Maybe soon, I will write a complete tutorial about array destructuring.

In the following example, we have an array and upon click of a button, we will destructure it, form a template string, and display that on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, button, and h1). The div element is just a wrapper for the rest of the elements.

The button element has “Get” and the h1 element has “Result” as innerText.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <button>Get</button>
        <h1>Result</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected the button element and h1 element using the document.querySelector() method and stored them in btnGet and result variables respectively.
We have attached a click event listener to the button element.

In the event handler function, we have users variable which holds an array of strings.
On the left-hand side, we have [a,b,c, ...d] and on the right-hand side, we have users variable. This is a syntax for array destructuring. You have to wrap your left-hand side code with square brackets and keep your actual array on the right-hand side.
Now that being said, let’s try to understand what is happening here. a, b, and c are nothing more than variables. …d is also a variable and you can see it’s preceded by 3 dots (…). These 3 dots represent the rest operator.

Arrays have 0 based index and our array holds 6 values. This means a, b, and c variables will hold strings “James”, “Peter”, and “Marks” respectively.
In case of …d variable, which has our rest operator, will hold the rest of the items ['Mary', 'Jane', 'John'] as an array.
After destructuring, we are simply creating a template string and displaying that in the h1 element using the innerText property.

let btnGet = document.querySelector('button');
let result = document.querySelector('h1');

btnGet.addEventListener('click', () => {
    let users = ['James', 'Peter', 'Marks', 'Mary', 'Jane', 'John'];

    let [a,b,c, ...d] = users;

    console.log(d);
    result.innerText = `a: ${a} - b: ${b} - c: ${c} - d: ${d}`;
});

You May Also Like: