`export const` vs. `export default` in ES6

javascript ecmascript-6 es6-modules
ajmajmajma picture ajmajmajma · Nov 9, 2015 · Viewed 116.3k times · Source

I am trying to determine if there is any big differences between these two, other than being able to import with export default by just doing:

import myItem from 'myItem';

And using export const I can do:

import { myItem } from 'myItem';

I am wondering if there are any differences and/or use cases other than this.

Answer

David Sherret picture David Sherret · Nov 9, 2015

It's a named export vs a default export. export const is a named export that exports a const declaration or declarations.

To emphasize: what matters here is the export keyword as const is used to declare a const declaration or declarations. export may also be applied to other declarations such as class or function declarations.

Default Export (export default)

You can have one default export per file. When you import you have to specify a name and import like so:

import MyDefaultExport from "./MyFileWithADefaultExport";

You can give this any name you like.

Named Export (export)

With named exports, you can have multiple named exports per file. Then import the specific exports you want surrounded in braces:

// ex. importing multiple exports:
import { MyClass, MyOtherClass } from "./MyClass";
// ex. giving a named import a different name by using "as":
import { MyClass2 as MyClass2Alias } from "./MyClass2";

// use MyClass, MyOtherClass, and MyClass2Alias here

Or it's possible to use a default along with named imports in the same statement:

import MyDefaultExport, { MyClass, MyOtherClass} from "./MyClass";

Namespace Import

It's also possible to import everything from the file on an object:

import * as MyClasses from "./MyClass";
// use MyClasses.MyClass, MyClasses.MyOtherClass and MyClasses.default here

Notes

  • The syntax favours default exports as slightly more concise because their use case is more common (See the discussion here).

  • A default export is actually a named export with the name default so you are able to import it with a named import:

    import { default as MyDefaultExport } from "./MyFileWithADefaultExport";

Related questions

Is it possible to import modules from all files in a directory, using a wildcard?

With ES6, I can import several exports from a file like this: import {ThingA, ThingB, ThingC} from 'lib/things'; However, I like the organization of having one module per file. I end up with imports like this: import ThingA from …

Read More
How can I alias a default import in JavaScript?

Using ES6 modules, I know I can alias a named import: import { foo as bar } from 'my-module'; And I know I can import a default import: import defaultMember from 'my-module'; I'd like to alias a default import and I had …

Read More
Javascript ES6 export const vs export let

Let's say I have a variable that I want to export. What's the difference between export const a = 1; vs export let a = 1; I understand the difference between const and let, but when you export them, what are the differences?

Read More