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 <script> tag.

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

The challenge 👷

Add subtraction, multiplication and division modules to this app! Good luck!

Setting up the project

Styling

All file names start with capital letter for scripts and styles. Example : App.js or App.css

← README.md

That's this file, where I tell people what your cool website does and how you built it.

← index.html

Where you'll write more content of your remix.

← App.css

CSS files add styling rules this web app.

← App.js

The main Modules import file.

← assets

Drag in assets, like images or music, to add them to your project.

Made by Maye Edwin

\ ゜ o ゜)ノ