Sometimes you’ll see the default keyword being used to create default exports.

A default export is usually made when you export one single thing from a file:

const age = 18

export default age

test.js

Then you can import it from another file using this syntax:

import age from './test.js'

It seems simpler, but the problem (and the reason why this approach is generally avoided) is that we can import that value assigning any name we want, for example:

import name from './test.js'

and it works in the same way, name is assigned the value of the default export age.

Also, we cannot have more than one default export, so if you want to export something else later on you’ll have to use named exports.

Note that you can also use both at the same time, not something you’d do usually, but some libraries sometimes offer this option to offer a more granular access to what they export:

const age = 18

export default age

const name = 'Test'

export { name }

test.js

import age from './test.js'
import { name } from './test.js'

Lessons in this unit: