Few keywords carry two meanings this far apart. Inside a switch, default picks up everything no case anticipated. Inside a module, it names the main thing the file publishes.
The two uses share no technical machinery, but they share an idea: what applies when nothing more specific was asked for. Telling them apart removes most of the confusion around this word.
Definition
default is a reserved word of the language. It introduces the block of a switch that runs when no case matches, or it marks a file's main export together with export.
Being reserved, it cannot be used as a variable name. It remains perfectly valid as a property name, which you meet as soon as a module is loaded dynamically: the default-exported value is read there as tools.default.
A switch's fallback case
Without default, a switch that matches nothing simply does nothing, and that silent non-reaction is a classic source of bugs.
function access(role) {
switch (role) {
case 'admin':
return 'Full access';
case 'member':
return 'Limited access';
default:
return 'No access';
}
}
access('admin'); // 'Full access'
access('visitor'); // 'No access'An unexpected value is handled on purpose, instead of letting the function return undefined.
default does not have to be written last, and that detail holds a surprise: if it does not end with a break or a return, execution keeps running into the case that follows it, exactly as it does between two cases. Placing it at the end saves you from thinking about it.
A module's main export
A file can designate one value as its default export. Whoever imports it then picks whatever name they like.
// button.js
export default function Button(label) {
return '[' + label + ']';
}
// page.js
import Button from './button.js'; // no braces
import MyButton from './button.js'; // the name is yoursTwo rules frame this. A file can only have one default export, while named exports are unlimited. And the missing braces on the import side are not cosmetic: they are what separates the two requests.
| Export | Matching import |
|---|---|
export default x | import x from '...' |
export const x = 1 | import { x } from '...' |
Frequently asked questions
Does a default parameter use this keyword?
No, and the confusion is common. Writing function greet(name = 'guest') does define a default value, but with a plain equals sign, without the word default. The two ideas share a name in English and share nothing in the code.
Should every switch have a default?
It is a good habit as soon as the tested value comes from outside, from a form or an API response for instance. When the possible cases are known and closed, some developers leave it out so that a static analysis tool flags the day a new case appears. When in doubt, write it and report the anomaly from there.
Can a file have two default exports?
No, the file refuses to load. If two values deserve the spotlight, they should become named exports, possibly promoting only one of them to default. More often than not this is a sign that the file does two jobs and would be better split in two.