Named Export vs Default Export in ES6

Alankar Anand
Mar 17, 2018 · 2 min read

ES6 provides us to import a module and use it in other files. Strictly speaking in React terms, one can use stateless components in other components by exporting the components from their respective modules and using it in other files.

ES6 provides two ways to export a module from a file: named export and default export.

Named Export: (export)

With named exports, one can have multiple named exports per file. Then import the specific exports they want surrounded in braces. The name of imported module has to be the same as the name of the exported module.

// imports
// ex. importing a single named export
import { MyComponent } from "./MyComponent";
// ex. importing multiple named exports
import { MyComponent, MyComponent2 } from "./MyComponent";
// ex. giving a named import a different name by using "as":
import { MyComponent2 as MyNewComponent } from "./MyComponent";
// exports from ./MyComponent.js file
export const MyComponent = () => {}
export const MyComponent2 = () => {}

Import all the named exports onto an object:

import * as MainComponents from "./MyComponent";
// use MainComponents.MyComponent and MainComponents.MyComponent2
here

Default Export: (export default)

One can have only one default export per file. When we import we have to specify a name and import like:

// importimport MyDefaultComponent from "./MyDefaultExport";// exportconst MyComponent = () => {}export default MyComponent;

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

Image for post
Image for post
we can use made up names but keep it relevant.

From Documentation:

Checkout my other posts:

  1. Why is customer acquisition a wrong metric to measure startup’s growth.
  2. What’s the difference between super and super(props) in ES6.
  3. CurrentTarget vs Target in Js.
  4. A brief introduction of Node, React and NPM.
  5. Getting rid of relative paths in import statement using webpack aliases.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store