Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/javascript/difference-between-default-named-exports-in-javascript/ below:

Difference Between Default & Named Exports in JavaScript

Last Updated : 05 Aug, 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 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.

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

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

// 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 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.

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

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

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.

// 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}!`;
}

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

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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4