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:

Export formatCurrency as a named export
Export formatDate as a named export
Export a Formatter class as the default export

📜 MDN - Export

Previous Next

03. Modules/02. Default vs Named Exports (💪 problem)

Default vs Named Exports