Beginner’s Guide: Named Export vs Default Export for getToken in JS/TS

Many beginners wonder why having two getToken exports in a file does not cause an error.

Problem Code (Common Pattern)

// Method 1
export async function getToken() { }

// Method 2
export default { getToken };

Key point: This is not duplicate code; they do not conflict.

The two statements represent completely different export modes with very different usage patterns.

Named Export (export async function getToken)

Core Features

Exports the function itself directly.

Import must use curly braces {}.

The exported name must match the function name exactly.

Correct Import & Use

// Import
import { getToken } from './path/to/file';

// Call directly
await getToken();

Default Export (export default { getToken })

Core Features

Exports an object; getToken is a method of that object.

Import does not require curly braces.

The imported name can be any identifier you choose.

Correct Import & Use

// Name can be anything, e.g., utils or tokenApi
import utils from './path/to/file';

// Call via the object
await utils.getToken();

Side‑by‑Side Comparison

The two export styles serve different needs: named export for on‑demand, lightweight imports, and default export for bundling multiple utilities into a single object.

Why Use Both in a Project? (Enterprise‑grade Practice)

When you need on‑demand imports → use named export (lightweight, reduces redundancy).

When you need unified management of utility methods → use default export object (allows unlimited addition of methods).

Future extensions can add setToken, removeToken, etc., into the default‑exported object.

Mnemonic for Beginners

Braces {} mean individual export; no braces means bundled export.

Named export name is fixed; default export name can be customized.

Full Practical Example (Copy‑Paste Ready)

1. Utility File (token.js)

// Named export: expose function individually
export async function getToken() {
  // Simulate backend token retrieval
  return "Bearer_123456789";
}

// Additional utility methods
export async function setToken() {}
export async function removeToken() {}

// Default export: bundle all methods
export default {
  getToken,
  setToken,
  removeToken
};

2. Usage 1: On‑Demand Import (Named Export)

// Import only the needed method
import { getToken } from "./token.js";

const token = await getToken();
console.log("Fetched token:", token);

3. Usage 2: Whole Import (Default Export)

// Import the whole utility object with any name
import tokenUtils from "./token.js";

const token = await tokenUtils.getToken();
await tokenUtils.setToken();
console.log("Utility token:", token);

4. Core Advantages Summary

On‑demand import: concise code, reduces project bloat.

Whole import: unified management, fits global utility usage.

Dual export compatibility: covers all import scenarios, a common enterprise convention.