Javascript ES6 Array Destructuring - Understand it the easiest way...

If you find this post useful, you should probably find my other contents useful too, consider following me on Twitter to read more of my content.

Before ES6, the syntax used to declare variables was the use of the var keyword followed by the name of the variable, the assignment operator and then the value that should be stored in the variable.

There was little to no complaints about this as there were no alternatives. To declare multiple variables, one could either declare each variable individually or use one var keyword followed by all the declarations each separated by a comma.

// Declare a single variable before ES6
var someVariable = "Some Value";

// Declare multiple variables
var multipleVariables1 = "Value 1";
var multipleVariables2 = "Value 2";
var multipleVariables3 = "Value 3";

// Or
var multipleVariable1 = "Value 1",
    multipleVariable2 = "Value 2",
    multipleVariable3 = "Value 3";

With the introduction of ES6; a newer version of JavaScript, there was more than just the var keyword to declare variables. It introduced the let and const keywords alongside the existing var keyword to declare variables.

// Using let for variable declaration
let str1 = "Some String";

// Using const for variable declaration
const str2 = "Some String";

Basically, the array destructuring feature was also introduced in ES6. It made the declaration of multiple variables even much easier.

What is Array Destructuring?

Array destructuring is the process of unpacking values from an array into individual variables. Before ES6, unpacking values from arrays into individual variables required some efforts. Each value of the array has to be accessed through it's index in the array and then included in the declaration of the variable it's being assigned to.

// Before ES6
var arr = ["string1", "string2", "string3"];
var str1 = arr[0], str2 = arr[1], str3 = arr[2];

console.log("str1::> " + str1); // "string1"
console.log("str2::> " + str2); // "string2"
console.log("str3::> " + str3); // "string3"

With the introduction of ES6, unpacking values from an array became relatively easier. The syntax is also very simple to understand and implement. To do it in ES6, the array whose values are to be assigned to individual variables is assigned as a value to another array containing the name of the individual variables. Let's do a similar thing in ES6…

// Using array destructuring in ES6
let arr_2 = ["string-1", "string-2", "string-3"];
let [str_1, str_2, str_3] = arr_2;

console.log("str_1::> " + str_1); // "string-1"
console.log("str_2::> " + str_2); // "string-2"
console.log("str_3::> " + str_3); // "string-3"

In the above example, the values in the array arr_2 were unpacked into str_1, str_2 and str_3 respectively. Therefore the first value in the array arr_2 becomes the value of the variable str_1 because it is the first variable name in the array containing variable names. Also, the second value in the array arr_2 becomes the value of the variable str_2 and so on. I think it's shown that the ES6 syntax is clearer, more concise and shorter than the previous syntax. That's the beauty of ES6. There are a couple of tweaks that can be applied to the ES6 array destructuring syntax to expand its usage and functionality. See image below for a simple illustration of array destructuring...

Note:: The numbers at the end of variable names do not matter. You can name the variable whatever you want.

Using spaces between the array

In the example above, all values were unpacked directly into individual variables. The number of variables that were assigned values is the same as the number of values unpacked from the array containing the strings.

This is usually the use case for the array destructuring syntax but there are times when just a part of the array needs to be unpacked into variables. To do this, the syntax allows for free spaces in the array containing the names of the individual variables to be assigned certain values from another array. Of course you don't want to declare a variable you won't be using in your script, so this can get quite useful in certain conditions.

// Destructuring - unpacking parts of the value
let [var1, , var3] = ["my var 1", "my var 2", "my var 3"];

console.log("var1::> " + var1); // "my var 1"
console.log("var3::> " + var3); // "my var 3"

In the example, the array containing the strings (after the = operator) has 3 different values. The array containing the variable names contains 2 variable names but it also contains a space between the first and the second comma (no variable name was specified between the two commas). This space represents a value to be skipped from the array containing strings when unpacking it and assigning its values to the variables.

Therefore, the first value in the second array becomes the value of the variable var1. The second value in the array containing strings (on the right side) is not assigned to any variable because a space was specified. The third value in the array containing strings becomes the value of the variable var3 because var3 is at the third position in the array containing it.

Note:: The numbers at the end of variable names do not matter. You can name the variable whatever you want.

Declare the variables before assigning values to them by destructuring

Another thing you could do is to declare the variables in a statement and then assign values to them in another statement by destructuring an array. It works the same way as declaring and assigning via one JavaScript statement.

// Define variables then assign values
let var_1, var_2, var_3;
[var_1, var_2, var_3] = ["Var-1", "Var-2", "Var-3"];

console.log("var_1::> " + var_1); // "Var-1"
console.log("var_2::> " + var_2); // "Var-2"
console.log("var_3::> " + var_3); // "Var-3"

In the example above, the first value in the array containing strings becomes the value of the variable var_1 and so on.

Note:: You can play around with the code to see possible outcomes.

Defining default values

Another tweak that can be made to the array destructuring syntax is the application of default values to the individual variables. These values are assigned to the variable the same way they'll be assigned if the variable was declared separately in a statement. Let's take a look at an example

// Defining fallback VALUES
let myVar1, myVar2 = "New-2", myVar3;
[myVar1, myVar2, myVar3 = "New-3"] = ["New-1"];

console.log("myVar1::> " + myVar1); // "New-1"
console.log("myVar2::> " + myVar2); //  Undefined - Overwrites previous "New-2"
console.log("myVar3::> " + myVar3); // "New-3"

Let's take a look at what's going on in the code.

The variable myVar1 is declared alongside myVar2 and myVar3. On line 3, an array is destructured. Notice that the array on the right side contains just one variable and the array on the left side(containing variable names) contains 3 variable names. myVar1 = "New-1" because myVar1 takes the value in it's corresponding position in the array on the right side (containing the string) which is the first position.

Then...

1. On line 2, myVar2 = "New-2" but the value was overwritten on line-3 because myVar2 tries to find the value in it's corresponding position in the other array (array containing the string) which is the second position. Since there is no value in the second position in the other array, myVar2 becomes undefined.
2. There is no third value in the array in the right side. So myVar3 is supposed to be undefined too. But because it was assigned a value in the array destructuring syntax, it automatically stores that value instead of undefined. The value assigned to it in the array destructuring syntax is known as the default value or fallback value.

We can therefore say that the default value is the value that'll be stored in the variable if there's no value in the corresponding position of the array to be unpacked.

I hope that explains the concept of array destructuring in ES6. You can read a shorter version of this article on twitter...

If you'll like to read about object destructuring, consider this article .

If you like this post, you'll probably like to read my contents on Twitter. So kindly follow me on Twitter. You can also follow me if you are a member of hashnode @abdulramonjemil.

Also, consider subscribing to my newsletter to get a message whenever I post another content here on my blog. Thanks a lot in advance.