References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript export statement

Statement JavaScript All modern browsers Updated
Quick answer

The export statement makes a module's values available to other files. Use named exports for multiple values — export function sum() {} — and a single default export for a module's main thing — export default MyComponent. Other files pull them in with import.

Overview

export is the other half of the module system: it marks which values in a file are public, so other files can import them. Anything you don't export stays private to the module — a clean way to expose an API while keeping internals hidden.

There are two kinds. Named exports expose values by name, and you can have as many as you like: put export before a declaration (export const PI = 3.14, export function sum() {}) or list them at the end (export { a, b }). A default export marks the module's single main value: export default function Button() {}. A file can have many named exports but only one default.

Which to use is partly convention. Named exports are explicit and play well with tree-shaking and auto-imports, so many style guides prefer them. Default exports suit a module that really has one primary thing (a React component, a class). You can also re-export from another module — export { x } from "./other.js" — which is how a folder's index.js bundles up a public API. As with import, exports only work in a module context.

Syntax

export const PI = 3.14159;          // named
export function sum(a, b) { ... }   // named
export { a, b };                    // named list

export default function Main() { } // default (one per module)

export { x } from "./other.js";     // re-export

Example

Live example 
// utils.js
export const VERSION = '1.0';
export function greet(name) { return 'Hi, ' + name; }
export default class App {}

// main.js
import App, { greet, VERSION } from './utils.js';

console.log(greet('Ada')); // Hi, Ada
console.log(VERSION);      // 1.0

Best practices

  • Use named exports for multiple values; reserve the single default export for a module's main thing.
  • Only export what other files need — unexported values stay private.
  • Prefer named exports for better tree-shaking and editor auto-import support.
  • Bundle a folder's public API by re-exporting from an index.js.

Frequently asked questions

What is the difference between named and default exports?
A module can have many named exports (imported by their exact names in braces) but only one default export (imported without braces, with any name).
How do I export multiple things from a file?
Use named exports — put export before each declaration, or list them: export { a, b, c }.
Should I use default or named exports?
Named exports are explicit and favor tree-shaking and auto-imports, so many style guides prefer them. Use a default for a module with one clear main value.
Can I export something imported from another file?
Yes — re-export it: export { x } from "./other.js". This is common in an index.js barrel file.
do...while for