import / export Syntax

Modules use export and import.

export makes code available outside the current file.

import brings exported code into another file.

Named Exports

A named export exports a value by name.

1
2
3
4
5
6
7
8

// math.js
export function add(a, b) {
  return a + b;
}

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

Another file can import those names:

1
2
3
4
5

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

console.log(add(5, 2)); // 7
console.log(subtract(5, 2)); // 3

The imported names must match the exported names.

Exporting After Declaration

You can define values first and export them later.

1
2
3
4
5
6
7
8
9
10

// math.js
function add(a, b) {
  return a + b;
}

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

export { add, subtract };

This is useful when you want exports grouped at the bottom of a file.

Exporting Variables

You can export constants and variables.

1
2
3

// config.js
export const apiUrl = "https://api.example.com";
export const timeout = 5000;

Import them:

1

import { apiUrl, timeout } from "./config.js";

Exporting Objects

1
2
3
4
5

// settings.js
export const settings = {
  theme: "dark",
  notifications: true,
};

Import:

1
2
3

import { settings } from "./settings.js";

console.log(settings.theme); // dark

Import Aliases

You can rename an import with as.

1
2
3
4

// user.js
export function format(name) {
  return name.trim();
}

1
2
3
4

// app.js
import { format as formatUserName } from "./user.js";

console.log(formatUserName(" Alice "));

Aliases are useful when names conflict or need more context.

Export Aliases

You can also rename while exporting.

1
2
3
4
5

function formatName(name) {
  return name.trim();
}

export { formatName as format };

Another file imports the exported name:

1

import { format } from "./formatters.js";

Namespace Imports

A namespace import collects all named exports into one object.

1
2
3
4
5
6
7
8

// math.js
export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

1
2
3
4
5

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

console.log(math.add(2, 3)); // 5
console.log(math.multiply(2, 3)); // 6

This can be useful for utility modules.

Avoid overusing it when named imports would be clearer.

Import Paths

Local imports usually start with:

• ./
• ../
• / in some environments

Example:

1

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

./ means:

1

Start from the current file's folder.

../ means:

1

Go up one folder.

Example:

1

import { formatDate } from "../utils/date.js";

In browser ES modules, file extensions are usually required:

1

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

Bundlers may allow:

1

import { add } from "./math";

But learning with explicit paths is clearer.

Imports Are Static

Normal import statements must be at the top level of a module.

1

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

Do not put static imports inside if blocks or functions.

1
2
3

if (condition) {
  import { add } from "./math.js"; // invalid static import
}

For conditional loading, use dynamic import().

You will learn that later in this module.

Imports Are Read-Only Bindings

Imported bindings cannot be reassigned by the importing module.

1
2
3

import { apiUrl } from "./config.js";

apiUrl = "new-url"; // TypeError

If you need different configuration, export a function or create a new local value.

Live Bindings

ES module imports are live bindings.

That means if the exporting module changes an exported variable, importers see the updated value.

1
2
3
4
5
6

// counter.js
export let count = 0;

export function increment() {
  count += 1;
}

1
2
3
4
5
6

// app.js
import { count, increment } from "./counter.js";

console.log(count); // 0
increment();
console.log(count); // 1

You cannot reassign count from app.js, but you can observe changes made by the exporting module.

Side-Effect Imports

Sometimes you import a module only to run it.

1

import "./setup.js";

This is called a side-effect import.

It does not import names.

It just runs the module.

Use side-effect imports carefully because they can make behavior harder to trace.

Best Practices

Prefer named exports for utility functions:

1

export function formatDate(date) {}

Use clear import paths:

1

import { formatDate } from "./formatters.js";

Use aliases when they improve clarity:

1

import { format as formatUserName } from "./user.js";

Keep imports at the top of the file.

Avoid unnecessary side-effect imports.

Common Mistakes

Mistake 1: Missing Curly Braces for Named Imports

1

import add from "./math.js";

If add is a named export, use:

1

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

Mistake 2: Forgetting the Relative Path Prefix

1

import { add } from "math.js";

For a local file, use:

1

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

Mistake 3: Importing a Name That Was Not Exported

1

import { divide } from "./math.js";

This only works if math.js exports divide.

Summary

export shares code from a module.

import brings code into another module.

• Named exports are imported with curly braces.
• Names must match unless you use as.
• Namespace imports collect named exports into an object.
• Local import paths usually start with ./ or ../.
• Static imports must be at the top level.
• Imported bindings are read-only from the importing file.
• Side-effect imports run a module without importing names.