ES6 Export vs Export Default
Export is introduced in ES6. It lets you export functions, objects, classes, or expressions from script files or modules. You export the items in one JS module to import them into multiple other modules. It enables code reusability
There are two ways you can export
  1. 1.
    Named export
  2. 2.
    Default export

Named Export

Let's start with a JS utils file that contains functions and classes to be reused by other modulexport function stringFormatter(text){
utils.js
return text.replace(" ", "_")
}
export class Wrapper{
}
And to import this into another module, you have to mention them by their name
app.js
import {stringFormatter, Wrapper} from './utils'

Default Export

  • There can be only one default export per module
  • Default exports can be renamed in the importing file
utils.js
export function stringFormatter(text){
return text.replace(" ", "_")
}
export default class Wrapper{
}
app.js
import {stringFormatter, Wrapper} from './utils'
import Wrapper, {stringFormatter} from './utils'
import WrapperNameChanged from './utils'
All the above statements are valid
Copy link
On this page
Named Export
Default Export