Article
Mon, Oct 16, 2023

JavaScript Modules In ES6

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

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

Using Modules ( Export and Import )

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?

  • Maintainability

  • Resusabaility

  • Perfomance

  • Productivity

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

 // 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 "./Calculator.js";

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

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

   // an object
   export const person = {
      name : "Maye Edwin",
      age : 18
   }

   // or a variable
   export const name = `Maye Edwin`;

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

import * as App from "./Calculator.js";

// using each import e.g
App.Add(4, 5);
App.Divide(3, 2);

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";

It's possible to re-export a module - also called aggregating

 // re-export a module
 export { name } from './Module.js';

 // an equivalent to
 import { name } from './Module.js';
 export name;

There are two different types of export, named and default. You can have multiple named exports per module but only one default export.

Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.

// 1.0 named export
export const age = 30;

a) Importing the named export....

// 1.0 named import
import { age } from "./Module.js";

But a default export can be imported with any name.

// 2.0 default export
let age = 30;
export default age;

b) Importing default export...

// 2.0 default export import - we have freedom to use any name
import aged from "./Module.js";

Using ES6 Modules

All module import scripts must be loaded by setting a type="module" attribute in the script tag.

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

Remix this Project on Glitch and take up the challenge 👷

Add subtraction, multiplication and division modules to this app! Good luck! Challenge link can be found here

Got any question? You wanna have a chat? Hit my inbox on twitter asap 😉

  Back./Articles