Gallery
Share
Explore

Student Lab Learning Notebook: JavaScript ECMAScript 6 Modules

Lecture Preview: Here we present the details of JavaScript EcmaScript 6 COMMONJS Modules and ES Modules.
Upon concluding this lesson, you are expected to be able to state the similiarities and differences and show when when should be used.

Lecture: Understanding JavaScript ECMAScript 6 (ES6) CommonJS Modules and ES Modules

Hello everyone, today we will delve into the world of JavaScript ECMAScript 6 (ES6), focusing on two major module systems: CommonJS and ES Modules.

Modules in JavaScript

Before we start, let's talk about what a module is. In JavaScript, as in other programming languages, a module is a discrete unit of code. Each module has a specific task, and you can import it where it's needed. This structure enables clean, maintainable, and reusable code.
JavaScript didn't initially have a built-in module system, but as applications grew more complex, the community realized the need for one. This led to the development of different module patterns over time, including the Module pattern, IIFEs, and Asynchronous Module Definition (AMD).
Eventually, Node.js standardized CommonJS modules, and later, with the arrival of ECMAScript 6, JavaScript got its official module system: ES Modules.

CommonJS Modules

CommonJS is the module system that Node.js has adopted. If you've written or worked on a Node.js application, you're likely familiar with require and module.exports syntax.
Here's a simple example:

// math.js
const add = (a, b) => a + b;
module.exports = add;

// app.js
const add = require('./math.js');
console.log(add(2, 3)); // outputs 5

In the CommonJS module system, modules are loaded synchronously and processed in the order they occur.

ES Modules

ES Modules are the official module system in ECMAScript 6 (ES6). They introduce a syntax that is both compact and powerful. Here's how the previous example would look in ES6:
// math.js
export const add = (a, b) => a + b;

// app.js
import { add } from './math.js';
console.log(add(2, 3)); // outputs 5

ES Modules are statically analyzed, which means imports and exports are resolved and mapped to each other at compile time, rather than runtime. This enables features like "tree shaking" to reduce the output bundle size in the browser.

Similarities between CommonJS and ES Modules

Encapsulation: Both systems encapsulate code within modules, keeping the global scope clean.
Reusability: Both allow code to be reused across different parts of the application or across different applications.

Differences between CommonJS and ES Modules

Loading Strategy: CommonJS modules are loaded synchronously, while ES Modules are loaded asynchronously. This means that ES Modules are better suited for browser environments where downloading code should not block the rest of the code execution.
Static vs Dynamic: ES Modules are statically analyzable, meaning you can determine imports and exports at compile time. CommonJS modules, on the other hand, are dynamic, meaning imports and exports are only fully understood at runtime.
Syntax: As shown in the examples, the syntax between the two differs significantly. ES6 syntax is more concise and offers more direct control over import and export names.
Support: As of my knowledge cutoff in September 2021, CommonJS is natively supported in Node.js, while ES Modules are supported in modern browsers. Node.js has also added support for ES Modules, but keep in mind that the implementation was still experimental at that time.

When to Use Which

Choosing between CommonJS and ES Modules depends on your use case.

For server-side development, particularly with Node.js, CommonJS remains a common choice. It's stable, widely adopted, and its synchronous loading is not a significant drawback in a server environment where all modules are loaded from the local filesystem.
On the other hand, for client-side development in the browser, ES Modules are the clear choice. They are designed with the web in mind, so they are non-blocking and can be optimized better due to their static nature. Furthermore, ES Modules are supported in all modern browsers.
However, with Node.js adding support for ES Modules and with the increasing popularity of JavaScript bundlers like webpack and Rollup, the landscape is changing. These tools can transpile ES Module syntax to CommonJS for Node.js compatibility, and they can also take advantage of ES Module features like static analysis and tree shaking for better optimization in the browser.
If you're working on a library intended to be used by other developers, consider providing both CommonJS and ES Modules versions. This ensures compatibility with both Node.js and browser environments, and it allows other developers to choose the module system that works best for their situation.
So, the choice between CommonJS and ES Modules ultimately comes down to your specific use case, the environments you're targeting, and the tools you're using.
And that's the end of our lecture today! Thanks for listening, and I hope you now have a clear understanding of CommonJS and ES Modules in ECMAScript 6. Happy coding!

Coding examples showcasing the use of both Common JS and ES MODULES themed on the Vertical of a Dating APP
Let's consider a simple scenario for a dating app where we have users and matches.
We'll have a User module and a Match module.

CommonJS Modules

User Module
javascriptCopy code
// user.js
function User(name, age) {
this.name = name;
this.age = age;
}

User.prototype.getName = function() {
return this.name;
}

User.prototype.getAge = function() {
return this.age;
}

module.exports = User;

Match Module
javascriptCopy code
// match.js
const User = require('./user');

function Match(user1, user2) {
if (!(user1 instanceof User) || !(user2 instanceof User)) {
throw new Error("Both match participants should be User instances");
}

this.user1 = user1;
this.user2 = user2;
}

Match.prototype.getMatchedUsers = function() {
return [this.user1.getName(), this.user2.getName()];
}

module.exports = Match;

App Usage
javascriptCopy code
// app.js
const User = require('./user');
const Match = require('./match');

const alice = new User("Alice", 25);
const bob = new User("Bob", 27);

const match = new Match(alice, bob);

console.log(match.getMatchedUsers()); // Outputs: ["Alice", "Bob"]

ES Modules

User Module
javascriptCopy code
// user.js
export class User {
constructor(name, age) {
this.name = name;
this.age = age;
}

getName() {
return this.name;
}

getAge() {
return this.age;
}
}

Match Module
javascriptCopy code
// match.js
import { User } from './user.js';

export class Match {
constructor(user1, user2) {
if (!(user1 instanceof User) || !(user2 instanceof User)) {
throw new Error("Both match participants should be User instances");
}

this.user1 = user1;
this.user2 = user2;
}

getMatchedUsers() {
return [this.user1.getName(), this.user2.getName()];
}
}

App Usage
javascriptCopy code
// app.js
import { User } from './user.js';
import { Match } from './match.js';

const alice = new User("Alice", 25);
const bob = new User("Bob", 27);

const match = new Match(alice, bob);

console.log(match.getMatchedUsers()); // Outputs: ["Alice", "Bob"]

These are simplified examples that represent users and matches in a dating app using CommonJS and ES Modules. Keep in mind that real-world applications would involve more complex scenarios like data persistence, authentication, and more.

Lab Learning Outcome:

Complete 5 progressive code examples to teach and illustrate the use of JavaScript EcmaScript 6 COMMONJS Modules and ES Modules.
State the similiarities and differences and show when when should be used.

In this lab, you will learn about JavaScript ECMAScript 6 (ES6) modules, specifically CommonJS modules and ES modules.
You will go through five progressive code examples to understand the similarities and differences between these two module systems, as well as when to use each of them.

Table of Contents

Introduction to CommonJS Modules
Introduction to ES Modules
Importing and Exporting with ES Modules
Dynamic Imports with ES Modules
Mixing CommonJS and ES Modules

1. Introduction to CommonJS Modules

CommonJS is a module system used in Node.js. It uses require() to import modules and module.exports to export values from a module.

Example 1.1: Creating a CommonJS module

Create a file named math.js:
javascript
Copy code
// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;

module.exports = {
add,
subtract,
};

Example 1.2: Importing a CommonJS module

Create a file named app.js:
javascript
Copy code
// app.js
const math = require('./math');

console.log(math.add(1, 2)); // Output: 3
console.log(math.subtract(5, 3)); // Output: 2

2. Introduction to ES Modules

ES modules are the official standard for JavaScript modules in ECMAScript 6. They use the import and export keywords.

Example 2.1: Creating an ES module

Create a file named math.mjs:
javascript
Copy code
// math.mjs
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Example 2.2: Importing an ES module

Create a file named app.mjs:
javascript
Copy code
// app.mjs
import { add, subtract } from './math.mjs';

console.log(add(1, 2)); // Output: 3
console.log(subtract(5, 3)); // Output: 2

3. Importing and Exporting with ES Modules

ES modules allow for more flexibility in importing and exporting. You can export multiple values from a module, import specific values from a module, and even rename values during import.

Example 3.1: Exporting multiple values from an ES module

Update the math.mjs file to export an additional function:
javascript
Copy code
// math.mjs
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export const multiply = (a, b) => a * b;

Example 3.2: Importing specific values from an ES module

Update the app.mjs file to import only the add and multiply functions:
javascript
Copy code
// app.mjs
import { add, multiply } from './math.mjs';

console.log(add(1, 2)); // Output: 3
console.log(multiply(5, 3)); // Output: 15

Example 3.3: Renaming values during import

Update the app.mjs file to rename the add function during import:
javascript
Copy code
// app.mjs
import { add as sum, multiply } from './math.mjs';

console.log(sum(1, 2)); // Output: 3
console.log(multiply(5, 3)); // Output: 15

4. Dynamic Imports with ES Modules

ES modules also allow for dynamic imports, which is useful for loading modules on demand.

Example 4.1: Dynamic import of an ES module

Create a file named lazy-load.mjs:
javascript
Copy code
// lazy-load.mjs
const loadMath = async () => {
const math = await import('./math.mjs');
console.log(math.add(1, 2)); // Output: 3
};

loadMath();

5. Mixing CommonJS and ES Modules

5.1 Introduction

In this section, we will explore how to use both CommonJS and ES Modules in the same project. It's essential to understand how to mix these two module systems since many existing libraries use both. By the end of this section, you will be familiar with importing and exporting using both CommonJS and ES Modules.

5.2 Importing CommonJS in ES Modules

To import CommonJS modules in ES Modules, you can use the import statement with the default keyword. Here's an example:
common.js (CommonJS Module)
javascript
Copy code
const commonFunction = () => {
console.log("Hello from CommonJS!");
};

module.exports = commonFunction;
esm.js (ES Module)
javascript
Copy code
import commonFunction from "./common.js";

commonFunction();

5.3 Importing ES Modules in CommonJS

To import ES Modules in CommonJS modules, you can use the require function and the default property. Here's an example:
esm.js (ES Module)
javascript
Copy code
export const esmFunction = () => {
console.log("Hello from ES Module!");
};
common.js (CommonJS Module)
javascript
Copy code
const { esmFunction } = require("./esm.js").default;

esmFunction();

5.4 Exporting from Both Module Systems

You can also export from a single file using both module systems. Here's an example:
mixedExports.js
javascript
Copy code
const commonFunction = () => {
console.log("Hello from CommonJS!");
};

const esmFunction = () => {
console.log("Hello from ES Module!");
};

// CommonJS export
module.exports = {
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.