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
Named arguments in JavaScript.
Named arguments in JavaScript allow you to pass parameters to functions using an object, making function calls more readable and flexible. This technique uses object destructuring to extract named properties from the passed argument.
Syntax
function functionName({ param1, param2, param3 }) {
// Function body
}
// Call with named arguments
functionName({ param1: value1, param2: value2, param3: value3 });
Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Named Arguments Example</title>
</head>
<body>
<h1>Named Arguments in JavaScript</h1>
<div id="result"></div>
<button onclick="demonstrateNamedArgs()">Calculate Sum</button>
<script>
function add({ a = 0, b = 0, c = 0, d = 0 }) {
return a + b + c + d;
}
function demonstrateNamedArgs() {
const result = add({ a: 22, b: 44, c: 55, d: 99 });
document.getElementById('result').innerHTML = `Sum = ${result}`;
}
</script>
</body>
</html>
Output
Sum = 220
Advantages of Named Arguments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Named Arguments Benefits</title>
</head>
<body>
<div id="output"></div>
<script>
// Function with many parameters
function createUser({ name, age, email, isActive = true, role = 'user' }) {
return `User: ${name}, Age: ${age}, Email: ${email}, Active: ${isActive}, Role: ${role}`;
}
// Clear and readable function calls
const user1 = createUser({
name: 'John Doe',
age: 30,
email: 'john@example.com'
});
const user2 = createUser({
email: 'jane@example.com',
name: 'Jane Smith',
age: 25,
role: 'admin'
});
document.getElementById('output').innerHTML = user1 + '<br>' + user2;
</script>
</body>
</html>
Key Benefits
| Benefit | Description |
|---|---|
| Parameter Order | Arguments can be passed in any order |
| Readability | Function calls are self-documenting |
| Optional Parameters | Easy to skip optional parameters |
| Default Values | Built-in support for default parameter values |
Handling Missing Parameters
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Default Values Example</title>
</head>
<body>
<div id="demo"></div>
<script>
function greetUser({ name = 'Guest', greeting = 'Hello', punctuation = '!' }) {
return `${greeting}, ${name}${punctuation}`;
}
const result1 = greetUser({ name: 'Alice' });
const result2 = greetUser({ greeting: 'Hi', name: 'Bob' });
const result3 = greetUser({}); // All defaults
document.getElementById('demo').innerHTML =
result1 + '<br>' + result2 + '<br>' + result3;
</script>
</body>
</html>
Output
Hello, Alice! Hi, Bob! Hello, Guest!
Conclusion
Named arguments using object destructuring make JavaScript functions more readable and maintainable. They provide flexibility in parameter ordering and excellent support for default values, especially useful for functions with multiple optional parameters.
Updated on: 2026-03-15T23:18:59+05:30
280 Views
Advertisements