JavaScript Modules Export — JavaScript interactive lesson

The Export Keyword

A module uses the export keyword to share values with other files.

A module can have many named exports .

A module can (optionally) have one default export .

Named Exports

A named export gives a name to each item .

Items can be exported individually , or wrapped in { } at the bottom:

Module File "person.js"

name and age exported individually:

// export name and age
export const name = "Jesse";
export const age = 40;

name and age exported at once at the bottom:

const name = "Jesse";
const age = 40;
// export name and age
export { name, age };

You import named exports by wrapping them in { } .

The names must match exactly.

<script type="module">
// Import name and age
import { name, age } from "./person.js";
</script>

Named exports enforce correct naming. If you misspell a name, you get an error.

Module File "math.js"

export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}
export function multiply(a, b) {
  return a * b;
}
export function divide(a, b) {
  return a / b;
}

Name Strictness

With named exports, the imported names must match exactly.

Name exports avoid mistakes caused by typos or renaming.

import { calcluate } from './math.js'; // ❌ error thrown

Toolbox Utilities (Helpers)

Utilities work best with named exports if they contain multiple helpers:

math.js
stringUtils.js
domHelpers.js
dateHelpers.js

Named exports are perfect for "toolbox" modules containing many utilities.

Tree-Shaking

Named exports enable bundlers to remove unused code (tree-shaking).

In this example PI, subract, multiply, and divide is removed:

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

When to Use Named Export?

Cases	Why Named Export
Many functions	Clearly lists all functions
Strictness needed	Prevents name typos
Big projects	Improves consistency
Utility sets	Matches module structure
Tree-shaking	Removes unused code automatically

Default Exports

Default Export exports one main value from a module.

This gives a clear intent about what the module's primary functionality is.

If a file is meant to expose one primary function, class, or value, default export makes that explicit:

export default function calculateSum() { ... }

You can have only one default export in a file.

Default is Flexible

Default exports let you import using any name :

import calc from './calculateSum.js';

The name calc does not need to match the original.

Compared to named exports, where the name must match exactly:

import { calculateSum } from './calculateSum.js';

Module File "message.js"

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};
export default message;

Default is Clean

Many libraries expose a single feature as the default:

import React from 'react';

Combining Default + Named

A module can provide one main function plus some helpers:

Module File

export default function parse() { ... }
export function validate() { ... }
export function format() { ... }

Module Script

import parse, { validate, format } from './parser.js';

When to Use Default Export?

When	Why
One main purpose	Good for modules with a primary function
Flexible naming	Importers can choose any name
Cleaner imports	Shorter and simpler import syntax
Common pattern	Frameworks use it for the main API