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
How to arguments object with Rest, default, and destructured parameters in JavaScript?
JavaScript ES6 introduced powerful parameter features that modernize how functions handle arguments. This article explores default parameters, rest parameters, and destructuring assignment - three essential concepts for writing cleaner, more flexible JavaScript functions.
Default Parameters
Default parameters allow you to initialize function parameters with default values when no value or undefined is passed. This eliminates the need for manual parameter checking and makes functions more robust.
Syntax
function functionName(param1, param2 = defaultValue) {
// function body
}
Example
<html>
<body>
<script>
// default is set to 1
function inc(val1, inc = 1) {
return val1 + inc;
}
document.write(inc(10, 10));
document.write("<br>");
document.write(inc(10));
</script>
</body>
</html>
20 11
Rest Parameters
Rest parameters allow functions to accept an indefinite number of arguments as an array. They are indicated by three dots (...) followed by a parameter name, making it easy to work with variable numbers of arguments.
Syntax
function functionName(param1, ...restParams) {
// restParams is an array containing remaining arguments
}
Example
<html>
<body>
<script>
function addition(...numbers) {
var res = 0;
numbers.forEach(function (number) {
res += number;
});
return res;
}
document.write("Single number: " + addition(3));
document.write("<br>Multiple numbers: " + addition(5, 6, 7, 8, 9));
</script>
</body>
</html>
Single number: 3 Multiple numbers: 35
Destructuring Parameters
Destructuring assignment allows you to extract values from arrays or objects directly into variables. In function parameters, it enables pattern matching to unpack values from arguments passed to the function.
Array Destructuring Example
<html>
<body>
<script>
let marks = [92, 95, 85];
let [val1, val2, val3] = marks;
document.write("Value 1: " + val1);
document.write("<br>Value 2: " + val2);
document.write("<br>Value 3: " + val3);
</script>
</body>
</html>
Value 1: 92 Value 2: 95 Value 3: 85
Object Destructuring in Functions
<html>
<body>
<script>
function displayUser({name, age, city = "Unknown"}) {
document.write("Name: " + name + "<br>");
document.write("Age: " + age + "<br>");
document.write("City: " + city);
}
let user = {name: "John", age: 30};
displayUser(user);
</script>
</body>
</html>
Name: John Age: 30 City: Unknown
Combining All Three
You can combine default parameters, rest parameters, and destructuring for powerful function signatures:
<html>
<body>
<script>
function processData({name, age}, multiplier = 2, ...scores) {
let total = scores.reduce((sum, score) => sum + score, 0);
let average = total / scores.length;
document.write("Name: " + name + "<br>");
document.write("Age: " + age + "<br>");
document.write("Average Score: " + (average * multiplier).toFixed(2));
}
processData({name: "Alice", age: 25}, 1.5, 85, 90, 78, 92);
</script>
</body>
</html>
Name: Alice Age: 25 Average Score: 126.38
Key Benefits
| Feature | Benefit | Use Case |
|---|---|---|
| Default Parameters | Cleaner function calls | Optional configuration values |
| Rest Parameters | Handle variable arguments | Mathematical operations, logging |
| Destructuring | Extract specific values | API responses, configuration objects |
Conclusion
These ES6 parameter features make JavaScript functions more flexible and readable. Use default parameters for optional values, rest parameters for variable arguments, and destructuring to extract specific data efficiently from complex objects or arrays.
226 Views
