JavaScript Module

Introduction

JavaScript Module

Contents

  1. The concept of the module in JavaScript
  2. IIFE Module Pattern
  3. CommonJS
  4. ECMAScript

1. The concept of the module in JavaScript

Modules are essential concepts in JavaScript. the variables and functions are grouped together so that things are organized.

They are highly self-contained and grouped together with their own specific functionality allowing them to be moved around used by other places or even removed without disrupting the whole system.

Why do we need module?

var name = "Mike";
<html>
  <script>
    var name = "Tim";
    var value = "?";
  </script>
  <script src="./lib.js"></script>
  <script>
    if (name === "Tim") {
      console.log("The name is: " + name);
    }
    if (name === "Mike") {
      console.log("The name is: " + name);
    }
  </script>
</html>
The name is Mike
  • The variable name is overwritten. This is a PROBLEM

As you can see, without a module it is really hard to debug, and as your code is getting bigger and bigger with your JavaScript. It becomes almost impossible to maintain. Thus, what is a module? a module is just a file. one script is one module that may contain a class or a library of functions for a specific purpose.

2. IIFE Module Pattern

IIFE: Immediately invoked function expression

The module scope can be used to share the variables between different functions so that we can share things without having to go through the Global Scope in this way with a module scope we can be explicit which variables, classes, or functions in the module. JavaScript decided to use closure and encapsulation to create our own module.

  • Global Scope
    • Module Scope
      • Function Scope
        • Block Scope – Let and Const
const moduleOne = (function () {
  let name = "Tim";
  let phone = {
    Apple: "IPhone",
    Samsung: "Galaxy",
  };
  function addTwo(x) {
    return x + 2;
  }

  return {
    name,
    phone,
    addTwo,
  };
})();

console.log(moduleOne.name);
console.log(moduleOne.phone.Apple);
console.log(moduleOne.phone.Samsung);
console.log(moduleOne.addTwo(3));
Tim
IPhone
Galaxy
5

This pattern is what we need is actually called the revealing module pattern. We just reveal whatever we need so we can have private functions if we want or private variables if we want as we know because of closure even though the function gets executed because we returning a function inside of a function.

JQuery is also the same pattern

3. CommonJS

The CommonJS module specification is the standard used in Node.js. In the CommonJS module system, each file is treated as a separate module.

const addFive = function (x) {
  return x + 5;
};

const phone = { Apple: "IPhone", Samsung: "Galaxy" };

module.exports = {
  addFive,
  phone,
};
const lib = require("./lib.js");

console.log(lib.addFive(5));
console.log(lib.phone.Apple);
console.log(lib.phone.Samsung);
10
IPhone
Galaxy

https://nodejs.org/api/modules.html

4. ECMAScript

ECMAScript modules are the official standard format to package JavaScript code for reuse. Modules are defined using a variety of import and export statements.

  1. Case One: import * as lib from "./lib.js";
  2. Case Two: import { addFive, addTwo, mobile } from "./lib.js";
  3. Case Three: import { default as main } from "./libtwo.js";
  4. Case Four: import hello from "./libtwo.js";
const addFive = function (n) {
  return n + 5;
};

function addTwo(n) {
  return n + 2;
}

const mobile = {
  Samsung: "Galaxy",
  Apple: "iPhone",
};

export { addFive, addTwo, mobile };
function Hello() {
  return "Hello World";
}

const banana = {
  color: "Yellow",
};

const addFive = function (n) {
  return n + 5;
};

export default Hello;
export { addFive, banana };
import * as lib from "./lib.js";
import { addFive, addTwo, mobile } from "./lib.js";
import { default as main } from "./libtwo.js";
import hello from "./libtwo.js";

import * as libtwo from "./libtwo.js";
import { banana } from "./libtwo.js";

// Get all functions or object from lib.js
console.log("========================");
console.log(lib.addFive(5));
console.log(lib.addTwo(5));
console.log(lib.mobile.Apple);
console.log(lib.mobile.Samsung);

// Get some functions or object from lib.js
console.log("========================");
console.log(addFive(5));
console.log(addTwo(5));
console.log(mobile.Apple);
console.log(mobile.Samsung);

// Use export default from libtwo.js
console.log("========================");
console.log(hello());
console.log(main());
console.log(libtwo.default());

// Get all functions or object from lib.js
console.log("========================");
console.log(libtwo.addFive(3));
console.log(libtwo.banana.color);

// Get a object from libtwo.js
console.log("========================");
console.log(banana.color);
========================
10
7
iPhone
Galaxy
========================
10
7
iPhone
Galaxy
========================
Hello World
Hello World
Hello World
========================
8
Yellow
========================
Yellow

In package json.

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "type": "module"
}

Without package JSON, if your file extension is .mjs, the ECMAScript modules will work.

When calling up multiple named exports, the ECMAScript module allows you to selectively use only the objects you need globally, or nickname all objects and access them through them.

https://nodejs.org/api/esm.html

Leave a Reply

Your email address will not be published.

ANOTE.DEV