What is "export default" in JavaScript?

Introduction

If you've been working with JavaScript, you've probably come across the term 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.

Understanding JavaScript Modules

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 app.js, we import the add and subtract functions from mathFunctions.js and use them as needed.

What is 'export default'?

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.

How and When to Use 'export default'

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 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.

Common Errors with 'export default'

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';

Fixing 'export default' Errors

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';

Named Exports

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';

Conclusion

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.