Topic 12024 min readStructured Tutorial

JavaScript Modules: Understanding the Export Statement

Quick Answer

The export statement in JavaScript allows you to share variables, functions, or classes from one module so they can be imported and used in another. It supports named exports for multiple exports and default exports for a single main export per module.

Learning Objectives

Explain the purpose of Export Statement in a practical learning context.
Identify the main ideas, terms, and decisions involved in Export Statement.
Apply Export Statement in a simple real-world scenario or practice task.

Introduction to JavaScript Export Statement

JavaScript modules help organize code by splitting it into reusable pieces. The export statement is key to sharing code between these modules.

This tutorial explains how to use the export statement effectively, including named and default exports, with clear examples.

Modularity is the key to maintainable and scalable JavaScript applications.

What is the Export Statement?

The export statement allows you to make variables, functions, or classes available outside the current module. Other modules can then import these exports to use them.

Exports can be named or default, depending on how you want to structure your module's interface.

Named exports allow multiple exports per module.
Default export allows a single main export per module.
Exported entities must be imported to be used in other modules.

Named Exports

Named exports let you export multiple bindings by name. Consumers import them using the same names.

You can export declarations inline or separately.

Export variables, functions, or classes by name.
Importers must use the exact exported names or alias them.

Examples of Named Exports

Here are examples showing how to declare named exports.

Default Export

A module can have one default export. This is useful when the module exports a single main value.

Default exports can be imported without curly braces and can be renamed on import.

Use `export default` to declare the default export.
Importers can choose any name for the default import.

Example of Default Export

This example shows how to export and import a default export.

Combining Named and Default Exports

Modules can have both named exports and a default export simultaneously.

This allows flexible APIs where a main export is complemented by additional utilities.

Default export is declared with `export default`.
Named exports are declared with `export` keyword.
Consumers import default and named exports in one statement.

Practical Example

This module exports a constant and a function as named exports.

This code imports the named exports PI and square from the math.js module.

This module exports a single default function named greet.

This code imports the default export from greet.js and calls it.

This module exports a default class and a named function.

Examples

Named Export Example

export const PI = 3.14;
export function square(x) {
  return x * x;
}

This module exports a constant and a function as named exports.

Importing Named Exports

import { PI, square } from './math.js';
console.log(PI); // 3.14
console.log(square(4)); // 16

This code imports the named exports PI and square from the math.js module.

Default Export Example

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

This module exports a single default function named greet.

Importing Default Export

import greet from './greet.js';
console.log(greet('Alice')); // Hello, Alice!

This code imports the default export from greet.js and calls it.

Combining Named and Default Exports

export default class Person {
  constructor(name) {
    this.name = name;
  }
}

export function sayHi() {
  console.log('Hi!');
}

This module exports a default class and a named function.

Best Practices

Use named exports when exporting multiple utilities from a module.
Use default export when the module has a single main export.
Keep export statements clear and consistent for maintainability.
Avoid mixing too many exports in one module to keep code organized.

Common Mistakes

Trying to have multiple default exports in one module.
Forgetting to import exported members before using them.
Using incorrect names when importing named exports without aliasing.
Mixing CommonJS `module.exports` with ES6 `export` syntax.

Hands-on Exercise

Create a Module with Named Exports

Write a module that exports at least two functions and one constant using named exports. Then write another module that imports and uses them.

Expected output: Functions and constant are imported and used correctly without errors.

Hint: Use `export` keyword before declarations and import using curly braces.

Use Default Export in a Module

Create a module that exports a default function. Import it in another file and call it.

Expected output: The default exported function runs and produces expected output.

Hint: Use `export default` for the function and import without curly braces.

Interview Questions

What is the difference between named exports and default exports in JavaScript?

Interview

Named exports allow exporting multiple bindings by name, requiring importers to use the same names. Default export allows a single main export per module, which can be imported with any name.

Can a module have multiple default exports?

Interview

No, a module can only have one default export. Attempting to export more than one default will cause a syntax error.

What is Export Statement, and why is it useful?

Beginner

The export statement in JavaScript allows you to share variables, functions, or classes from one module so they can be imported and used in another.