Default Parameters0%
Default Parameters
Beginner12 min read•Updated: Jul 11, 2026
Default Parameters in ES6+
Before ES6, handling missing function parameters required defensive checks inside the function body. Modern JavaScript allows developers to define Default Parameters directly in the function declaration header.
1. The Legacy Way vs. The Modern ES6 Way
Legacy Approach (ES5):
JavaScript
function sendEmail(to, subject, priority) {
// Defensive manual fallbacks:
subject = typeof subject !== "undefined" ? subject : "No Subject";
priority = typeof priority !== "undefined" ? priority : "normal";
console.log(`Sending to: ${to} | Subject: ${subject} | Priority: ${priority}`);
}
Modern ES6 Default Parameters:
JavaScript
function sendEmail(to, subject = "No Subject", priority = "normal") {
console.log(`Sending to: ${to} | Subject: ${subject} | Priority: ${priority}`);
}
sendEmail("sumit@mskinstitute.com");
// "Sending to: sumit@mskinstitute.com | Subject: No Subject | Priority: normal"
2. Default Parameters Only Trigger on undefined
[!IMPORTANT]
A default parameter is applied ONLY if the argument passed is
undefined (or completely omitted).
Values like null, 0, false, or "" are treated as valid, explicit inputs and will NOT trigger the default!JavaScript
function setVolume(level = 50) {
console.log(`Volume: ${level}`);
}
setVolume(); // Volume: 50 (Omitted -> default)
setVolume(undefined); // Volume: 50 (undefined -> default)
setVolume(null); // Volume: null (null is explicit! Default NOT triggered!)
setVolume(0); // Volume: 0 (0 is a valid number! Default NOT triggered!)
setVolume(80); // Volume: 80
3. Dynamic and Evaluated Defaults
In JavaScript, default parameter values are evaluated at run-time at the moment of function invocation:
- You can call other functions inside defaults.
- Later parameters can reference earlier parameters in the same signature!
JavaScript
function generateId() {
return Math.random().toString(36).substring(2, 9);
}
function createUser(name, id = generateId(), timestamp = Date.now()) {
return { name, id, timestamp };
}
console.log(createUser("Sumit"));
// { name: "Sumit", id: "k7d8f9a", timestamp: 1773534800000 }
Referencing Earlier Parameters:
JavaScript
function createDimensions(width, height = width * 1.5) {
return { width, height };
}
console.log(createDimensions(100)); // { width: 100, height: 150 }
4. Combining Default Parameters with Destructuring
JavaScript
// Destructuring with default object fallback to prevent "Cannot read properties of undefined"
function connectToDatabase({ host = "localhost", port = 5432, dbName = "msk_db" } = {}) {
console.log(`Connected to ${host}:${port}/${dbName}`);
}
// Can be called with partial config:
connectToDatabase({ host: "db.aws.com" }); // Connected to db.aws.com:5432/msk_db
// Can be called with ZERO arguments without throwing!
connectToDatabase(); // Connected to localhost:5432/msk_db
Interactive Quiz
Practice Quiz
Question 1
When is a default parameter value applied in JavaScript?
Question 2
What is the output of
function multiply(a, b = 2) { return a * b; } multiply(5, null);?Question 3
When are default parameter expressions evaluated in JavaScript?
Question 4
Can a later default parameter use the value of an earlier parameter in the same function declaration?
Question 5
Why is
= {} added at the end of function config({ port = 3000 } = {})?Next Lesson
Enhanced Object Literals
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
| Previous Lesson | Next Lesson |
|---|---|
| Destructuring Arrays and Objects | Enhanced Object Literals |
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.