export
Makes functions, classes, and values from a module available so other files can import them.
Example
#// points.js
export const MAX_POINTS = 1000
export function addPoints(current, amount) {
return Math.min(current + amount, MAX_POINTS)
}
// main.js
import { addPoints, MAX_POINTS } from './points.js'
console.log(addPoints(990, 50), MAX_POINTS)1000 1000
Definition and usage
#The export statement decides what from a given file is visible to the outside. Anything you don’t export stays private to the module. It’s a simple way to hide implementation details and expose only a deliberate set of functions.
A file can have any number of named exports: you add export before a declaration, or collect names at the end in export { a, b }. There can only be one default export (export default), and it usually marks the main thing a file offers, like a component or a class.
You can also forward another module’s exports: export { name } from "./file.js" or export * from "./file.js". That’s how you build index.js files that gather exports from a whole folder in one place.
Syntax
#export const name = value
export function name() {}
export class Name {}
export { name1, name2 as alias }
export default expression
export { name } from './module.js'
export * from './module.js'More examples
#// format.js
function formatDate(date) {
return date.toISOString().slice(0, 10)
}
function formatPoints(points) {
return `${points} pts`
}
export { formatDate, formatPoints as points }
// main.js
import { formatDate, points } from './format.js'
console.log(points(75))
console.log(formatDate(new Date('2026-09-28T12:00:00Z')))75 pts 2026-09-28
// leaderboard.js
export default function renderLeaderboard(players) {
return players.map((player, index) => `${index + 1}. ${player}`).join('\n')
}
// main.js
import renderBoard from './leaderboard.js'
console.log(renderBoard(['Mia', 'Emma']))1. Mia 2. Emma
// components/index.js
export { default as Button } from './Button.js'
export { default as Card } from './Card.js'
export * from './icons.js'
// main.js
import { Button, Card, StarIcon } from './components/index.js'Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Prefer named exports. Editors autocomplete them better, and every import uses the same name, so they’re easier to find across the project.
export * fromdoesn’t forward a default export. You have to point to it explicitly:export { default } from "./file.js".
Related entries
#- importLoads values exported from another ES module: functions, classes, constants, or a whole module.
- constDeclares a block-scoped constant. A variable like this can’t be assigned a new value.
- functionDeclares a named function: a block of code with parameters that you can call any number of times and that can return a result.
- classDefines a class: a template for creating objects that share the same fields and methods.
Spotted a mistake or missing an example? Write to us.