How to Use import/export in JavaScript ES6 Modules

As your JavaScript projects grow, keeping all code in one file becomes unmanageable. Before JavaScript ES6 Modules, JavaScript had no built-in way to organize code into separate files.

But ES6 (ECMAScript 2015) introduced native module support using export and import, which allows you to split code into multiple files and reuse it cleanly.

By using modules, you can:

• Import functions, variables, or classes from other files.
• Export only what you need.
• Organize and reuse code more effectively.

In this post, you’ll learn how to use JavaScript ES6 Modules with import and export syntax. You’ll explore different ways to export and import code, understand module scope, handle dynamic imports, re-export modules, and apply best practices to write clean, modular, and maintainable JavaScript.

Before we get started, don’t forget to subscribe to my newsletter!
Get the latest tips, tools, and resources to level up your web development skills delivered straight to your inbox. Subscribe here!

Now let’s jump right into it!🚀

What are JavaScript ES6 Modules?

You can think of each JavaScript file like a warehouse. Where you use export to pack selected tools (functions, variables) into a box and use import in another file to receive and unpack those tools.

This keeps your code organized, reusable, and modular, just like sending only what you need from one warehouse to another.

Why Use Modules?

• Cleaner code: Break large files into smaller parts.
• Reusability: You can create reusable components that you write once and reuse anywhere.
• Maintainability: The logic stays in separate files that make it easier to debug and update.
• Native support: Works in modern browsers and Node.js.

👉 If you’re new to JavaScript, check out my beginner-friendly tutorials over on Learnify, my curated platform to help you learn JavaScript step by step, with examples and simple explanations.

How to Enable Modules

To enable ES6 modules, you must use a module-aware environment.

In HTML:

Add type="module" to your script.

In Node.js:

Add "type": "module" in package.json file.

{
  "type": "module"
}

Note:

• If "type": "module" is set in package.json, use .js extension file for your modules.
• If not using that, you must use .mjs extension file for your modules.

Exporting from a Module

JavaScript provides the following ways to export from a module.

Named Export

By using named export, you can export multiple values from a module.

// math.js
export const PI = 3.14;

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

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

Here,

• export const PI = 3.14;:
  • export makes this variable available to be imported in another file.
  • const PI = 3.14; declares a constant named PI with a value of 3.14.
• export function add(a, b) { return a + b;}:
  • export makes the function add available outside this file.
  • function add(a, b) declares a function that takes two arguments.
  • return a + b; returns the sum of a and b.
• export const subtract = (a, b) => a - b;:
  • export makes subtract available to be imported.
  • const subtract = (a, b) => a - b; declares a function using arrow syntax that returns the result of a - b.

You can also group them like this:

const PI = 3.14;

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

const subtract = (a, b) => a - b;

export { PI, add, subtract };

Here, instead of exporting the variable (PI) and functions (add and subtract) as you declare them, you export them all together at the bottom using export { ... }.

Default Export

By using the default export, you can export one main thing per file.

Each module can have one default export, which can be a function, class, object, or primitive value.

// logger.js
export default function log(msg) {
  console.log(msg);
}

// Or with an object

// config.js
export default {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3
};

Here,

• export default function log(msg) {console.log(msg);}, exports the function log as the default export and you can rename it freely when importing.
• export default {...}; exports a default object with config values.

Importing from a Module

Importing Named Exports

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

console.log(PI); // Output: 3.14
console.log(add(5, 3)); // Output: 8
console.log(subtract(7, 7)); // Output: 0

Here, import { PI, add, subtract } from "./math.js"; import PI, add, and subtract from math.js. You can use these imported functions and constants wherever you need.

Importing Default Exports

You can import default exports with any name.

import log from "./logger.js";
import config from "./config.js";

log("App started");
console.log(config.apiUrl);

Here,

• import log from "./logger.js"; imports the default export from logger.js and names it log.
• import config from "./config.js"; imports the default export from config.js as config.

Importing Everything

import * as MathUtils from "./math.js";

console.log(MathUtils.PI); // Output: 3.14
console.log(MathUtils.add(5, 3)); // Output: 8
console.log(MathUtils.subtract(7, 7)); // Output: 0

Here,

• import * as MathUtils from "./math.js"; imports all named exports from math.js under the namespace MathUtils.
• You can access the exports via MathUtils prefix, like, console.log(MathUtils.PI);.

Selective Imports

You can import only what you need like this:

import { add } from "./math.js"; // Only imports add function

This only imports the add function from math.js.

Module Scope

In ES6 modules, variables, functions, and classes declared in a file are scoped to that module only. They’re not added to the global scope like traditional

Name *