Introduction
For those who’ve been working with JavaScript, you’ve got in all probability come throughout the time period export default and puzzled what it’s or the way it works. This Byte is supposed for builders with a fundamental understanding of JavaScript, who want to deepen their information of the language’s intricacies. We’ll be taking a better take a look at JavaScript modules and the idea of export default. By the top, you need 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 information. 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 fashionable JavaScript growth.
Think about 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’ve got a module named mathFunctions.js that exports two features: 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 features 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.
Think about the next instance:
// greeting.js
const greeting = 'Hi there, StackAbuse readers!';
export default greeting;
Within the code above, we’ve got 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: Hi there, 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.
Notice: A module can have just one default export, however it may well 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 simply wish to be the primary focus of the module.
Think about a case the place you will have a module that exports a single operate:
// sayHello.js
const sayHello = title => `Hi there, ${title}!`;
export default sayHello;
And you then import it in one other module:
// app.js
import sayHello from './sayHello.js';
console.log(sayHello('StackAbuse readers')); // Output: Hi there, StackAbuse readers!
On this case, utilizing ‘export default’ is smart 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 project to entry the operate.
Bear in mind, whether or not to make use of export default or named exports largely will depend 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 vital a part of mastering JavaScript modules.
Widespread Errors with ‘export default’
So what are some frequent pitfalls/errors that you simply would possibly run into? Right here we’ll take a second to debate some doable errors. Relying in your stage of expertise with JS, it’s possible you’ll run into a number of of the next points.
One frequent mistake is making an attempt to make use of export default greater than as soon as inside the identical module. Bear 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 frequent mistake is utilizing curly braces {} with ‘export default’. That is pointless and results in syntax errors.
// Incorrect utilization!
import { myFunction } from './myModule.js';
Notice: The above syntax is used for named exports, not default exports.
Fixing ‘export default’ Errors
Now that we have checked out some frequent pitfalls, let’s discuss tips on how to repair them.
For those who’re making an attempt to export a couple of worth from a module utilizing export default, take into account 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 right option to import a default export is as follows:
// Right utilization
import myFunction from './myModule.js';
Named Exports
Whereas export default is a handy software, it is not the one option to export values from a JavaScript module. Named exports generally is a good various, particularly once you wish to export a number of values.
In distinction to default exporting, named exports permit you to 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';
Notice: 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 frequent errors, and realized tips on how to repair them. We have additionally mentioned named exports, an identical, but distinct, idea. Hopefully now with a greater understanding, you may run into much less exporting/importing points in your JS code.
