Friday, 13 October, 2023 UTC
Summary
Introduction
How and When to Use 'export default'
Fixing 'export default' Errors
Conclusion
If you've been working with JavaScript, you've probably come across the term
Understanding JavaScript Modules
export default and wondered what it is or how it works. This Byte is meant for developers with a basic understanding of JavaScript, who are looking to deepen their knowledge of the language's intricacies. We'll be taking a closer look at JavaScript modules and the concept of export default. By the end, you should have a better understanding of how and when to use export default in your code.JavaScript modules are self-contained pieces of code that can be exported and imported into other JavaScript files. They help in organizing code, making it more maintainable, and more reusable. JavaScript modules were introduced in ES6 and have since become a core part of modern JavaScript development.
Consider the following example:
// mathFunctions.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
export { add, subtract };
In the code above, we have a module named
mathFunctions.js that exports two functions: add and subtract.// app.js
import { add, subtract } from './mathFunctions.js';
console.log(add(2, 3)); // Output: 5
console.log(subtract(5, 2)); // Output: 3
In
What is 'export default'?
app.js, we import the add and subtract functions from mathFunctions.js and use them as needed.export default is a syntax used in JavaScript modules to export a single entity (be it a function, object, or variable) as the default export from a module.Consider the following example:
// greeting.js
const greeting = 'Hello, StackAbuse readers!';
export default greeting;
In the code above, we have a module named
greeting.js that exports a single string greeting as the default export.// app.js
import greeting from './greeting.js';
console.log(greeting); // Output: Hello, StackAbuse readers!
In
app.js, we import the default export from greeting.js and use it as needed. Notice how we didn't use curly braces {} to import the default export. This is the purpose of the default keyword.This is similar to how you'd use
exports.greeting = ... vs module.exports = ... in Node.Note: A module can have only one default export, but it can have multiple named exports.
export default is typically used when a module only has one thing to export. This could be a function, a class, an object, or anything else that you want to be the main focus of the module.Consider a case where you have a module that exports a single function:
// sayHello.js
const sayHello = name => `Hello, ${name}!`;
export default sayHello;
And then you import it in another module:
// app.js
import sayHello from './sayHello.js';
console.log(sayHello('StackAbuse readers')); // Output: Hello, StackAbuse readers!
In this case, using 'export default' makes sense because
sayHello is the only function that the sayHello.js module exports, thus we don't want to have to use a destructuring assignment to access the function.Remember, whether to use
Common Errors with 'export default'
export default or named exports largely depends on how you want to structure your code. Both have their uses, and understanding when to use each is an important part of mastering JavaScript modules.So what are some common pitfalls/errors that you might run into? Here we'll take a moment to discuss some possible mistakes. Depending on your level of experience with JS, you may run into one or more of the following issues.
One common mistake is trying to use
export default more than once within the same module. Remember, export default is meant for a single value, be it a function, an object, or a variable.// Incorrect usage!
export default let name = "John";
export default let age = 25;
Another common mistake is using curly braces
{} with 'export default'. This is unnecessary and leads to syntax errors.// Incorrect usage!
import { myFunction } from './myModule.js';
Note: The above syntax is used for named exports, not default exports.
Now that we've looked at some common pitfalls, let's talk about how to fix them.
If you're trying to export more than one value from a module using
export default, consider combining them into an object.// Correct usage
let name = "John";
let age = 25;
export default { name, age };
As for the second error, remember that
export default doesn't require curly braces. The correct way to import a default export is as follows:// Correct usage
import myFunction from './myModule.js';
While
export default is a convenient tool, it isn't the only way to export values from a JavaScript module. Named exports can be a good alternative, especially when you want to export multiple values.In contrast to default exporting, named exports allow you to export multiple values, and each of these exports can be imported using the
{} syntax.// Named exports
export const name = "John";
export const age = 25;
And they can be imported like so:
// Importing named exports
import { name, age } from './myModule.js';
Note: You can use both
export default and named exports in the same module. However, a module can only have one default.In this Byte, we've dug into the
export default statement in JavaScript, explored some common errors, and learned how to fix them. We've also discussed named exports, a similar, yet distinct, concept. Hopefully now with a better understanding, you'll run into less exporting/importing issues in your JS code.