Understanding Named and Default Exports in JavaScript ES6 Modules

In JavaScript, particularly when working with ES6 modules, export and export default are used to share code between different files. Understanding the difference between export const data (a named export) and export default data (a default export) is crucial for organizing and maintaining your code effectively. Here's a comprehensive explanation of why and how to use each:

1. Named Exports (export const data)

What It Is: A named export allows you to export multiple values (variables, functions, classes, etc.) from a module. Each exported item must have a unique name within the module.

// data.js
export const data = { /* ... */ };
export const anotherData = { /* ... */ };        

How to Import:

When importing named exports, you must use the exact names of the exported items, and you enclose them in curly braces {}.

// main.js
import { data, anotherData } from './data.js';        

Advantages:

1. Clarity: Since each export has a specific name, it's clear what you're importing.
2. Multiple Exports: You can export multiple items from a single module.
3. Refactoring Safety: If you rename an export, you'll get a clear error in your imports, making it easier to track changes.

Use Cases:

• When a module needs to export multiple utilities or values.
• When you want to enforce explicit imports, enhancing code readability.

2. Default Exports (export default data)

What It Is: A default export is used to export a single value from a module. A module can have only one default export.

// data.js
const data = { /* ... */ };
export default data;

// Or directly
export default { /* ... */ };        

How to Import:

When importing a default export, you can choose any name for the imported value, and you don't use curly braces.

// main.js
import data from './data.js';        

Advantages:

1. Simplicity: Ideal for modules that export a single primary value or functionality.
2. Flexible Naming: The importer can choose any name, which can be convenient.
3. Cleaner Syntax: No need for curly braces, making the import statement shorter.

Use Cases:

• When a module is designed to export one main thing, such as a React component.
• Libraries that provide a single functionality, like export default function().

3. Combining Named and Default Exports

A module can have both named exports and a default export. This allows you to export a primary value alongside additional utilities.

// data.js
export const helper = () => { /* ... */ };
const data = { /* ... */ };
export default data;        

Importing:

// main.js
import data, { helper } from './data.js';        

4. Practical Example

Let's consider a practical scenario to illustrate the differences.

Module with Named Export:

// mathUtils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;        

Importing Named Exports:

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

console.log(add(5, 3));       // Output: 8
console.log(subtract(5, 3));  // Output: 2        

Module with Default Export:

// logger.js
const logger = {
  log: (message) => console.log(message),
  error: (message) => console.error(message),
};

export default logger;        

Importing Default Export:

// app.js
import logger from './logger.js';

logger.log('This is a log message');    // Output: This is a log message
logger.error('This is an error message'); // Output: This is an error message        

Module with Both:

// config.js
export const API_URL = 'https://api.example.com';
const config = {
  appName: 'MyApp',
  version: '1.0.0',
};

export default config;        

Importing Both:

// app.js
import config, { API_URL } from './config.js';

console.log(config.appName); // Output: MyApp
console.log(API_URL);        // Output: https://api.example.com        

6. Choosing Between Named and Default Exports

Use Named Exports When:

• You need to export multiple items from a module.
• You want to maintain explicit and clear imports.
• You aim for easier refactoring and better code maintenance.

Use Default Exports When:

• The module exports a single primary value or functionality.
• You prefer flexibility in naming the imported value.
• You aim for a cleaner import syntax.

Best Practices:

• Consistency: Stick to a consistent export style across your project or follow the conventions of the libraries/frameworks you're using.
• Clarity: Use named exports for better clarity when exporting multiple items.
• Avoid Mixing Excessively: While it's possible to mix both, excessive mixing can lead to confusion. Use it judiciously.

7. Additional Tips

• Re-exporting: You can re-export from another module, which is useful for creating centralized modules.

// utilities.js
export { add, subtract } from './mathUtils.js';
export { default as logger } from './logger.js';        

• Aliasing Imports: When importing named exports, you can alias them to different names.

import { add as addition } from './mathUtils.js';        

• Export All: You can export everything from a module using the * syntax.

export * from './mathUtils.js';