All about modules in Javascript

Posted by Souptik Datta on 2023-08-12 @ 22:55:12

Modules are a way to share data between different files in Javascript.

There are two main methods for handling modules in Javascript - Common JS Modules & ES6 Modules.

Common JS Modules

Common JS modules work something like this. Suppose you have two files named foo.js (which will be exporting a function) and bar.js (which will be using the exported function). So, they will look something like this -

Here is the foo.js -

const test = () => {
    console.log("This is an \n exported function");
}
module.exports = test;

And here is the bar.js -

const test = require('./foo.js');
test();

Now if you run the bar.js using node bar.js, you will see the console log statement being executed written in foo.js.

Remember that Modules are specific to Node.JS and don't work in browser. If you are seeing modules being used in browser code remember that there must be some library being used.

The next thing which might come to your mind is how to export multiple data from the file. So, for that you can just assign the exports as an object and put multiple elements in it, all of which will be exported. For example -

module.exports = {
  firstFunction,
  secondFunction,
  someVariable,
};

And now while importing, you can do something like this -

const {firstFunction, secondFunction, someVariable} = require('./foo.js');

One another interesting thing about Common JS module is that while exporting you can directly assing a variable named exports the exported values instead of assigning module's exports property. For example -

exports = {
  firstFunction,
  secondFunction,
  someVariable,
};

ES6 Modules

ES6 modules are used for exactly the same purpose as Common JS modules, just the syntax is different. For example foo.js (i.e the file exporting data) will be something like this -

const test = () => {
    console.log("This is an exported function");
}
export default test;

And the bar.js (i.e the file importing data) will be something like this -

import test from "./foo.js";

test();

And now you can use your bar.js in your HTML code as -

<script scr="./bar.js" type="module"></script>

And also if you are wondering how to export multiple data, you can do something like this -

export const firstFunction = () => {
  console.log("First function");
}
export const secondFunction = () => {
  console.log("Second function");
}
export const someVariable = "Some Variable";

And then import it in the same destructured way -

import {firstFunction, secondFunction, someVariable} from "./foo.js";

One important differnce between Common JS module and ES6 Modules is that you can use the require statement conditionally, i.e within if statements, because require is ultimately just a function call. But you can't do the same with import statements.

Hopefully with this you have got a good idea of modules and all the differences between Common JS modules and ES6 Modules.

Thank you. 👋

Should we send you a notification when new blogs are published?👇

Built with 💻 by Souptik