1. Introduction
Default parameters let you specify fallback values for function arguments that are not provided, avoiding manual checks like if (x === undefined). Rest parameters let a function accept an indefinite number of arguments as a real array, replacing the older, more limited arguments object. Together they make function signatures more flexible and expressive.
Cricket analogy: Default parameters are like a scorecard app that automatically fills in 'not out' if a dismissal isn't recorded, avoiding a manual check every time; rest parameters are like letting a team submit an unlimited list of substitute names as one real, sortable list instead of the old clunky handwritten notes.
2. Syntax
// default parameter
function greet(name = "Guest") {
return `Hello, ${name}`;
}
// rest parameter (must be last)
function sum(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
// combined
function createUser(id = 0, ...roles) {
return { id, roles };
}3. Explanation
A default parameter value is used only when the corresponding argument is omitted or explicitly passed as undefined. Default values are not evaluated once when the function is defined — they are evaluated every time the function is called without that argument, so they can safely reference other parameters or call functions.
Cricket analogy: A default parameter is like a substitute fielder rule that only kicks in when a specific fielder is actually absent from that over, freshly decided each time based on who's currently on the field, not locked in once at the start of the match — it can even depend on who else is already fielding.
Rest parameters collect all remaining arguments into a real array (with methods like map, filter, and reduce available directly), and must be the last parameter in the function signature. This is different from the old arguments object, which is array-like but not a true array, includes every argument (even before named parameters), and is unavailable inside arrow functions.
Cricket analogy: Rest parameters gathering every remaining argument into a real array is like a scorer collecting every extra-run entry from an over into one proper list that can be summed and filtered afterward, and this rest list must be the very last item recorded per over; this is unlike the old habit of scribbling all deliveries onto one messy tally sheet that included even the pre-over warm-up balls and wasn't usable in the shorthand 'quick notes' style of scoring.
Gotcha: Default parameters are re-evaluated on every call that omits the argument, not calculated once. If a default value calls a function with side effects, that function runs again each time. Also, rest parameters produce a genuine Array, while the legacy arguments object is only array-like — arguments.map(...) throws a TypeError unless you first convert it with Array.from(arguments) or [...arguments].
4. Example
let base = 10;
function increment() {
base += 1;
return base;
}
function logCounter(count = increment()) {
console.log("count:", count);
}
logCounter();
logCounter();
logCounter(100);
function sumAll(...numbers) {
return numbers.reduce((total, n) => total + n, 0);
}
console.log(sumAll(1, 2, 3, 4));5. Output
count: 11
count: 12
count: 100
106. Key Takeaways
- Default parameters supply a fallback value when an argument is missing or undefined.
- Default values are evaluated at call time, every time the argument is omitted — not just once.
- Rest parameters (...name) gather remaining arguments into a real array and must be the last parameter.
- Rest parameters are preferred over the legacy arguments object because they are true arrays and work in arrow functions.
- A function can combine regular parameters, default parameters, and a trailing rest parameter.
Practice what you learned
1. When is a default parameter value used?
2. In the example, why does the second call to logCounter() print 'count: 12' instead of 'count: 11' again?
3. What must be true about a rest parameter's position in a function signature?
4. How does a rest parameter differ from the legacy arguments object?
5. What does sumAll(1, 2, 3, 4) return in the example, using ...numbers and reduce?
Was this page helpful?
You May Also Like
Functions in JavaScript
Learn how to declare, invoke, and understand the hoisting behavior of JavaScript functions.
Spread and Rest Operators in JavaScript
Understand the dual use of the `...` syntax: spreading elements out to copy or merge arrays/objects, and collecting elements into a rest parameter.
Function Expressions and Arrow Functions
Compare function expressions and arrow functions, and understand how arrow functions handle this, arguments, and prototype differently.
Common Array Methods in JavaScript
Explore the most-used array methods, split into mutating methods that change the original array and non-mutating methods that return a new array.
Related Reading
Related Study Notes in Programming
Browse all study notesApache Spark Study Notes
Programming · 30 topics
ProgrammingApache Flink Study Notes
Programming · 30 topics
ProgrammingHadoop Study Notes
Programming · 30 topics
ProgrammingSnowflake Study Notes
Programming · 30 topics
ProgrammingApache Airflow Study Notes
Programming · 30 topics
Programmingdbt (Data Build Tool) Study Notes
Programming · 30 topics