Export

You will be able to publish constants, functions, and classes from a JavaScript module using export so another module can import them.

What it is

export is a JavaScript ES module keyword that makes a value available outside the file where it is declared. Think of a module as a private workspace: variables are hidden unless you explicitly publish them. Related terms include named export, default export, import, and module specifier.

Why it matters

• It creates a clear public API for a module.
• It prevents accidental access to helper variables and internal state.
• It lets tools and bundlers track dependencies between files.
• It supports code reuse across browser and Node.js ES module projects.

Syntax or steps

The smallest useful pattern is to place export before a declaration:

export const PI = 3.14;

You can also export existing values in a list:

const PI = 3.14;
function area(r) { return PI * r * r; }
export { PI, area };

A module may have one default export, which is imported without braces:

export default function greet(name) { return "Hello " + name; }

Example

// math.js
export const PI = 3.14;
export function area(r) {
  return PI * r * r;
}
export default class Circle {
  constructor(r) { this.r = r; }
  area() { return area(this.r); }
}

// main.js
import Circle, { PI, area } from "./math.js";
const c = new Circle(2);
console.log(PI, area(2), c.area());

In math.js, PI and area are named exports, while Circle is the default export. In main.js, the default import comes first, then named imports are listed inside braces. When run as ES modules, the output is 3.14 12.56 12.56.

Common mistakes

• Importing a named export without braces, such as import PI from "./math.js". Fix it with import { PI } from "./math.js".
• Importing a default export with braces, such as import { Circle } from "./math.js". Fix it with import Circle from "./math.js".
• Forgetting the file extension in strict ES module environments. Use ./math.js, not ./math, unless your tooling allows it.
• Exporting too much. Keep helpers private and export only the values other modules need.

When to use it

Use export when writing ES modules. Choose named exports for multiple related values and default exports when a module has one main value.

Practice

Guided exercise: create utils.js with export const VERSION = "1.0"; and export function add(a, b) { return a + b; }. In another file, import both and log add(2, 3). Expected output: 5.

Challenge: change add to a default export. How must the import statement change? Hint: default exports are imported without braces, such as import add from "./utils.js";.

Quick check

Question: What is the difference between export const PI = 3.14; and export default 3.14;?

Answer: The first is a named export and must be imported with braces. The second is a default export and can be imported with any local name, such as import PI from "./math.js";.

Summary

export turns a JavaScript file into a module with a controlled public surface. Named exports make dependencies explicit, while default exports provide a single main value. Use them to share code without exposing implementation details.