Default vs Named Exports

Default Vs Named
πŸ‘¨β€πŸ’Ό There are two ways to export from modules: named exports and default exports. Let's understand when to use each.
// utils.ts
export function formatDistance(meters: number) {
	return `${meters}m`
}

export function formatDuration(seconds: number) {
	return `${seconds}s`
}

export default class UnitFormatter {
	formatDistance(meters: number) {
		return formatDistance(meters)
	}
}
🐨 Open
utils.ts
and
index.ts
and:
  1. In utils.ts:
    • Export formatCurrency and formatDate as named exports
    • Export the Formatter class as the default export
  2. In index.ts:
    • Import the named helpers and the default Formatter
    • Re-export formatCurrency, formatDate, and Formatter
Observable values from the provided implementations:
  • formatCurrency(99.99) β†’ '$99.99'
  • formatDate(new Date(2024, 0, 15, 12, 0, 0)) matches 1/15/2024
  • new Formatter() exposes the same formatting methods
πŸ“œ MDN - Export

Please set the playground first

Loading "Default vs Named Exports"
Loading "Default vs Named Exports"
Login to get access to the exclusive discord channel.
Loading Discord Posts