Importing allows developers to reuse code across different parts of an application, enhancing modularity, maintainability, and code organization In JavaScript we have two major systems of importing.

1. CommonJS Module System

2. ECMAScript (ES6) Module System

The CommonJS Module System

CommonJS is a standard for modularizing JavaScript that was designed with server-side development in mind, particularly for Node.js environments. Under this system, modules are loaded synchronously, meaning one after the other, which is straightforward but can lead to performance bottlenecks, especially when loading a large number of modules.

A CommonJS module might export its functionality like this:

// In file add.js
module.exports = function add(x1, x2) {
   return x1 + x2;
};

And you would import it in another file using require:

// In file main.js
const square = require('./add.js');

The ECMAScript (ES6) Module System

With the advent of ES6, the ECMAScript module system introduced import and export statements, providing a standard way to modularize JavaScript code for the browser. This system supports both static and dynamic imports, allowing for more efficient, tree-shakable builds, where only the necessary code is included.

Here’s a simple ECMAScript module example:

// In file math.js
export const add = (x, y) => x + y;

And then you can import only what you need:

// In file main.js
import { add } from './math.js';
console.log(add(2, 3)); // Output: 5

Key differences:

Conclusion:

The CommonJS and ECMAScript (ES6) module systems offer two distinct approaches for modularizing JavaScript code. CommonJS, designed primarily for server-side use in Node.js, operates synchronously, making it straightforward but potentially less efficient for loading numerous modules. ES6 modules, conversely, enable both static and dynamic asynchronous imports, allowing for selective loading and optimization of code through tree shaking. This makes ES6 modules particularly suitable for modern web development, where performance and maintainability are key. Developers can choose between these systems based on their project’s environment, requirements, and the need for backward compatibility or cutting-edge functionality.