Sunday, March 31, 2024

What’s "export default" in JavaScript?

Must read


Introduction

If you happen to’ve been working with JavaScript, you’ve got most likely 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 need to deepen their data of the language’s intricacies. We’ll be taking a more in-depth 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 have been launched in ES6 and have since turn out 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’ve 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 = 'Howdy, StackAbuse readers!';

export default greeting;

Within the code above, we’ve 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: Howdy, 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 will probably have a number of named exports.

How and When to Use ‘export default’

export default is often 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 principle focus of the module.

Take into account a case the place you will have a module that exports a single operate:

// sayHello.js
const sayHello = identify => `Howdy, ${identify}!`;

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: Howdy, 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 task to entry the operate.

Keep in mind, whether or not to make use of export default or named exports largely depends upon 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.

Frequent Errors with ‘export default’

So what are some widespread pitfalls/errors that you simply would possibly run into? Right here we’ll take a second to debate some attainable errors. Relying in your degree of expertise with JS, it’s possible you’ll 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 identical 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 identify = "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';

Notice: 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 discuss easy methods to repair them.

If you happen to’re making an attempt to export a couple of worth from a module utilizing export default, take into account combining them into an object.

// Appropriate utilization
let identify = "John";
let age = 25;
export default { identify, age };

As for the second error, do not forget that export default would not require curly braces. The right strategy to import a default export is as follows:

// Appropriate utilization
import myFunction from './myModule.js';

Named Exports

Whereas export default is a handy device, it is not the one strategy to export values from a JavaScript module. Named exports is usually a good various, particularly once you wish to export a number of values.

In distinction to default exporting, named exports let you export a number of values, and every of those exports could be imported utilizing the {} syntax.

// Named exports
export const identify = "John";
export const age = 25;

And they are often imported like so:

// Importing named exports
import { identify, 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 widespread errors, and realized easy methods 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.



Supply hyperlink

More articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest article