ES6 Modules - import, export, Dynamic Imports

Introduction to ES6 Modules

What are ES6 Modules?

ES6 Modules, also known as ECMAScript 2015 Modules, are a native module system that allows you to split your JavaScript code into smaller, reusable parts (modules). This is a significant improvement over the older way of handling script files and dependencies in JavaScript.

Modules help us organize code into separate files that can be imported and exported as needed. This makes your codebase more maintainable, performs better, and adheres to clean coding principles.

Why Use Modules?

1. Code Reusability: You can reuse the same piece of code across multiple projects. For example, a utility function to format dates can be exported from one file and imported wherever needed.

2. Modularity: Code can be encapsulated and organized logically. This makes it easier to manage, understand, and debug. Think of a library of musical instruments; each instrument (module) can be played independently or with others.

3. Tree Shaking: This is an optimization technique used by bundlers like Webpack and Rollup. It eliminates unused code from the final build, reducing the overall file size and improving loading times. This is akin to packing only the necessary items when traveling instead of bringing your entire wardrobe.

4. Scalability: As your application grows, you can easily add new modules without affecting the existing codebase. This is similar to adding new floors to a building without disturbing its foundation.

Key Concepts

• Module: A JavaScript file containing one or more exports, which can be functions, classes, variables, or objects.
• Export: A keyword used to declare which parts of a module can be accessed by other modules.
• Import: A keyword used to bring in exports from other modules.
• Named Exports: Exports that have a specific name. You can have multiple named exports per module.
• Default Exports: Exports that do not have a specific name. Each module can have only one default export.
• Dynamic Import: The ability to import modules at runtime rather than at the top of a file. This is useful for code splitting and lazy loading.

Understanding export

Exporting Single Variables or Functions

Named Exports

Named exports allow us to export multiple elements from a module. These elements can then be imported by their names.

Example:

Let's create a file named math.js that contains a few functions for basic arithmetic operations.

// math.js

export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

export const pi = 3.14159;

In the above math.js file, we are using the export keyword to export two functions and a constant. These can be imported into other files by their names.

Default Exports

Default exports allow us to export a single element (like a function, class, or object) from a module. You can only have one default export per file.

Example:

Let's assume we have a logger.js module that exports a single function to log messages.

// logger.js

export default function logMessage(message) {
    console.log(message);
}

In the above logger.js file, the logMessage function is exported as the default export from this module.

Mixing Named and Default Exports

It's also possible to mix named and default exports in the same module.

Example:

Let's create a file named app.js that includes both named and default exports.

// app.js

export const appVersion = '1.0.0';

export function greet(name) {
    return `Hello, ${name}!`;
}

export default function greetAndLog(name) {
    console.log('Greeting a user...');
    return greet(name);
}

In the above app.js file:

• We have named exports for appVersion and greet.
• We have a default export for greetAndLog.

Understanding import

Importing from Other Modules

We can import named and default exports from other modules using the import keyword.

Named Imports

Named imports allow us to import one or more elements by their names.

Example:

Let's import the add and subtract functions from the math.js module we created earlier.

// main.js

import { add, subtract } from './math.js';

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

In the main.js file:

• We are importing the add and subtract functions from the math.js file.
• We use curly braces {} to specify which named exports we want to import.
• We can then use these functions directly in our main.js file.

Default Imports

Default imports are used to import the default export from a module. Since a module can have only one default export, you don't specify its name within curly braces.

Example:

Let's import the logMessage default function from the logger.js module we created earlier.

// main.js

import logMessage from './logger.js';

logMessage('Hello, world!'); // Output: Hello, world!

In the main.js file:

• We are importing the default export from the logger.js module and assigning it to the variable logMessage.
• We can then use this function by calling logMessage.

Renaming Imported Members

Sometimes, you might want to rename an import just to prevent name collisions or improve readability.

Example:

Let's import the greet and greetAndLog functions from the app.js module and rename one of them.

// main.js

import { greet, greetAndLog as greetAndLogUser } from './app.js';

console.log(greet('Alice')); // Output: Hello, Alice!
greetAndLogUser('Bob'); // Output: Greeting a user...
                          //         Hello, Bob!

In the main.js file:

• We are importing the greet function and the greetAndLog function but renaming it to greetAndLogUser.
• We use the as keyword to specify the new name greetAndLogUser.

Module Scoping

Local vs. Global Scope

In ES6 Modules, each module is automatically in strict mode, meaning that variable declarations are scoped to the module. This improves security and makes your code behave consistently.

How Modules Are Scoped

• Local Scope: Each module has its local scope, which means variables, functions, or classes defined in a module are not accessible outside that module unless explicitly exported.
• Global Scope: In contrast, scripts run in the global scope, and variables, functions, or classes declared with var can leak into the global scope.

Managing Scope in ES6 Modules

Using modules, you can encapsulate variables, functions, and classes that should not be exposed publicly, keeping the global scope clean.

Example:

// utils.js

const privateVar = 'This is private';

export const publicVar = 'This is public';

export function publicFunction() {
    console.log('This function is public and can be imported.');
}

In the utils.js file:

• We have a privateVar variable that is scoped to this module and cannot be accessed from outside.
• We have a publicVar constant and a publicFunction that can be accessed through imports.

Working with Named Exports

Exporting Multiple Named Members

We can export multiple named members from a module. Named exports are particularly useful when you want to expose several functionalities from a module.

Example:

// shapes.js

export function areaOfCircle(radius) {
    return Math.PI * radius * radius;
}

export function areaOfRectangle(width, height) {
    return width * height;
}

export function areaOfTriangle(base, height) {
    return 0.5 * base * height;
}

In the shapes.js file:

• We are exporting three functions that calculate the area of different shapes.
• These functions can be imported and used individually or together.

Importing Multiple Named Members

Once multiple named members are exported, you can import them into another module by specifying them within curly braces.

Example:

// shapes-test.js

import { areaOfCircle, areaOfRectangle, areaOfTriangle } from './shapes.js';

console.log(areaOfCircle(5)); // Output: 78.53981633974483
console.log(areaOfRectangle(4, 5)); // Output: 20
console.log(areaOfTriangle(6, 8)); // Output: 24

In the shapes-test.js file:

• We import three named exports (areaOfCircle, areaOfRectangle, areaOfTriangle) from the shapes.js module.
• We then use these functions to calculate the area of different shapes.

Renaming Named Imports

You can also rename named imports to prevent name collisions or improve readability.

Example:

// shapes-test.js

import { areaOfCircle as circleArea, areaOfRectangle as rectArea, areaOfTriangle } from './shapes.js';

console.log(circleArea(5)); // Output: 78.53981633974483
console.log(rectArea(4, 5)); // Output: 20
console.log(areaOfTriangle(6, 8)); // Output: 24

In the shapes-test.js file:

• We import the areaOfCircle and areaOfRectangle functions and rename them to circleArea and rectArea respectively.
• Renaming can be useful to avoid conflicts or to use more descriptive names.

Working with Default Exports

Declaring a Default Export

A module can have only one default export. Default exports are generally used when you want to export a single function or class.

Example:

// calculator.js

export default function Calculator() {
    return {
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;
        }
    };
}

In the calculator.js file:

• We are exporting a single default export, the Calculator function.
• This function returns an object with add and subtract methods.

Importing a Default Export

To import a default export, you can choose any name for the imported variable.

Example:

// calculator-test.js

import Calculator from './calculator.js';

const calc = new Calculator();
console.log(calc.add(5, 3)); // Output: 8
console.log(calc.subtract(5, 3)); // Output: 2

In the calculator-test.js file:

• We import the default export from the calculator.js file.
• We then create an instance of the Calculator and use its methods.

Mixed Exports

You can have both default and named exports in a module. However, it's not common practice and can lead to confusion.

Example:

// multi-export.js

// Default export
export default function runApp() {
    return 'Application is running!';
}

// Named exports
export const appVersion = '1.0.0';
export function formatDate(date) {
    return date.toLocaleDateString();
}

In the multi-export.js file:

• We have a default export, runApp, which returns a string.
• We also have two named exports, appVersion and formatDate.

When importing mixed exports, you must import the default export separately.

Example:

// app-test.js

import runApp, { appVersion, formatDate } from './multi-export.js';

console.log(runApp()); // Output: Application is running!
console.log(appVersion); // Output: 1.0.0
console.log(formatDate(new Date())); // Output: (current date formatted as string, e.g., 10/5/2023)

In the app-test.js file:

• We import the default export (runApp) directly.
• We import the named exports (appVersion and formatDate) within curly braces.

Dynamic Imports

Loading Modules on Demand

Dynamic imports allow you to load modules at runtime rather than compile time. This technique is useful for code splitting, improving load times, and lazy loading components.

Syntax and Use Cases

The syntax for dynamic imports is import(modulePath) which returns a promise.

Example:

// main.js

function loadPlotLibrary() {
    import('./plot.js').then((module) => {
        console.log('Plot library loaded');
        module.plotData([1, 2, 3, 4, 5]);
    }).catch((err) => {
        console.error('Failed to load plot library', err);
    });
}

// Load plot library only when needed
document.getElementById('load-plot-button').addEventListener('click', loadPlotLibrary);

In the main.js file:

• We define a function loadPlotLibrary that uses import('./plot.js') to load the plot.js module asynchronously.
• When the plot library is loaded successfully, we use its plotData function.
• We catch any errors if the module fails to load.
• We attach this function to a button click event to load the module only when needed.

Asynchronous Import

Dynamic imports are asynchronous and return a promise. This means you can await them inside an async function.

Example:

// main.js

async function loadPlotLibrary() {
    try {
        const module = await import('./plot.js');
        console.log('Plot library loaded');
        module.plotData([1, 2, 3, 4, 5]);
    } catch (err) {
        console.error('Failed to load plot library', err);
    }
}

document.getElementById('load-plot-button').addEventListener('click', loadPlotLibrary);

In the main.js file:

• We define an async function loadPlotLibrary that uses await import('./plot.js') to load the plot.js module asynchronously.
• We wrap the import in a try-catch block to handle any errors.
• We attach this function to a button click event.

Using Modules with Browsers

Basic HTML Setup

To use ES6 Modules in browsers, you need to use the type="module" attribute in your <script> tag.

Including Module Scripts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module Example</title>
</head>
<body>
    <script type="module" src="main.js"></script>
</body>
</html>

In the HTML file:

• We include a script tag with type="module" pointing to main.js.
• This tells the browser to treat main.js as a module.

Running Module Code

Ensure that the scripts in your HTML file are executed once the DOM is fully loaded to avoid issues with accessing DOM elements.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module Example</title>
</head>
<body>
    <button id="load-plot-button">Load Plot Library</button>
    <script type="module" defer src="main.js"></script>
</body>
</html>

In the HTML file:

• We add a defer attribute to the script tag to ensure it runs only after the HTML is fully loaded.
• We have a button that triggers the dynamic import of the plot library.

Script Loading Performance

Module scripts are executed asynchronously and in a deferred manner by default, meaning they will not block the rendering of the page. However, using the defer attribute ensures they run only after the HTML is fully loaded.

Using Modules with Node.js

Enabling Modules in Node.js

Starting from Node.js 12, modules are supported out of the box. However, before that, you need to use the .mjs file extension or set the type field in package.json to module.

Running Module Code in Node.js

To run code with ES6 modules in Node.js, you can use the .mjs extension or set the type in your package.json file.

Example using .mjs extension:

// math.mjs

export function add(a, b) {
    return a + b;
}

// main.mjs

import { add } from './math.mjs';

console.log(add(5, 3)); // Output: 8

In the math.mjs and main.mjs files:

• We use the .mjs extension to indicate that these are ES6 modules.
• We import the add function from math.mjs and use it in main.mjs.

Example using package.json:

{
  "type": "module"
}

// math.js

export function add(a, b) {
    return a + b;
}

// main.js

import { add } from './math.js';

console.log(add(5, 3)); // Output: 8

In the package.json file:

• We set the type field to module to indicate that all .js files use the ES6 module syntax.
• We create a math.js and main.js file to export and import the add function.

Common Errors and Fixes

1. File Extension:

   • error: ERR_MODULE_NOT_FOUND This usually happens when the wrong file extension is used. Ensure you are using .js if type: "module" is set in package.json, or .mjs otherwise.

2. Incorrect Module Path:

   • error: ERR_MODULE_NOT_FOUND This error occurs when the module path is incorrect. Double-check your file paths and ensure they match exactly.

Error Handling

Syntax Errors

Syntax errors occur due to mistakes in the syntax of your JavaScript code. For example, using export outside a module, misspelling a keyword, or using import in a script tag without setting type="module".

Common Syntax Errors:

• Incorrect Export:

// Incorrect export syntax
export var x; // Not allowed; use default or named export

• Incorrect Import:

// Incorrect import syntax
import { y } from './module'; // Missing .js extension
import 'z'; // Not allowed; use {named exports} or default export

Runtime Errors

Runtime errors occur during the execution of your program. They can be caused by various factors such as attempting to use a function or variable before it is defined.

Common Runtime Errors:

• Reference Error:

// ReferenceError: add is not defined
console.log(add(5, 3));
import { add } from './math.js'; // This import is incorrect and should be above the usage

• TypeError:

// TypeError: default export is not a function
import App from './app.js';
App(); // If App is an object, not a function

Handling Import Failures

When importing a module, you should always handle possible failures using a try-catch block for dynamic imports or catch the error if it’s a static import.

Example:

// main.js

try {
    import { nonExisting } from './math.js';
} catch (err) {
    console.error('Failed to import:', err);
}

async function loadOptionalModule() {
    try {
        const module = await import('./optional-module.js');
        console.log('Optional module loaded');
    } catch (err) {
        console.error('Failed to load optional module:', err);
    }
}

In the main.js file:

• We use a try-catch block to catch errors when importing a non-existing export.
• We define an async function loadOptionalModule to load a module dynamically.
• We handle any errors that occur during the dynamic import within the catch block.

Advanced Module Concepts

Aggregating Modules

Aggregating modules is a way to combine multiple exports from different modules into a single module. This is useful when you want to provide a single entry point for a set of functionalities.

Re-exporting Members

You can export members that were originally imported from other modules. This is useful for creating a single entry point for a collection of modules.

Example:

// advanced.js

// Import and re-export named exports
export { add, subtract, pi } from './math.js';

// Import a default export and re-export it
import App, { appVersion } from './app.js';
export { appVersion };
export default App;

In the advanced.js file:

• We import add, subtract, and pi from math.js and directly re-export them.
• We import the default export and appVersion from app.js and re-export them under new names.

Conditional Exports

You can conditionally export members based on certain conditions. This can be useful for polyfills or different environments.

Example:

// shapes.js

if (true) {
    export function areaOfCircle(radius) {
        return Math.PI * radius * radius;
    }
} else {
    export function areaOfCircle(radius) {
        return Math.PI * radius ** 2;
    }
}

In the shapes.js file:

• We conditionally export the areaOfCircle function based on a condition. This is more of a conceptual example to illustrate conditional exports.

Module Trees and Dependency Management

Building Module Trees

A module tree is a hierarchy of modules where each module can import from other modules. This allows you to build complex applications by organizing code into a tree-like structure.

Resolving Module Specifiers

A module specifier is the string used in import statements to locate the module. Module specifiers can be relative paths or absolute paths.

Example:

// main.js

import { add } from './math.js';
import App from '../app.js';

In the main.js file:

• We resolve ./math.js using a relative path.
• We resolve ../app.js using a relative path.

Circular Dependencies

Circular dependencies occur when two or more modules import each other directly or indirectly, creating a loop. Circular dependencies can lead to unexpected behavior and should be avoided.

Example:

// moduleA.js

import { bFunction } from './moduleB.js';

export function aFunction() {
    console.log('Function from module A');
    bFunction();
}

// moduleB.js

import { aFunction } from './moduleA.js';

export function bFunction() {
    console.log('Function from module B');
    aFunction();
}

In the moduleA.js and moduleB.js files:

• Both modules import each other, creating a circular dependency.
• This can cause issues such as functions being undefined at the time of import.

Conclusion and Next Steps

Summary of Key Points

• ES6 Modules allow for organizing JavaScript code into reusable modules.
• Export allows sharing parts of a module with other files using named or default exports.
• Import brings in exports from other modules, enabling code reuse.
• Modules have their own scope, preventing global namespace pollution.
• Dynamic imports provide the ability to load modules at runtime, enhancing performance by lazy loading.
• Modules need to be included in HTML using the type="module" attribute.
• Handling errors during imports is crucial for robust applications.
• Advanced concepts include aggregating and conditionally exporting members.
• Circular dependencies should be avoided to prevent undefined behaviors.

Additional Resources

• MDN Web Docs: ES6 Modules
• JavaScript.info: Modules

Next Topics to Explore

• TypeScript Modules: A popular superset of JavaScript that adds static types and module management.
• Bundlers: Tools like Webpack or Rollup that bundle multiple modules into a single file, optimizing the loading process.
• Node.js CommonJS: The traditional module system in Node.js, different from ES6 Modules.
• Advanced JavaScript Features: Explore destructuring, async/await, and other modern JavaScript features.

Learning about ES6 Modules and other advanced JavaScript concepts will greatly enhance your ability to write maintainable and efficient code. Keep exploring and experimenting to deepen your understanding!