What is export default in JavaScript ?

The export statement is used when creating JavaScript modules to export objects, functions, variables from the module so they can be used by other programs with the help of the import statements.
There are two types of exports. One is Named Exports and other is Default Exports.

Named Exports: Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.

filter_none

edit
close

play_arrow

link
brightness_4
code

// Exporting individual features
export var name1 = …, name2 = …, …, nameN; // also let, const
  
// Export list
export { name1, name2, …, nameN };
  
//Exporting everything at once
export { object, number, x, y, boolean, string }
  
// Renaming exports
export { variable1 as name1, variable2 as name2, …, nameN };
  
// export features declared earlier
export { myFunction, myVariable }; 

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

//file math.js
function square(x) {
  return x * x;
}
function cube(x) {
  return x * x;
}
export { square, cube };
  
   
//while importing square function in test.js
import { square, cube } from './math;
console.log(square(8)) //64
console.log(cube(8)) //512

chevron_right


Output:

64
512

Default Exports: Default exports are useful to export only a single object, function, variable. During the import, we can use any name to import.

filter_none

edit
close

play_arrow

link
brightness_4
code

// file module.js
var x=4; 
export default x;
  
// test.js
// while importing x in test.js
import y from './module'
// note that y is used import x instead of 
// import x, because x was default export
console.log(y);        
// output will be 4

chevron_right


Output



4

Another example of Default Exports with function

filter_none

edit
close

play_arrow

link
brightness_4
code

// file math.js
export default function square(x) {
  return x * x;
}
  
//while importing square function in test.js
import square from './math;
console.log(square(8)) //64

chevron_right


Output:

64

Using Named and Default Exports at the same time: It is possible to use Named and Default exports in the same file. It means both will be imported in the same file.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

//module.js
var x=2;
const y=4;
function fun() {
   return "This a default export."
}
function square(x) {
  return x * x;
}
export { fun as default, x, y, square };

chevron_right


While importing this module.js we can use any name for fun because it is a default export and curly braces for other named exports.

filter_none

edit
close

play_arrow

link
brightness_4
code

//test.js file
import anyname, { x, y, square} from './module.js';
console.log(anyname()); //This is a default export.
console.log(x); //2

chevron_right


Output

This is a default export.
2

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.