Difference Between Default & Named Exports in JavaScript

Last Updated : 24 Jan, 2025

In JavaScript, exports allow you to share code between modules. There are two main types: default exports and named exports.

Used to export functions, objects, or variables.
Default exports allow importing with any name.
Named exports require importing by the exact name.

Named Exports

Named exports let us export several things from a module, giving each one a specific name. This makes it clear which thing we're importing into other modules. Named exports are useful when we need to share multiple functionalities.

JavaScript

// math.js:
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

JavaScript

// app.js:

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

console.log(add(2, 3));       
console.log(subtract(5, 2));

Exporting Functions: In math.js, we define two functions, add and subtract, and export them using the export keyword.
Importing Functions: In app.js, we import the add and subtract functions from math.js using their exact names enclosed in curly braces {}.
Using Imported Functions: We then use these imported functions to perform calculations and log the results.

Output:

5
3

Default Exports

Default exports in JavaScript allow a module to export a single value or entity as the default export. Unlike named exports, which allow you to export multiple values from a module, default exports allow you to export only one value per module.

JavaScript

// math.js 
//Exporting a function as the default export
export default function add(a, b) {
  return a + b;
}

JavaScript

//app.js
// Importing the default export
import addFunction from './math.js';

console.log(addFunction(2, 3));

Exporting: In math.js, the add function is exported as the default export using the export default syntax.
Importing: In app.js, the default export is imported without curly braces, and you can assign any name to it—in this case, addFunction.
Usage: The imported function is then called with arguments 2 and 3, resulting in the output 5.

Output:

Named and Default Exports Together

In JavaScript, you can combine named exports and a default export within the same module. This approach allows you to export multiple functionalities, with one serving as the primary export and others as supplementary exports.

Example: The below code explain Named and Default Exports Together.

JavaScript

// utils.js

// Named exports
export function square(x) {
  return x * x;
}

export function double(x) {
  return x * 2;
}

// Default export
export default function greet(name) {
  return `Hello, ${name}!`;
}

JavaScript

// main.js

// Importing both named and default exports
import greet, { square, double } from './math.js';

console.log(greet('Alice'));
console.log(square(4));
console.log(double(5));

Output:

Hello, Alice! 
16
10

Difference between Named exports and Default exports

Named exports	Default exports
With named exports, you can export multiple variables, functions, or classes from a single module.	Default export is used to export a single value from a module. This value can be a function, object, class, etc.
Each exported entity is given a name, and you import them using those exact names.	Unlike named exports, there can only be one default export per module.
To export a variable, function, or class using named exports, you typically use the export keyword followed by the name of the entity you want to export.	To export a value as the default export, you typically use the export default syntax.
When importing named exports, you enclose the names in curly braces {} and use the exact names specified during export.	When importing the default export, you don't need to use curly braces {}. Instead, you can specify any name for the imported value.