ReviseAlgo Logo

Modules & Bundling

Named Exports vs Default Exports

Master exports in ES Modules. Compare Named Exports and Default Exports in terms of syntax, import rules, and refactoring.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

In ES Modules, there are two primary ways to share values: Named Exports (exporting multiple values using curly braces) and Default Exports (exporting a single fallback value per file).

2. Why It Matters

Choosing the correct export pattern affects code maintainability. For example, named exports enforce consistent variable naming across imports, while default exports allow you to rename the imported variable, which is useful when building component libraries.

3. Real-World Analogy

Think of a Warehouse Shipping Manifest:

  • Named Exports (Labeled Parts Box): A box containing multiple labeled tools: "screwdriver", "wrench", and "hammer". You must request each tool using its exact name. The name remains consistent.
  • Default Export (The Main Appliance): A box containing a single washing machine. You don't need to specify a property name to unpack it; you simply pull the appliance out. The buyer can label the appliance whatever they want in their house ("laundryMachine" or "washer").

4. Named vs Default Exports

Let's contrast the syntax of the two export patterns:

1. Named Exports:

You can declare multiple named exports in a single file. During import, the variable names must match the exported names exactly (unless you use the as alias modifier).

2. Default Exports:

A file can only contain a single default export. You can import default exports without using curly braces, and you can name the imported variable whatever you want.

5. Comparison Table

Feature Named Exports Default Exports
Quantity limit Multiple allowed per file Only one allowed per file
Import Syntax Must use curly braces: { name } No curly braces: Name
Renaming at Import Requires alias: import { name as alias } Can be named freely directly

6. Practical Example

This script demonstrates combining both named and default exports in a single module file:

7. Common Mistakes

  • Using curly braces when importing default exports: Writing import { Button } from './button.js' throws an error if the class was exported as the default export. Omit the curly braces for default exports.
  • Trying to export multiple default values: A module file can only contain a single default export. Attempting to write multiple export default statements throws a SyntaxError.

8. Quick Quiz

Q1: What happens if you try to import a named export 'formatter' without using curly braces?

A) It imports the default export instead (or returns undefined)

B) It throws a SyntaxError during static parsing

Answer: A — The browser treats it as a default import attempt. If the module lacks a default export, the variable resolves to undefined or throws an error.

9. Scenario-Based Challenge

The Module Re-Exporting Router:

An application packages components inside a directory: components/. To keep import paths clean, you want to create an index file: components/index.js that imports and re-exports both named and default exports from child modules in a single step. Write this re-exporting logic.

10. Debugging Exercise

Explain why this import statement throws an error, and how to fix it:

// logger.js
export default function log(msg) {
  console.log(msg);
}
// app.js
import { log } from './logger.js'; // throws SyntaxError or error! Why?
log('Starting...');
View Solution

Diagnosis: The function log is exported as the default export of logger.js. The import statement in app.js uses curly braces, which is the syntax for named exports, causing the import to fail.

Fix: Remove the curly braces to import the default export correctly:

import log from './logger.js'; // Correct default import

11. Interview Questions

🟢 Q1: Compare Named Exports and Default Exports and explain when to use each.

Answer:
• Named Exports: Export multiple values from a single file. Variable names must match exactly when importing, which is best for utility files (like mathematics helpers or formatting modules) that contain multiple helper functions.
• Default Exports: Export a single fallback value per file. Variable names can be customized during import, which is best for files that contain a single class or core component (like a React UI button or page container).

12. Production Considerations

  • • Named Exports for Tree Shaking: Prefer named exports in production utility libraries. Named exports make it easier for bundlers to identify and strip out unused functions during compilation, reducing bundle size.