Forem: Ihechikara Vincent Abba

Destructuring in ES6

Ihechikara Vincent Abba — Fri, 13 Aug 2021 13:24:02 +0000

To destructure means to dismantle the structure of something. In Javascript, it could be an array, an object or a string whereby they are broken down individually and then reassigned to variables.
Destructuring Arrays
Prior to ES6, if you were to assign the values of an array to individual variables, it would be done like this:

var scores = [500, 400, 300];

var x = scores[0],
    y = scores[1],
    z = scores[2];

    console.log(x,y,z); // 500 400 300

But then ES6 came along. Let’s see how that changed things in the example below:

let scores = [500, 400, 300];

let [x, y, z] = scores;

console.log(x,y,z); //500 400 300

It’s easy to understand. We destructured the values of the scores array and created variables that would inherit the elements of the array in the order they were defined. So let x be the first element of the scores array which is 500, let y be the second element which is 400 and let z be the third element.

Note that [x, y, z] is not a new array.

In a case where we destructure an array and create more variables than the elements of the array, each variable that has no element to inherit returns undefined. Example below:

let scores = [500, 400, 300];

let [x, y, z, w] = scores;

console.log(x,y,z,w); //500 400 300 undefined

We added a new variable ‘w’ but since there was no element left for it to inherit from the destructured array, it returned as undefined.

A default value can be assigned to w as it has no element left to inherit, see example below:

let scores = [500, 400, 300];

let [x, y, z, w = 200] = scores;

console.log(x,y,z,w); //500 400 300 200

Skipping elements in the original array

In a situation where you would want to skip the order of inheritance and jump to a different element in the array, it is done by putting a comma at the position of the element to be skipped in the original array with white spaces between the commas. Have a look:

let scores = [500, 400, 300];

let [, x, y] = scores;

console.log(x, y); // 400 300

We skipped the first element in the array (500) and the started assigning from the second element.

Using Rest Parameter

It is assumed that you are already familiar with the Rest parameters and Spread syntax and how to use them.

let scores = [500, 400, 300];

let [x, ...y] = scores;

console.log(x); // 500

console.log(y); // [400, 300]

In the example above, x is assigned to the first element in the array and the “rest” of the elements are assigned to y using the rest parameter syntax “…” which returns an array containing the elements assigned to it.

Destructuring Objects

In the examples above, we were destructuring arrays. Now let us see how we can destructure objects starting with an example:

let scores = {
    pass: 70,
    avg: 50,
    fail: 30
};

let { pass, avg, fail} = scores;

console.log(pass, avg, fail); // 70 50 30

You can already see the differences — curly brackets and the fact that we used the object names as the variable names while destructuring; changing the names would return undefined but that doesn’t mean you are forced to use them. Let us see how you can override the object names:

let scores = {
    pass: 70,
    avg: 50,
    fail: 30
};

let { pass: one, avg: two, fail: three} = scores;

console.log(one, two, three); // 70 50 30

Now we have assigned new variable names that would override the default object names.

Destructuring Strings

let [user, interface] = 'UI';

console.log(user); // U

console.log(interface); // I

Here, the string “UI” is separated individually and assigned to the variables created. But what if we had more characters like “UI is important ” in the string? What would be the output? The output will remain the same as destructuring of strings is not done word after word but rather character after character so the ‘U’ character gets assigned first followed by the ‘I’ even though they are grouped together in the string.

That does it for this article. I hope that at this point, you have understood how destructuring works and would be comfortable using them as you progress as a developer. Thank you for reading. Happy coding!

ES6 Modules and Application

Ihechikara Vincent Abba — Sun, 01 Aug 2021 19:03:37 +0000

Modules in JavaScript have been around for quite a while but were originally implemented in libraries. An example would be how we can import a React component and make use of it in different components without the need to rewrite the function or class from scratch. Modules help us to avoid reinventing the wheel by writing the same logic twice. It also aids in the separation of concerns; you can have a separate module just for adding numbers or another for fetching data from an API. This way, you know exactly where everything belongs. Imagine if all of Google’s code was in one single file and every time the team had to fix something in the search bar, they had to scroll through a billion lines of code just to get to that particular section, wouldn’t that be hectic? Modules help us separate each functionality and thereby tackle each problem or scale-up certain functionalities individually.

Now here’s the good news (kinda old news), modules were introduced in vanilla JavaScript with the release of ECMAScript 2015, popularly known as ES6. The release came with a lot of features that took vanilla JS to a whole new level. These features included arrow functions, rest and spread, destructuring, classes, let and const, modules, etc. This article will focus only on modules and their application in vanilla JavaScript.

Application of ES6 Modules

To begin with, we’ll create our folder which will have our main script and modules. One module will be used for addition while the other will be used for subtraction.
This is what the folder structure looks like:

index.html
script.js
myModules/
add.js
sub.js

Some resources may use the .mjs extension to note module files but we’ll use a different approach by including type=”module” in our script tag. This is shown below:

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6 Modules</title>
</head>
<body>
    <script type="module" src="script.js"></script>
</body>
</html>

Now let’s create our functions — one for addition and the other for subtraction.

//add.js

function add(a, b){
    return a + b;
}

//sub.js

function sub(a, b){
    return a - b;
}

Export and Import

All we have done is create regular scripts with functions. How then can we use these functions in other scripts? This is done using the export and import keywords.
In other to access the functionality of a module, it has to be exported from where it was created and then imported into any file where it will be used.
Let us export our add.js:

//add.js

export function add(a, b){
    return a + b;
}

Now by adding the export before our function, it makes the script available for imports into other scripts where its function can be used.
The same process is done for sub.js:

//sub.js

export function sub(a, b){
    return a - b;
}

Now that we have exported our scripts, let us then import them into our main script and make use of them.

//script.js

import { add } from "./myModules/add.js";
import { sub } from "./myModules/sub.js"

console.log(add(6, 4)); // 10

console.log(sub(6, 4));  // 2

The syntax is pretty easy to understand. Start with the import keyword followed by the name of the function being imported which is nested inside curly brackets and then finally, the path from which the script was imported.
Notice how we used the add and sub-function without creating a function with new parameters from scratch? This is the power of ES6 modules, our script is now reusable from anywhere as long as it has been exported on creation and imported before use. These scripts can now be imported into any other script we wish to use them in. This also eliminates the use of multiple script tags in our HTML file by creating one script that acts as the entry point for all other scripts.
You can equally change the name of the function when importing to something different. For instance, you want to import the sub-function but you would rather call it ‘minus’. This can be done by adding “as” after the original name of the function while importing. Example below:

//script.js

import { sub as minus } from "./myModules/sub.js"

console.log(minus(6, 4));  // 2

Thank you for reading; I hope this article was worth your time. Follow me on Twitter @ihechikara2 My inbox is always open. See ya!