What is “export default” in javascript?


File: SafeString.js

// Build out our basic SafeString type
function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

export default SafeString;

I have never seen export default before. Are there any equivalent stuff for export default that can be easier to understand?

It's part of the ES6 module system, described here. There is a helpful example in that documentation, also:

If a module defines a default export:

export default function() { console.log("hello!") }

then you can import that default export by omitting the curly braces:

import foo from "foo";
foo(); // hello!

Update: As of June 2015, the module system is defined in §15.2 and the export syntax in particular is defined in §15.2.3 of the ECMAScript 2015 specification.


export default function(){} can be used when the function has no name. There can only be one default export in a file. The alternative is a named export.

This page describes export default in detail as well as other details about modules that I found very helpful.


I am writing this post because (I assume I am tired) I did not quite understood nor MDN, nor other people description and the best way to understand something is to teach it to other people. It's just I don't see a simple answer of the question.

What is “export default” in javascript?

In default export the naming of import is completely independent and we can use any name we like.

I will illustrate this line with a simple example.

Lets say we have 3 modules and an index.html:

  • modul.js
  • modul2.js
  • modul3.js
  • index.html

modul.js

export function hello() {
    console.log("Modul: Saying hello!");
}

export let variable = 123;

modul2.js

export function hello2() {
    console.log("Module2: Saying hello for the second time!");
}

export let variable2 = 456;

modul3.js

export default function hello3() {
    console.log("Module3: Saying hello for the third time!");
}

index.html

<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; //! Here is the important stuff - we name the variable for the module as we like

mod.hello();
console.log("Module: " + mod.variable);

hello2();
console.log("Module2: " + variable2);

blabla();
</script>

The output is:

modul.js:2:10   -> Modul: Saying hello! 
index.html:7:9  -> Module: 123 
modul2.js:2:10  -> Module2: Saying hello for the second time! 
index.html:10:9 -> Module2: 456 
modul3.js:2:10  -> Module3: Saying hello for the third time!

So the longer explanation is:

'export default' is used if you want to export a single thing for a module.

So the thing that is important is "import blabla from './modul3.js'" - we could say instead:

"import pamelanderson from './modul3.js" and then pamelanderson(); This will work just fine when we use 'export default' and basically this is it - it allows us to name it whatever we like when it is default.


P.s. If you want to test the example - create the files first, then allow CORS in the browser -> if you are using firefox type in the url of the browser: about:config -> Search for "privacy.file_unique_origin" -> change it to "false" -> open index.html -> press F12 to open the console and see the output -> Enjoy and don't forget to return the cors settings to default.

P.s.2 Sorry for the silly variable naming

More info @ link2medium, link2mdn1, link2mdn2


As explained on this MDN page

There are two different types of export, named and default. You can have multiple named exports per module but only one default export[...]Named exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.But a default export can be imported with any name

For example:

let myVar; export default myVar = 123; // in file my-module.js

import myExportedVar from './my-module' //  we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export

console.log(myExportedVar);        // will log 123

In my oppinnion the important about default export is, that it CAN be imported with ANY name!

if there is file foo.js which exports default:

export default function foo(){}

it can be imported in bar.js using:

import bar from 'foo'
import Bar from 'foo' //or ANY other name you wish to assign to this import


export default is used to export a single class, function or primitive.

export default function() { } can be used when the function has no name. There can only be one default export in a file.

read more


export default is used to export a single class, function or primitive from a script file.

The export can also be written as

export default function SafeString(string) {
  this.string = string;
}

SafeString.prototype.toString = function() {
  return "" + this.string;
};

This is used to import this function in another script file

Say in app.js, you can

import SafeString from './handlebars/safe-string';

A little about export

As the name says, it's used to export functions, objects, classes or expressions from script files or modules

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

This can be imported and used as

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

Or

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

When export default is used, this is much simpler. Script files just exports one thing. cube.js

export default function cube(x) {
  return x * x * x;
};

and used as App.js

import Cube from 'cube';
console.log(Cube(3)); // 27

There are two different types of export, named and default. You can have multiple named exports per module but only one default export. Each type corresponds to one of the above. Source: MDN

Named Export

export class NamedExport1 { }

export class NamedExport2 { }

// import class
import { NamedExport1 } from 'path-to-file'
import { NamedExport2 } from 'path-to-file'

// OR you can import all at once
import * as namedExports from 'path-to-file'

Default Export

export default class DefaultExport1 { }

// import class
import DefaultExport1 from 'path-to-file' // no curly braces {}

// you can use a different name for the default import

import Foo from 'path-to-file' // this will assign any default export to Foo.