export default default export

What is export default

The export default syntax introduced in ECMAScript 6 allows module developers to specify a default export value. This default export can be imported without curly braces and can be assigned a custom name during import. Each module can have only one default export, which is typically used to export the module's primary functionality or value.

// module.js
const message = 'Hello World';
export default message;

// app.js
import customName from './module.js';
console.log(customName); // Output: Hello World

Difference Between export default and Named Exports

Unlike named exports, default exports do not require the use of the same name during import. Named exports must use the exact name specified during export and be wrapped in curly braces:

// Named export example
export const name = 'Alice';
export const age = 25;

// Named imports must use the same names
import { name, age } from './module.js';

Default exports, on the other hand, are more flexible and can be assigned any name during import:

// Default export of a function
export default function greet() {
  return 'Hello!';
}

// Can be renamed during import
import sayHello from './greet.js';
console.log(sayHello()); // Output: Hello!

Exporting Anonymous Values

export default can directly export anonymous functions, classes, or object literals, which is useful in certain scenarios:

// Exporting an anonymous function
export default function() {
  return 'Anonymous function';
}

// Exporting an anonymous class
export default class {
  constructor(name) {
    this.name = name;
  }
}

// Exporting an object literal
export default {
  apiKey: '12345',
  baseUrl: 'https://api.example.com'
};

Mixing Default and Named Exports

A module can contain both a default export and named exports, which is particularly useful for organizing complex modules:

// utilities.js
export const PI = 3.14159;
export function square(x) {
  return x * x;
}
export default function calculator() {
  // Calculator implementation
}

// Importing both
import calc, { PI, square } from './utilities.js';

Common Use Cases for Default Exports

1. React Component Exports: In React, default exports are commonly used for components.

// Button.jsx
import React from 'react';

export default function Button(props) {
  return <button {...props} />;
}

// App.jsx
import CustomButton from './Button.jsx';

2. Configuration Object Exports: When a module primarily provides configuration.

// config.js
export default {
  theme: 'dark',
  apiEndpoint: '/api/v1',
  timeout: 5000
};

3. Service Class Exports: When a module primarily provides a service class.

// logger.service.js
export default class Logger {
  log(message) {
    console.log(`[LOG] ${message}`);
  }
}

Re-exporting Default Exports

You can re-export default exports from other modules using the export ... from syntax:

// Re-exporting a default export
export { default } from './other-module.js';

// Re-exporting and renaming a default export
export { default as NewName } from './original-module.js';

// Re-exporting both default and named exports
export { default, namedExport } from './mixed-module.js';

Dynamic Import of Default Exports

When using dynamic imports, the default export appears as the default property on the module object:

// Dynamic import of a default export
import('./module.js').then(module => {
  const defaultExport = module.default;
  console.log(defaultExport);
});

// Using async/await
async function loadModule() {
  const { default: mainFunction } = await import('./module.js');
  mainFunction();
}

Type Hinting for Default Exports (TypeScript)

In TypeScript, you can add type annotations to default exports:

// types.ts
interface User {
  id: number;
  name: string;
}

export default User;

// app.ts
import UserType from './types';
const user: UserType = { id: 1, name: 'Alice' };

Notes on Default Exports

1. Only one default export per module: Attempting to use export default multiple times will result in a syntax error.

// Incorrect example
export default 42;
export default 'hello'; // SyntaxError

2. Default exports can be anonymous: Unlike named exports, default exports do not need to be bound to a specific identifier.

3. Naming flexibility during import: While default imports can be named arbitrarily, meaningful names are recommended for code readability.

4. Difference from CommonJS's module.exports: Although conceptually similar, ES modules' export default differs in syntax and implementation from CommonJS's module.exports.

// CommonJS equivalent
module.exports = function() { /* ... */ };

// Corresponding ES module import
import func from './module.js';