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

by

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";

More Related Contents:

  1. Is it possible to import modules from all files in a directory, using a wildcard?
  2. Pass options to ES6 module imports
  3. Node.js plans to support import/export ES6 (ECMAScript 2015) modules
  4. using brackets with javascript import syntax
  5. ES6 Modules: Undefined onclick function after import
  6. ES2015 import doesn’t work (even at top-level) in Firefox
  7. Which browsers support import and export syntax for ECMAScript 6?
  8. ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
  9. ES6: import module from URL
  10. ES6 Destructuring and Module imports
  11. Is using an ES6 import to load specific names faster than importing a namespace?
  12. Javascript ES6 export const vs export let
  13. ES6 module Import giving “Uncaught SyntaxError: Unexpected identifier”
  14. How can I alias a default import in JavaScript?
  15. Are ES6 module imports hoisted?
  16. Not recommended to use “use strict” in ES6?
  17. Inlining ECMAScript Modules in HTML
  18. What is the defined execution order of ES6 imports?
  19. What is the difference between importing a function expression or a function declaration from a ES6 module?
  20. How will browsers handle ES6 import/export syntax
  21. ES2015 “import” not working in node v6.0.0 with with –harmony_modules option
  22. Re-export default in ES 6 modules
  23. Output an ES module using webpack
  24. How does JavaScript import find the module without an extension?
  25. Why es6 react component works only with “export default”?
  26. How to publish a module written in ES6 to NPM?
  27. Why does the Promise constructor require a function that calls ‘resolve’ when complete, but ‘then’ does not – it returns a value instead?
  28. How should I import the Spatial Illusions milsymbol library into my webpage?
  29. Unnecessary ‘else’ after ‘return’. (No-else-return)
  30. ESLint: “error Parsing error: The keyword ‘const’ is reserved”

Leave a Comment