ES Modules in JavaScript

Let’s talk about ES Modules and how can we use those in JS application. Maybe you familiar with CommonJS that use in Node.js. After 2015, JS natively support Modules.

The main goal that we are going to achieve in here, split the JS programme up to separate modules and import them when we needed.

We can use import and export keywords to utilize the module system.

Use below syntax for import a module. This is ES Module syntax.

import [objectName] from '[./file/path.js]'

The module is a JS file that exports single or multiple values that using a exportkeyword.

This value can be any JS `object` or `variable`. Please refer to the below example.

// file name byFive.js

// named export

const byFive = (numbr) =>  numbr * 5;

export default byFive;

// or

export default (numbr) => numbr * 5;

How do we utilize this module in the html page?

We can use <script> tag with `type` attribute. Make a note that once we import a module, it imported in strict mode.

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

If we export something as a default export, when we import it we can use any name for it.

import byFive from './byFive.js';

const rslt = byFive(3);

You can use an absolute path like below.

import byFive from 'https://example.com/byFive.js'

Below import syntax is also valid.

import {byFive} from './byFive.js'

Note: path need to an absolute path or need to have ./ or / starting point.

Hence, below import is invalid. 

import {byFive} from 'byFive.js'

Multiple exports.

We can export multiple objects as below.

// doSomething.js

const testFunc01 = () => {
// do something
};


const testFunc02 = () => {
// do something
};


const testFunc03 = () => {
// do something
};


export { testFunc01, testFunc02, testFunc03 };

We can import those as below.

import * as UtilModule from './doSomething.js'

Then you can refer to them as below.

import * as UtilModule from './doSomething.js'

UtilModule.testFunc01();

Also, it is totally valid to use destructing assignment in import 

import { testFunc01, testFunc03 as namingFunc } from "./doSomething.js";

You can have one default export and multiple named exports.

const testFunc01 = () => {
// do something
};

const testFunc02 = () => {
// do something
};

const testFunc03 = () => {
// do something
};

const testFunc04 = () => {
// do something
}

export default testFunc04;
export { testFunc01, testFunc02, testFunc03 };

We can import it as below.

import testFunc04, { testFunc01, testFunc02, testFunc03 as namingFunc } from "./doSomething.js"

Reference:

MDN Site regarding ES Modules.

flaviocopes.com. This is great site with so many tutorials.

I highly encourage you to go and check above 2 links. If you have anything to ask regarding this please leave a comment here. Also, I wrote this according to my understanding. So if any point is wrong, don’t hesitate to correct me. I really appreciate you.

That’s for today friends. See you soon. Thank you

Main image credit