JavascriptTypescriptNodeJS
Last updated at 2023-09-06

What is ESModule with Sample Code

ClickUp
Note
AI Status
Full
Last Edit By
Last edited time
Sep 6, 2023 06:26 PM
Metatag
Slug
what-is-es-module
Writer
Published
Published
Date
Sep 6, 2023
Category
Javascript
Typescript
NodeJS

1. What is ES Module?

An ES Module is a JavaScript file that exports functions, variables, or classes for use in other modules.
Here's a simple example:
// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './math.js';
console.log(add(3, 4)); // Output: 7
In this example, math.js is an ES Module that exports the add function, which is then imported and used in the main.js module.

2. What is its Use?

ES Modules help manage dependencies and encourage code modularity.
Consider a scenario where you have multiple modules for a web application:
// utils.js
export function multiply(a, b) {
  return a * b;
}

// calculator.js
import { add } from './math.js';
import { multiply } from './utils.js';

export function calculate(a, b) {
  return add(a, b) * multiply(a, b);
}
In this example, calculator.js depends on functions from math.js and utils.js, allowing you to organize and reuse code efficiently.

3. Precursors to ES Modules

Before ES Modules, developers used other module systems like CommonJS (Node.js) and AMD (Asynchronous Module Definition).
Here's a CommonJS example:
// CommonJS module
// math.js
module.exports = {
  add: function(a, b) {
    return a + b;
  }
};

// main.js
const math = require('./math.js');
console.log(math.add(3, 4)); // Output: 7
CommonJS was widely used in server-side JavaScript (Node.js) and follows a different module system compared to ES Modules.

4. What Problems Does it Solve?

ES Modules help prevent global scope pollution and simplify dependency management. For example, without modules, variables could conflict:
// Without Modules
// app.js
var x = 10;

// lib.js
var x = 20;

console.log(x); // Which 'x' will it log?
With ES Modules, you can avoid such conflicts and manage dependencies cleanly:
// With ES Modules
// app.js
import { x } from './lib.js';
console.log(x); // Output: 20

5. Why Should You Use ES Modules?

You should use ES Modules because they are standardized and supported by modern browsers and Node.js.
For instance, in a web application:
<!-- index.html -->
<script type="module" src="main.js"></script>
And in Node.js:
// Node.js with ES Modules (using .mjs extension)
// main.mjs
import { add } from './math.mjs';
console.log(add(3, 4)); // Output: 7
ES Modules provide a consistent way to structure and manage code in various environments.

6. When to Use ES Modules

Use ES Modules when working with modern web applications or Node.js projects that support them. For instance, in Node.js:
node --experimental-modules main.mjs
ES Modules are particularly beneficial in larger projects where code modularity, standardization, and clean dependency management are essential.

Discussion (0)

Related Posts