JavaScript Modules Explained: How Import and Export works

Previously JavaScript codes are pretty small and used the code to perform small isolated tasks but gradually the code increase and build a lot of features based on JavaScript code and managing the code became more tough and one feature depends on some other features also like a complex system, so we break the code into modules and used it in many parts of the system.

Modules are small piece of code or a small code block that can export and import function or values.

Modules helps us to break the complex code into small easy part so that that can used in multiple part of the system.

In modern JavaScript modules are the fundamental part of it.

Modules can contains

• Variable

• Function

• Objects

• Classes

// export multiplyciation function in math.js
export function multiply(a, b) {
    return a * b;
}

// import multiplication function from math.js
import { multiply } from "./math.js"

// call the function and print result
console.log(multiply(10, 5));

Here we define the function multiply in a file math.js and import the function in another file. Without writing the the exact function in the import file we can use it and the output is

50

Why Modules

• Modules helps to organize codes.

• Modules helps to prevents naming conflicts.

• Modules make the code better readable.

• Modules are easily reuse to in different parts of the programs.

• Modules are easily to debug and to make changes.

• Modules helps us to manage the dependency of any code.

Types of Modules

JavaScript provides two types of modules

• CommonJs Modules

• ES6 Modules

Here is the details description of that modules

CommonJs

CommonJs is a module system that primarily used in NodeJS environment. It helps the developers to break the code in really good way so that code can further use.

We use export keyword for export and require keyword for import in this case.

The Syntax is

// export 
module.exports = {moduleName1, moduleName2, ...}

// import
const importModule = require('./moduleName1')

Example

In a file demo.js we can define the function and export it module by module

// define the function
function sayHello() {
    console.log("Hello World");
}
// export the function
module.exports = sayHello;

In the main file using require keyword we import the function from the demo.js file

// import the function
const hello = require('./demo.js')
// execute the function
hello();

The Output is

Hello World

ES6 Module

ES6 module provide a standardized way to write the code. Unlike the CommonJS, ES6 module uses import and export keywords for handling import and export of modules.

In JavaScript, setting "type": "module" in package.json tells NodeJS to treat js files as ES6 modules.

The Syntax is

// export
export moduleName;

// import
import {moduleName} from './fileName'

Example

In the demo.js we define a function and export the module

// export the function using the export keyword
export function sayHello() {
    console.log("Hello World");
}

In the main file using import keyword we import the function from the demo.js file

// import the function sayHello from demo.js
import { sayHello } from "./demo.js";
// execute the function
sayHello()

When we have multiple export statement in the demo file, for example

// math.js
export function add(a, b) {
  return a + b;
}
export function sub(a, b) {
  return a - b;
}

And now we want to import all the value at once in one file we use the following command

// Syntax
// import * as name from "module";
import * as math from "./math.js";

Now we can call both function from the same math name.

import * as math from "./math.js";

let result1 = math.add(2, 3));
let result2 = math.sub(20, 3));

console.log(result1);
console.log(result2);

The output will be

5
17

Final Thoughts

In JavaScript modules are not just syntax, it is the way to make the code more

• clean

• manageable

• scalable

• simple to understand

When an application grows in complexity, we needs more modular codes and it becomes an essential part of the applications to manage the application code.

Reference Article

You can follow the following articles for more understanding

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

• https://www.geeksforgeeks.org/javascript/javascript-modules/

• https://www.w3schools.com/js/js\_modules.asp

• https://www.w3schools.com/js/js\_modules\_export.asp

• https://www.w3schools.com/js/js\_modules\_import.asp

• https://www.w3schools.com/js/js\_modules\_namespace.asp

That's it, now you understand Modules in JavaScript. I’d love to hear your thoughts and feedbacks.

Thank You for your patients. ❤️