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.
| 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
// 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.
import { pi, square } from './mathUtils.js';
console.log(pi); // 3.14159
console.log(square(4)); // 16This 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?
InterviewNamed 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?
InterviewYou 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?
BeginnerNamed exports in JavaScript modules allow you to export multiple values by name from a module.
MCQ Quiz
1. What is the best first step when learning Named Exports?
A. Understand the purpose and basic idea
B. Skip directly to advanced implementation
C. Ignore examples and practice
D. Memorize terms without context
Correct answer: A
Starting with the purpose and basic idea makes later examples and practice easier to understand.
2. Which activity helps reinforce Named Exports?
A. Reading once without practice
B. Building or writing a small practical example
C. Avoiding review questions
D. Skipping the summary
Correct answer: B
A small practical example helps connect the topic to real usage.
3. Which statement is most accurate about this topic?
A. Named exports in JavaScript modules allow you to export multiple values by name from a module.
B. Named Exports never needs examples
C. Named Exports is unrelated to practical work
D. Named Exports should be learned without checking results
Correct answer: A
The correct option is based on the available topic explanation.
Key Takeaways
- 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.
- 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.
Summary
Named exports in JavaScript modules provide a way to export multiple values by name, making code modular and maintainable.
They require explicit naming during export and import, which improves clarity and helps avoid conflicts.
Using named exports effectively allows selective importing and better organization of code.
Frequently Asked Questions
Can a module have both named exports and a default export?
Yes, a module can have multiple named exports and one default export simultaneously.
What happens if I import a named export that does not exist?
Importing a non-existent named export will cause a runtime error indicating that the export is not found.
Do named exports work in all JavaScript environments?
Named exports are part of the ES6 module system and require support from the environment or a bundler/transpiler for older environments.
