JavaScript ES6 Modules Explained With Examples
By: Mehdi Aoussiad
Tags: Javascript Tips, Coding, JavaScript, Web Development, Programming

JavaScript ES6 Modules Explained With Examples

Photo by Arnold Francisca on Unsplash

Introduction

Nowadays, we can’t imagine the web without JavaScript. Some websites are built almost entirely with this amazing language. In order to make JavaScript more modular, clean, and maintainable, ES6 introduced a way to easily share code among JavaScript files. This involves using modules to export parts of a file for use in one or more other files and import the parts you need, where you need them.

In this article, we will learn about ES6 modules in JavaScript with some practical examples. Let’s get right into it.

What are the ES6 modules?

Modules let us split our codebase into multiple files for more maintainability and this lets us avoid putting all of our code in one big file.

In order to take advantage of this functionality, you need to create a script in your HTML document with a type of module .

Here is an example:

<script type="module" src="filename.js"></script>

A script that uses this module type can now use the import and export features.

Use export to share a code block

Let’s say you have a block of code in a file called index.js for example and you want to use that specific block of code in several different files. You can achieve that by exporting that block of code, then importing it to other files.

Have a look at the example below where we exported the function multiply :

export const multiply = (x, y) => {

return x * y;

}

You can also achieve the same thing with the example below:

const multiply = (x, y) => {

return x * y;

}



export { multiply };

When you export a variable or function, you can import it into another file and use it without having to rewrite the code. You can export multiple things by repeating the first example for each thing you want to export, or by placing them all in the export statement of the second example, like this:

export { multiply, add };

Reuse JavaScript code using import

Let’s say you want to import the multiply function from the file index.js to another file called app.js in order to use it. You can achieve that by writing the code below in the file app.js :

import { multiply } from './index.js';

Now you can use and call the function multiply in the file app.js without writing the code for it.

Suppose you have a file and you wish to import all of its contents into the current file. This can be done with the import * as syntax.

Here is an example where all the content of the file index.js is imported into a file in the same directory:

import * as myMathModule from "./index.js";

The above statement will create an object called myMathModule . This is just a variable name, you can name it anything. So now you can access the functions inside the file as you would do with any other object property.

Here’s how you can use the multiply function inside the file by accessing myMathModule :

myMathModule.add(2,3);

Export default

You can use the export default only if one value or one function is being exported from a file.

Here is an example:

// named function

export default function multiply(x, y) {

return x * y;

}



// anonymous function

export default function(x, y) {

return x * y;

}

Import a default export

You can import a default export by simply using import syntax.

Here is an example of importing a default export from the file index.js :

import multiply from "./index.js";

As you can see above, multiply is not surrounded by curly braces {} . multiply here is simply a variable name for whatever the default export of the file index.js is. You can use any name here when importing a default export.

Conclusion

As you can see, ES6 modules in JavaScript allow you to export and import your JavaScript code in different files. This is useful to break up your code into smaller grained files which saves time and makes your code cleaner.

Thank you for reading this article, I hope you found it useful. If so, get more similar content by subscribing to our YouTube channel!

More Reading