Difference Between Default & Named Exports in JavaScript (original) (raw)

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:

5

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 explainNamed 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