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
export const PI = 3.14;
export function square(x) {
return x * x;
}This module exports a constant and a function as named exports.
import { PI, square } from './math.js';
console.log(PI); // 3.14
console.log(square(4)); // 16This code imports the named exports PI and square from the math.js module.
export default function greet(name) {
return `Hello, ${name}!`;
}This module exports a single default function named greet.
import greet from './greet.js';
console.log(greet('Alice')); // Hello, Alice!This code imports the default export from greet.js and calls it.
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?
InterviewNamed 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?
InterviewNo, 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?
BeginnerThe export statement in JavaScript allows you to share variables, functions, or classes from one module so they can be imported and used in another.
MCQ Quiz
1. What is the best first step when learning Export Statement?
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 Export Statement?
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. 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.
B. Export Statement never needs examples
C. Export Statement is unrelated to practical work
D. Export Statement should be learned without checking results
Correct answer: A
The correct option is based on the available topic explanation.
Key Takeaways
- 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.
- 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.
Summary
The export statement is essential for sharing code between JavaScript modules.
Named exports allow multiple exports by name, while default export provides a single main export.
Understanding how to use exports properly leads to modular, maintainable code.
Frequently Asked Questions
Can I export variables and functions together?
Yes, you can export multiple variables and functions together using named exports.
How do I rename an imported named export?
You can rename a named import using the `as` keyword, for example: `import { originalName as alias } from './module.js';`
Is it possible to have both named and default exports in the same module?
Yes, a module can have one default export and multiple named exports simultaneously.
