All 10 ES Modules questions
More in ES Modules
How do you import everything from a module under one namespace object? What's the difference between ES Modules and CommonJS (require/module.exports)? What is tree-shaking and why does it require ES Module syntax? How do dynamic imports (import()) differ from static import statements? Why are ES Module imports 'hoisted' and evaluated before the rest of the module's code runs? What does 'live binding' mean for ES Module exports, and how does it differ from CommonJS? How does top-level await work, and what constraint does it place on modules that import that module? What are import maps and what problem do they solve for browser-native ES Modules? Why can circular module imports (Module A imports B, which imports A) cause subtle bugs?
Advertisement
JavaScript › ES Modules

What's the difference between a named export and a default export?

Beginner

Answer

A module can have any number of named exports (imported with matching names in curly braces), but at most one default export (imported with any name you choose, no braces required).
// math.js
export const PI = 3.14;
export default function add(a, b) { return a + b; }

// main.js
import add, { PI } from './math.js';
Real-world example Using a default export for a component's main class/function, and named exports for its helper utilities.

Common follow-ups: Can a module have both a default export and named exports at the same time?

Design Patterns in JavaScript
All 10 ES Modules questions