Introduction
When working with functions in JavaScript, you often pass values (arguments) to control how a function behaves. But what happens if a value is not provided? Without proper handling, this can lead to unexpected results like undefined or errors.
To solve this problem, JavaScript introduced default parameters in ES6 (ECMAScript 2015). Default parameters allow you to assign a default value to a function parameter if no argument (or undefined) is passed.
This feature makes your code more robust, readable, and easier to maintain.
In this guide, you’ll learn everything about JavaScript default parameters, including syntax, examples, real-life use cases, common mistakes, and interview questions.
What are Default Parameters?
Default parameters allow you to initialize function parameters with default values if no value is provided.
- Use default parameters for optional values
- Place them after required parameters
- Use meaningful default values
- Avoid overuse
Syntax of Default Parameters
function functionName(param1 = defaultValue, param2 = defaultValue) {
// code
}
Basic Example:
function greet(name = "Guest") {
console.log("Hello " + name);
}
greet(); // Hello Guest
Output:
Note: If no argument is passed, “Guest” is used.
Why Use Default Parameters?
There are many reasons to use Default Parameters.
- Prevent undefined values
- Improve code readability
- Reduce the need for conditional checks
- Make functions more reliable
- Simplify function logic
When Default Parameters Work
Default values are used when:
- No argument is passed
- The argument is undefined
Example:
function test(x = 10) {
console.log(x);
}
test(); // 10
test(undefined); // 10
test(null); // null
Output:
10
null
Note: null does NOT trigger the default value.
Default Parameters vs Old Method
Before ES6, developers used manual checks.
Old Way:
function greet(name) {
name = name || "Guest";
console.log(name);
}
greet();
Output:
Modern Way:
function greet(name = "Guest") {
console.log(name);
}
greet();
Output:
Multiple Default Parameters
When you pass multiple default parameters in the function.
Example:
function calculate(a = 10, b = 20) {
return a + b;
}
console.log(calculate()); // 30
Output:
Default Parameters with Functions
You can use functions as default values.
function getValue() {
return 10;
}
function test(x = getValue()) {
console.log(x);
}
test();
Output:
Real-Life Examples
You will see some real-life examples
1. Implement Pagination
function paginate(page = 1, limit = 10) {
console.log(`Page: ${page}, Limit: ${limit}`);
}
2. API Request
function fetchData(url, method = "GET") {
console.log(`Fetching ${url} with ${method}`);
}
Common Mistakes
Beginners make some common mistakes.
1. Passing null instead of undefined
function test(x = 10) {
console.log(x);
}
test(null); // null
Output:
2. Incorrect Parameter Order
In JavaScript, parameters with default values should generally come after normal parameters.
❌ Incorrect Parameter Order
function greet(name = "Guest", age) {
console.log(name, age);
}
✅ Correct Parameter Order
function greet(age, name = "Guest") {
console.log(name, age);
}
greet(35);
greet(35, "John");
Output:
John 35
Conclusion
JavaScript default parameters are a powerful feature that makes your functions more flexible and reliable. They eliminate the need for manual checks and help prevent unexpected undefined values.
By using default parameters effectively, you can write cleaner, more maintainable, and professional JavaScript code.