Destructuring Assignment With JavaScript Arrays

Destructuring Assignment is one of the powerful methods of JavaScript Language. To make our code more readable, concise and to avoid having to use multiple indexes to access the elements of an array then we can use destructuring assignments. Here we can learn destructuring method and rest operator by using JavaScript Arrays. We can use destructuring assignment with objects also but here we can practice this method only with arrays. If you want to practice this method with objects then comment below. I have created other posts about that.

Now, let's get started!...

An array is a single variable that store multiple elements. We can declare an array in two different ways which are :

     const tutorial1 = ["JavaScript", "Python", "C++"];

     console .log("Here We Learn :", tutorial1);

    // Output :

    // Here We Learn : ["JavaScript", "Python", "C++"]

and

    const tutorials2 = [ ];

    tutorials2[0] = "MySQL";

    tutorials2[1] = "MongoDB";

    tutorials2[2] = "PostgreSQL";

    console.log("After that :", tutorials2);




    // Output :


    // After that : ["MySQL", "MongoDB", "PostgreSQL"];


Now we can see how destructuring assignment method is use with JavaScript Arrays.

    let firstLanguage, secLanguage, afterWeCome;

    [firstLanguage, SecLanguage] = ["JavaScript", "Python", "C++", "MySQL", "MongoDB", "PostgreSQL"];

    console.log(firstLanguage);

    console.log(secLanguage);

    [firstLanguage, secLanguage, ...afterWeCome] = ["JavaScript", "Python", "C++", "MySQL", "MongoDB", "PostgreSQL"];

    console.log("After We Come On To :", afterWeCome);

    // Output :

    // JavaScript

    // Python
    // After We Come On To : [ 'C++', "MySQL', 'MongoDB', 'PostgreSQL' ]

In the above example we created three variables such as firstLanguage, secLanguage and afterWeCome. In the second line we can assign two array elements to the variables firstLanguage and secLanguage. Now console.log the variables firstLanguage and secLanguage and check the output. After console.log we again assign the two array elements to the firstLanguage, secLanguage and rest of the array elements assigned to the variable afterWeCome by using rest operator. Rest(…) operator stores the rest of the elements in the form of an array. We also use the console.log on afterWeCome variable.

MDN documentation says that "The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables".

So, what does it mean distinct variables? It basically means that you can save the elements of arrays or properties of objects in specific variables.

Now, let's take another example here we have an array of rainbow colors but we want to get just the first 2 colors in the array. We can use destructuring to get what we want.

Let's take a look at it now:

    const rainbowColors = ["Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Voilet"];

    const [first, second] = rainbowColors;

    console.log("First Element : ", first);

    console.log("Second Element : ", second);

    console.log("Original Array :", rainbowColors);

    // Output :
    // First Element : Red
    // Second Element : Orange
    // Original Array : ["Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Voilet"]

 

Let's say we have an array of numbers, and we want to create a new array with all the even numbers. We can use destructuring assignment to create the new array in a single line of code :

    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


    const evenNumbers = () => {
         const en = [];
         numbers.forEach((e) => {
             if (e % 2 == 0) {
                 en.push(e);
             }
         });
         console.log(en);
    };

    evenNumbers();

    // Output : 

    // [ 2, 4, 6, 8, 10 ]

In above example we defines a function called evenNumbers() that takes an array of numbers as input and returns an array of all the even numbers in the input array.

The first line declares const called numbers and assigns it assign it an array of numbers. The second line decalres another const called evenNumbers() and assign it a function. The function has the parameter "e" which is called the current element in the numbers array. The function body has the following steps :

• Create an empty array called en.
• Iterate over the numbers array, one element at a time.
• For each element, check if the element is even.
• If the element is even, add it to the en array.
• After the loop, print the en array.

The last line calls the evenNumbers() function.

So coders, that's it for this post. Follow me on LinkedIn for more post like this. Link is here. If you have any question then do comment below. See you in the next post with another method of JavaScript array.