Understanding Import and Modules in JavaScript

What Are Modules?

Modules are reusable blocks of code that help developers organize their JavaScript programs. Instead of having all the code in one large file, modules allow you to split your code into smaller, logical pieces that can be imported and exported as needed. Using modules improves readability, maintainability, and collaboration in software projects.

A Brief History: CommonJS vs ES Modules (ESM)

In the early days of JavaScript, the CommonJS module system was the standard for Node.js applications. It introduced the require keyword for importing modules and module.exports for exporting code. While it worked well for server-side JavaScript, CommonJS was not natively supported in browsers.


        // CommonJS example

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

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

As JavaScript became more popular for frontend development, ECMAScript Modules (ESM) were introduced as part of ES6 in 2015. ESM uses import and export syntax and is now the default standard for modern JavaScript development in both browsers and Node.js.


        // ESM example

        // math.js
        const add = (a, b) => {
            return a + b;
        };
        export default add;

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

The developer community has largely moved towards ESM because it offers better performance, native browser support, and compatibility with modern tools and libraries.

Default Exports in CommonJS vs ES Modules

Both CommonJS and ES Modules support default exports, but they use different syntax:

CommonJS Default Export


        // math.js
        const add = (a, b) => {
            return a + b;
        };
        module.exports = add; // <-- 2 3 5 Here is the default export app js const add require math console log Output code>


    ES Modules Default Export
    
        // math.js
        const add = (a, b) => {
            return a + b;
        };
        export default add; // <-- 2 3 5 Here is the default export app js import add from math console log Output code>

    
        In ES Modules, you can also use named exports instead of default exports:
    
    
        // math.js
        export const add = (a, b) => {
            return a + b;
        };

        export const subtract = (a, b) => {
            return a - b;
        };

        // app.js
        import { add, subtract } from './math.js';
        console.log(add(2, 3)); // Output: 5
        console.log(subtract(2, 3)); // Output: -1
    
    
        Named exports allow you to export multiple values or functions from a single module, providing more flexibility. 
        You can even rewrite the previous example to perform a single export all at once:
    
    
        // math.js
        const add = (a, b) => {
            return a + b;
        };

        const subtract = (a, b) => {
            return a - b;
        };

        export { add, subtract }; // <-- 2 3 5 Single combined export app js import add subtract from math console log Output -1 code>



    Creating and Using Your Own Modules
    
        Let's walk through creating and using a module in a real project:
    
    Step 1: Create a Module
    
        In a file called greetings.js:
    
    
        export function sayHello(name) {
            return `Hello, ${name}!`;
        }
    
    Step 2: Import and Use the Module
    
        In a file called main.js:
    
    
        import { sayHello } from './greetings.js';

        console.log(sayHello('Alice')); // Output: Hello, Alice!
    
    
        This approach makes your code modular, clean, and reusable.
    


    Why Use ES Modules?
    
        ES Modules offer several benefits over CommonJS:
    
    
        Native browser support without the need for bundlers like Webpack.
        Improved performance through static analysis (e.g., tree-shaking unused code).
        Better readability and maintainability with modern syntax.
    
    
        As JavaScript continues to evolve, ESM has become the standard choice for developers.
    


    Conclusion
    
        JavaScript modules, particularly ES Modules, are a powerful tool for organizing and reusing code. 
        While CommonJS served its purpose during the rise of Node.js, ESM has taken over as the preferred approach for modern JavaScript development. 
        By adopting ESM, you ensure your projects are aligned with current best practices and standards.