What is export default in JavaScript?

One of the best things a programming language can bring to the table is its ability to provide the programmer with the freedom of modularity. Modularity is essentially the process of dividing a seemingly massive problem into smaller and manageable chunks. And precisely, that is what JavaScript provides with the help of exports.

In the ESMAv6 release of JavaScript, two different types of exports are available to the programmer. One is known as the named exports, and the other is known as the export default, and we will focus on the latter.

What is export default used for?

Export defaults are used to export a single module, variable, expression, or function from a JavaScript file so that it can be used in any other file of either the same program or even in an entirely different program.

To get that exported element in the other file or program, we use an import statement, but the thing with export default is that while importing, we don’t have to worry about the name used in the export file.

How to export a single function using export default?

To demonstrate this, we are going to create two different files, one is going to be a demo file, and the other is going to be an export file like so:

In the export.js file, we are going to create a new function that is going to print us the area of a square using the length of its side as

function areaOfSquare(length) {
return length * length;
}

Now at the end of this file, we are going to use the export default keyword to export this function like

export default areaOfSquare;

Inside the demo.js file, we are going to first of import this function in our program as areaFunction like:

import areaFunction from "./export.js";

After that, we are going to create a length variable, and we are going to define the length of a square:

var length = 4;

Then we can simply print out the of the square using the following console log function as:

console.log("Area of the square is as " + areaFunction(length));

After executing only the demo.js file, we get the following output on our terminal:

You were able to use the function that was exported from the other file.

How to export a variable using export default?

In the export.js file, simply create a new variable named as radiusOfCircle like

var radiusOfCircle = 12;

At the end of the file, simply export this variable using the command:

export default radiusOfCircle;

Now, in the demo.js file, lets first create a function that is going to find us the area of a circle using its radius with the following lines:

function areaOfCircle(radius) {
return 3.1415 * (radius * radius);
}

Now, let’s import the radius from the export.js file with the following line:

import radiusOfCircle from "./export.js";

Finally, let’s print the are of the circle using the following line:

console.log("The area of circle is as : " + areaOfCircle(radiusOfCircle));

After executing, we get the following result on our terminal:

As you can see, we were able to print the area of the circle by using the radius which was defined in the other file.

Conclusion

JavaScript provides two different types of exports that allow the programmer to export a module, expression, string, or literal from one file to another. Export default is used when there is only one export to be made from a particular file and when importing this one element, we don’t have to worry about giving the same name to our import. This combination of export and import allows us to implement modularity.

What is export default in JavaScript?

What is export default used for?

How to export a single function using export default?

How to export a variable using export default?

Conclusion

About the author

Abdul Mannan