Difference Between Default & Named Exports in JavaScript

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.

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

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

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.

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

Difference between Named exports and Default exports