Default parameters let a function specify a fallback value directly in its signature when an argument is omitted or undefined. Real-world usage goes beyond simple literals: defaults can reference earlier parameters and even call functions.
1Default Parameters | JavaScript Tutorial - In-Depth Guide Part 1
Default parameters supply a fallback value directly in the function signature, used only when an argument is omitted or explicitly 'undefined'.
function greet(name = 'friend') {
return `Hello, ${name}!`;
}Parameter Fallbacks
2Default Parameters | JavaScript Tutorial - In-Depth Guide Part 2
A default is only used when the argument is 'undefined' — passing 'null' explicitly does NOT trigger it.
greet(); // 'Hello, friend!'
greet(null); // 'Hello, null!'undefined, not null
3Default Parameters | JavaScript Tutorial - In-Depth Guide Part 3
Default expressions are evaluated fresh on every call, and can reference earlier parameters in the same list.
function createRect(width, height = width) {
return width * height; // square by default
}Referencing Earlier Params
4Default Parameters | JavaScript Tutorial - In-Depth Guide Part 4
Default values can be full expressions, including function calls — each call re-evaluates the default independently.
function createTask(name, id = crypto.randomUUID()) {
return { id, name };
}Dynamic Defaults
5Default Parameters | JavaScript Tutorial - In-Depth Guide Part 5
Default parameters combine naturally with destructuring to give every field of an options object its own fallback.
function connect({ host = 'localhost', port = 8080 } = {}) {
return `${host}:${port}`;
}With Destructuring
6Step-by-Step Breakdown
Default parameters supply a fallback value directly in the function signature, used only when an argument is omitted or explicitly 'undefined'.
A default is only used when the argument is 'undefined' — passing 'null' explicitly does NOT trigger it.
Checkpoint: If you call greet(null) where name = "friend" is the default, does the default get used?
- →Yes, null always triggers defaults
- →No, only undefined (or omission) triggers the default
Default expressions are evaluated fresh on every call, and can reference earlier parameters in the same list.
Default values can be full expressions, including function calls — each call re-evaluates the default independently.
Default parameters combine naturally with destructuring to give every field of an options object its own fallback.
Checkpoint: In function connect({ port = 8080 } = {}) {}, why is the = {} needed on the whole parameter?
- →So calling connect() with zero arguments does not throw
- →Purely stylistic, it has no functional effect
Next, we'll explore 'Enhanced Object Literals'.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Give Accessibility-Related Parameters Sensible, Safe Defaults
A component-building function like `createDialog({ closeOnEscape = true, trapFocus = true } = {})` should default accessibility behaviors to their safest, most inclusive setting so consumers get correct behavior even without reading the full API.
SEO Implications
- 1
No Direct SEO Effect
Default parameters are a code-clarity feature; their influence on SEO is limited to reducing bugs in server-side rendering functions that build page markup from optional inputs.
Best Practices
Declare Defaults at the Parameter, Not in the Function Body
Keeping the fallback value in the signature documents the function's contract at a glance and removes a whole category of boilerplate `if (x === undefined)` guard clauses.
Default the Whole Options Object to `{}`
When destructuring a single options parameter, add `= {}` to the parameter itself so calling the function with zero arguments does not throw a TypeError trying to destructure undefined.
Frequent Bugs
Passing `null` explicitly to "clear" a value expecting the parameter default to kick in, then being confused when the function receives `null` instead of the default.
Remember defaults only apply to undefined. If null needs to trigger a fallback too, handle it explicitly inside the function body, e.g. `x = x ?? defaultValue;`.
Destructuring an options parameter without defaulting the object itself (`function f({ a }) {}`) throws when called with no arguments at all.
Add `= {}` as the default for the whole parameter: `function f({ a } = {}) {}`, so a missing argument still destructures safely.
Real-World Examples
A Configurable Retry Helper
A network utility needed sensible retry behavior out of the box while still letting advanced callers override individual settings.
async function fetchWithRetry(url, { retries = 3, delayMs = 500 } = {}) {
for (let attempt = 0; attempt <= retries; attempt++) {
try {
return await fetch(url);
} catch (err) {
if (attempt === retries) throw err;
await new Promise(r => setTimeout(r, delayMs));
}
}
}