Difference Between Default & Named Exports in JavaScript

In JavaScript module facilitates the “export”, of variables, functions, or classes from one module to another. This system primarily offers two approaches for exporting, Named Exports and Default Exports.

Named exports to allow multiple values to be exported from a module with specific names, while default exports are used for single value or module export, allowing flexibility in import naming conventions.

Use the below approaches for Default and Named Exports:

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.

Example of Named Exports in JavaScript:

In this approach, we are exporting three individual constants/functions (PI, square, and double) from the module. Each of these exports can then be imported individually in another module. In, anotherModule.js we import the exported values (PI, square, and double) from module.js. These names must match the names used in the export statements in module.js.

Example: Illustration of Named Exports in JavaScript.

JavaScript

// module.js

export const PI = 3.14159;
export const square = x => x * x;
export const double = x => x * 2;

JavaScript

// anotherModule.js

import { PI, square, double } from './module';

console.log(PI);
console.log(square(5));
console.log(double(10)); 

Output:

3.14159
25
20

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.

Example of Default Exports in JavaScript:

In this approach, we have a module named module.js that exports a single value greeting as the default export. The export default syntax is used to specify the default export. In anotherModule.js, we import the default export from module.js using the import statement. Unlike named exports, there are no curly braces {} around the imported value.

Example: The below code explain Default Exports.

JavaScript

// module.js

const greeting = "Hello, world!";
export default greeting;

JavaScript

// anotherModule.js

import greeting from './module';

console.log(greeting);

Output:

Hello, world!

Named and Default Exports Together

In this approach, combining named and default exports in JavaScript allows a module to export both a default value (or entity) and named values. We have three functions: square, double, and greet. square and double are exported as named exports using the export function syntax. The greet is exported as the default export using the export default function

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

JavaScript

// utils.js

const PI = 3.14159;

export function square(x) {
  return x * x;
}

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

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

JavaScript

// main.js

import greet, { square, double } from './utils';

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

Output:

Hello, Alice! 
25 
20

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.