JavaScript ES6 Modules 🎒

Author : Maye Edwin

Modules in javascript allow you to split JavaScript programs up into separate chuncks that can be imported when needed.

Modern browsers now support module functionality natively - browsers can optimize loading of modules,
making it more efficient than having to use a library to achieve the same.

Why modules?

1. Maintainability

2. Resusability

3. Perfomance

4. Productivity

Read more about JavaScript Modules.

Using Modules ( Export and Import )

export : is used to expose public variables, functions and classes.

   // Add.js
    const Add = () {
       return a + b;
    }
    export { Add }

import : is then used to pull items from a module into another script or module.

// App.js
import { Sum } from "./Add.js";
console.log(Add(1, 2)); // 3

Advanced Recipe

A single export statement can be used as shown below.

export { Add, Subtract };

A single import statement can be used as shown below for all public items.

import { Add, Subtract } from "./Calculate.js";

Or use export as you declare a function, class or variable.

   // export a function
   export const Add = () {
     return a + b ;
   }
   // or a variable
   export let name = `Maye Edwin`;

Or use as and * to import all exports from a given module.

import * as App from "./Calculate.js";
// using each export
App.Add();
App.Divide();

Or use as to import an export or exports from a given module (helps to prevent naming problems).

import { user as Bio } from "./Users.js";
import { sum as Add, product as Multiply } from "./Calculator.js";

Using ES6 Modules

All module import scripts must be loaded by setting a type=”module” attribute in the