Introduction
In case you’ve been working with JavaScript, you’ve got in all probability come throughout the time period export default and questioned what it’s or the way it works. This Byte is supposed for builders with a primary understanding of JavaScript, who want to deepen their information of the language’s intricacies. We’ll be taking a better have a look at JavaScript modules and the idea of export default. By the tip, it is best to have a greater understanding of how and when to make use of export default in your code.
Understanding JavaScript Modules
JavaScript modules are self-contained items of code that may be exported and imported into different JavaScript recordsdata. They assist in organizing code, making it extra maintainable, and extra reusable. JavaScript modules had been launched in ES6 and have since grow to be a core a part of trendy JavaScript growth.
Take into account the next instance:
// mathFunctions.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
export { add, subtract };
Within the code above, we have now a module named mathFunctions.js that exports two capabilities: 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 capabilities from mathFunctions.js and use them as wanted.
What’s ‘export default’?
export default is a syntax utilized in JavaScript modules to export a single entity (be it a operate, object, or variable) because the default export from a module.
Take into account the next instance:
// greeting.js
const greeting = 'Hiya, StackAbuse readers!';
export default greeting;
Within the code above, we have now a module named greeting.js that exports a single string greeting because the default export.
// app.js
import greeting from './greeting.js';
console.log(greeting); // Output: Hiya, StackAbuse readers!
In app.js, we import the default export from greeting.js and use it as wanted. Discover how we did not use curly braces {} to import the default export. That is the aim of the default key phrase.
That is just like the way you’d use exports.greeting = ... vs module.exports = ... in Node.
Be aware: A module can have just one default export, however it could actually have a number of named exports.
How and When to Use ‘export default’
export default is usually used when a module solely has one factor to export. This may very well be a operate, a category, an object, or anything that you just wish to be the primary focus of the module.
Take into account a case the place you’ve gotten a module that exports a single operate:
// sayHello.js
const sayHello = title => `Hiya, ${title}!`;
export default sayHello;
And then you definately import it in one other module:
// app.js
import sayHello from './sayHello.js';
console.log(sayHello('StackAbuse readers')); // Output: Hiya, StackAbuse readers!
On this case, utilizing ‘export default’ is sensible as a result of sayHello is the one operate that the sayHello.js module exports, thus we do not wish to have to make use of a destructuring task to entry the operate.
Keep in mind, whether or not to make use of export default or named exports largely relies on the way you wish to construction your code. Each have their makes use of, and understanding when to make use of every is a crucial a part of mastering JavaScript modules.
Widespread Errors with ‘export default’
So what are some widespread pitfalls/errors that you just would possibly run into? Right here we’ll take a second to debate some attainable errors. Relying in your stage of expertise with JS, you might run into a number of of the next points.
One widespread mistake is making an attempt to make use of export default greater than as soon as inside the similar module. Keep in mind, export default is supposed for a single worth, be it a operate, an object, or a variable.
// Incorrect utilization!
export default let title = "John";
export default let age = 25;
One other widespread mistake is utilizing curly braces {} with ‘export default’. That is pointless and results in syntax errors.
// Incorrect utilization!
import { myFunction } from './myModule.js';
Be aware: The above syntax is used for named exports, not default exports.
Fixing ‘export default’ Errors
Now that we have checked out some widespread pitfalls, let’s speak about the way to repair them.
In case you’re making an attempt to export multiple worth from a module utilizing export default, contemplate combining them into an object.
// Right utilization
let title = "John";
let age = 25;
export default { title, age };
As for the second error, do not forget that export default would not require curly braces. The proper solution to import a default export is as follows:
// Right utilization
import myFunction from './myModule.js';
Named Exports
Whereas export default is a handy instrument, it is not the one solution to export values from a JavaScript module. Named exports is usually a good different, particularly once you wish to export a number of values.
In distinction to default exporting, named exports will let you export a number of values, and every of those exports might be imported utilizing the {} syntax.
// Named exports
export const title = "John";
export const age = 25;
And they are often imported like so:
// Importing named exports
import { title, age } from './myModule.js';
Be aware: You should utilize each export default and named exports in the identical module. Nonetheless, a module can solely have one default.
Conclusion
On this Byte, we have dug into the export default assertion in JavaScript, explored some widespread errors, and realized the way to repair them. We have additionally mentioned named exports, the same, but distinct, idea. Hopefully now with a greater understanding, you may run into much less exporting/importing points in your JS code.
