Back ./es6/modules

Writing JavaScript ES6 Modules

Person, I so much love a Modularized Architecture. I find it much fun and productive to modularize your App's Architecture. JavaScript being the MOST expensive block of any web app, this makes sense and very essential for modern Apps.

Modules in JavaScript allow you to split JavaScript Apps 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. Resusabaility
  3. Perfomance
  4. Productivity

Using Modules ( Export and Import )

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!

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