Today, we can’t imagine the Internet without Javascript, and some websites are built almost entirely in Javascript. To make Javascript more modular, concise, and maintainable, ES6 introduces a way to easily share code between Javascript files. This involves using a module to export part of a file for use by one or more other files, and importing the required parts where needed.

In this article, you’ll learn about ES6 modules in Javascript with some simple and useful examples.

What is the ES6 module?

Modules allow us to split the code base into multiple files to improve maintainability and avoid putting all the code into one large file.

To do this, you need to create a script using a module type in your HTML document.

The following code looks like this:

<script type="module" src="devpoint.js"></script>
Copy the code

Scripts imported with this type=”module” can use import and export functions.

export / import

To organize codes with modules, the purpose is to improve the reuse of codes. The codes of modules are exposed through export and can be referenced through import.

Suppose you have a code block in a file named index.js, and you want to use that particular code block in multiple different files. You can do this by exporting the code block and then importing it into another file.

Take a look at the following example, where the multiple and add functions are exported:

export const multiply = (x, y) => {
    return x * y;
};

export const add = (x, y) => {
    return x + y;
};
Copy the code

The same requirement can be achieved with the following example:

const multiply = (x, y) => {
    return x * y;
};
const add = (x, y) => {
    return x + y;
};

export { multiply, add };
Copy the code

There’s not much difference in how you organize your code, and I prefer the second code style. Of course, the derivation does not have to be a function, variables can also be. Here is an example of imported code:

import { multiply, add } from "./index";

console.log(multiply(1, 2));
console.log(add(1, 2));
Copy the code

If there are many methods that need to be introduced, it is not necessary to write every method. You can make a unified entry by using the following method:

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

console.log(mathHelper.multiply(1, 2));
console.log(mathHelper.add(1, 2));
Copy the code

export default

Export Default can only be used when exporting a value or function from a file. Let’s change the above code slightly:

Multiply (x, y) {return x * y; multiply(x, y) {return x * y; } // export default function (x, y) {return x * y; }Copy the code

Simply use import to import the above functions as follows:

import multiply from "./index.js";
console.log(multiply(1, 2));
Copy the code

From the above we can see the difference. The function multiply defined by export default imported does not need curly braces {}. No matter what export default is in the file index.js, multiply is just a function name or variable name. Import the export default definition, and you can use any name when importing. The following is also true:

import multiplyHelper from "./index.js";
console.log(multiplyHelper(1, 2));
Copy the code

Export default is different from export

  • exportwithexport defaultCan be used to export constants, functions, files, modules, etc
  • In a file or module,export/importYou can have more than one,export defaultThere can only be one
  • throughexportA module that is exported in the{}; whileexport defaultYou do not need curly braces

conclusion

The ES6 module in Javascript allows you to export and import Javascript code into different files, which helps break code down into smaller, granular files, increasing code reusability, reducing code redundancy, and making code simpler.