Demystifying ES6 Modules: A Practical Walkthrough

JavaScript has evolved significantly over the years, and one of its most powerful advancements in recent times is the introduction of ES6 modules. These modules bring a new level of clarity and structure to JavaScript codebases, making it easier to organize, maintain, and share code among projects.

If you want to skip reading and would like a youtube video for this topic?

What Are ES6 Modules?

ES6 modules are a way to encapsulate code into small, reusable pieces. They allow developers to export parts of a module (like classes, functions, or variables) and import them in other modules, promoting a cleaner and more modular code structure.

A Look at the Code

Let’s dive into an example to see ES6 modules in action:

File: main.js

JavaScript

import User, { printAge, printName } from "./new.js";

let sahil = new User("Sahil Ahlawat", 10);
printAge(sahil);
printName(sahil);

File: new.js

JavaScript

export default class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

export function printAge(user) {
    console.log(`Age of user is : ${user.age}`);
}

export function printName(user) {
    console.log(`Name of user is : ${user.name}`);
}

In new.js, we define a User class and two functions, printAge and printName. We then export these so they can be used in other files. In main.js, we import these exports and use them to create a new User object and print its details.

Setting Up Your package.json

To ensure Node.js treats our .js files as ES6 modules, we need to add a "type": "module" line to our package.json:

File: package.json

JSON

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

With this setup, running node main.js will execute our code with ES6 module support.

Benefits of Using ES6 Modules

• Reusability: Code can be shared across different parts of an application or even different projects.
• Maintainability: Clearer project structure makes it easier to manage and update code.
• Namespace: Avoid global namespace pollution, which can lead to fewer bugs.

Conclusion

ES6 modules are a significant step forward in JavaScript development. They offer a robust way to organize code, making it more readable and maintainable. By embracing this feature, developers can improve their workflow and create more scalable applications.

This blog post provides a clear explanation of ES6 modules, demonstrates their usage with your code, and explains how to set up a Node.js project to use them. It’s written in an accessible way that should appeal to both beginners and experienced developers alike.