Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Effective Function Signatures with Default and Rest Parameters in JavaScript
JavaScript function signatures with default and rest parameters allow you to create flexible functions that handle variable arguments and provide fallback values when parameters are missing.
Default Parameters
Default parameters provide fallback values when arguments are undefined or not passed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Default Parameters</title>
</head>
<body>
<div id="result"></div>
<script>
function greet(name = "Guest", greeting = "Hello") {
return `${greeting}, ${name}!`;
}
document.getElementById("result").innerHTML =
greet() + "<br>" +
greet("Alice") + "<br>" +
greet("Bob", "Hi");
</script>
</body>
</html>
Hello, Guest! Hello, Alice! Hi, Bob!
Rest Parameters
Rest parameters (...param) collect multiple arguments into an array:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rest Parameters</title>
</head>
<body>
<div id="output"></div>
<script>
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
document.getElementById("output").innerHTML =
"sum(1, 2, 3): " + sum(1, 2, 3) + "<br>" +
"sum(10, 20): " + sum(10, 20) + "<br>" +
"sum(): " + sum();
</script>
</body>
</html>
sum(1, 2, 3): 6 sum(10, 20): 30 sum(): 0
Combining Default and Rest Parameters
You can combine both patterns for maximum flexibility. Here's an improved version of the original example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Combined Parameters</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color: blueviolet;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Function Signatures with Default and Rest Parameters</h1>
<button class="btn">CLICK HERE</button>
<div class="result"></div>
<p>Click the button to see the add() function with multiple parameters</p>
<script>
function add(a = 0, b = 0, ...additionalNumbers) {
let total = a + b;
additionalNumbers.forEach(num => {
if (typeof num === 'number' && !isNaN(num)) {
total += num;
}
});
return total;
}
document.querySelector(".btn").addEventListener("click", () => {
const result = add(2, null, 22, 11, 33, 44, 55);
document.querySelector(".result").innerHTML =
`The total sum = ${result}`;
});
</script>
</body>
</html>
The total sum = 167
Key Benefits
This approach provides several advantages:
- Flexibility: Functions work with any number of arguments
- Safety: Default values prevent undefined errors
- Cleaner Code: No need for manual argument checking
- Backward Compatibility: Works when fewer arguments are passed
Common Use Cases
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Use Cases</title>
</head>
<body>
<div id="demo"></div>
<script>
// Configuration function with defaults
function createUser(name, role = "user", ...permissions) {
return {
name,
role,
permissions: permissions.length ? permissions : ["read"]
};
}
const user1 = createUser("John");
const user2 = createUser("Admin", "admin", "create", "update", "delete");
document.getElementById("demo").innerHTML =
JSON.stringify(user1, null, 2) + "<br><br>" +
JSON.stringify(user2, null, 2);
</script>
</body>
</html>
{
"name": "John",
"role": "user",
"permissions": [
"read"
]
}
{
"name": "Admin",
"role": "admin",
"permissions": [
"create",
"update",
"delete"
]
}
Conclusion
Default and rest parameters make JavaScript functions more flexible and robust. Use default parameters for fallback values and rest parameters to handle variable arguments, creating cleaner and more maintainable code.
Updated on: 2026-03-15T23:18:59+05:30
161 Views
Advertisements