Topic 12224 min readStructured Tutorial

JavaScript Modules: Named Exports

Quick Answer

Named exports in JavaScript modules allow you to export multiple values by name from a module. They enable selective importing and help organize code by explicitly exporting functions, objects, or variables with their identifiers.

Learning Objectives

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

Introduction to Named Exports

JavaScript modules help organize code by splitting it into reusable pieces. Named exports allow you to export multiple values from a module by their specific names.

Using named exports makes it easy to import only what you need, improving code clarity and maintainability.

Explicit exports lead to clearer and more maintainable code.

What Are Named Exports?

Named exports let you export several values from a module by their names. Each exported item is explicitly named, making it clear what is available to other modules.

This contrasts with default exports, which export a single value without a name.

Export multiple functions, variables, or objects by name.
Importers can selectively import only the needed exports.
Helps avoid naming conflicts by using explicit names.

Syntax of Named Exports

There are two main ways to create named exports: inline and separate export statements.

Inline exports declare and export in one step, while separate exports declare first and export later.

Named Export Syntax Examples
Method	Example
Inline Export	export const pi = 3.14; export function greet() { console.log('Hello'); }
Separate Export	const pi = 3.14; function greet() { console.log('Hello'); } export { pi, greet };

Importing Named Exports

To use named exports from another module, you import them by their exact exported names inside curly braces.

You can also rename imports using the `as` keyword to avoid naming conflicts.

Use curly braces to import specific named exports.
Rename imports with `as` to avoid clashes.
Import multiple named exports in one statement.

Examples of Named Exports and Imports

Let's look at a practical example demonstrating named exports and imports.

Module with Named Exports

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

Importing Named Exports

Another module imports the named exports selectively and uses them.

Practical Example

This module exports a constant `pi` and a function `square` using named exports.

This code imports the named exports `pi` and `square` from the `mathUtils.js` module and uses them.

Examples

Named Exports Example

// mathUtils.js
export const pi = 3.14159;
export function square(x) {
  return x * x;
}

This module exports a constant `pi` and a function `square` using named exports.

Importing Named Exports Example

import { pi, square } from './mathUtils.js';
console.log(pi); // 3.14159
console.log(square(4)); // 16

This code imports the named exports `pi` and `square` from the `mathUtils.js` module and uses them.

Best Practices

Always name exports clearly to reflect their purpose.
Use named exports when exporting multiple values from a module.
Import only the needed exports to keep code efficient.
Use aliasing (`as`) to avoid naming conflicts during import.

Common Mistakes

Forgetting to use curly braces when importing named exports.
Trying to import a named export that does not exist in the module.
Mixing default and named exports incorrectly.
Not matching the exact exported names during import.

Hands-on Exercise

Create a Module with Named Exports

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

Expected output: A working example where the imported functions and constant are used correctly.

Hint: Use `export` keyword before declarations or export them together at the end.

Interview Questions

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

Interview

Named exports allow exporting multiple values by their names, requiring importers to use the same names. Default exports export a single value without a name, allowing importers to name it arbitrarily.

How do you rename a named export during import?

Interview

You can rename a named export during import using the `as` keyword, for example: `import { originalName as aliasName } from './module.js';`.

What is Named Exports, and why is it useful?

Beginner

Named exports in JavaScript modules allow you to export multiple values by name from a module.