JavaScript Modules Export

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"

// export name and age

export const name = "Jesse";

export const age = 40;

You import named exports by wrapping them in { }.

The names must match exactly.

Module Script

// Import name and age

import { name, age } from "./person.js";

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.

Example

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

Tree-Shaking

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

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

Example

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

When to Use Named Export?

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:

Example

export default function calculateSum() { ... }

Default is Flexible

Default exports let you import using any name:

Example

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:

Example

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

Try it yourself using the module file named message.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:

Example

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() { ... }

When to Use Default Export?