AI Workshop: learn to build apps with AI →
ES Modules: Default exports

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


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

You usually use a default export when you export a 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 and assign it 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 usually do, but some libraries offer this option for 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:

0: Introduction
1: Using import and export
2: .mjs files
3: ▶︎ Default exports
4: Multiple exports
5: Renaming exports
6: Using the `script` tag