Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use named arguments in JavaScript functions?
In this article, we will learn how to use named arguments in javascript, and how we can use it to significantly enhance code readability and maintainability.
Javascript allows us to use named arguments, which eliminate the need for the order of parameters to matter during function execution. We may then access the arguments by name inside the function definitions.
Let’s look at some of the examples and methods to understand the concept better −
Example 1 - Passing Objects as Arguments
We can pass an object as an argument to the function to achieve named−argument functionality. This uses the object's properties to represent named values.
In this example, we will −
create a greet function that accepts an object argument with properties name, age, and city.
By using this, we can pass the values with their respective names, improving code readability.
We will then log a greeting message with the provided values to the console.
Filename - index.html
<html>
<head>
<title>How to use named arguments in JavaScript functions?</title>
<script>
function greet({ name, age, city }) {
console.log(`Hello ${name}! You are ${age} years old and from ${city}.`);
}
greet({ name: 'John', age: 30, city: 'New York' });
</script>
</head>
<body>
<h1>How to use named arguments in JavaScript functions?</h1>
</body>
</html>
Output
The result will like the image below.
Example 2 - Destructuring Properties
By using destructuring, we can extract specific values from an object and assign them to individual variables, so as to achieve named arguments−like behavior in JavaScript.
In this example, we will −
use destructuring assignment to extract the name, age, and city values from the person object, in the greet function.
By destructuring the object, we can directly use the named variables within the function.
Filename - index.html
<!DOCTYPE html>
<html>
<head>
<title>How to use named arguments in JavaScript functions?</title>
<script>
function greet({ name, age, city }) {
console.log(`Hello ${name}! You are ${age} years old and from ${city}.`);
}
const person = { name: 'John', age: 30, city: 'New York' };
greet(person);
</script>
</head>
<body>
<h1>How to use named arguments in JavaScript functions?</h1>
</body>
</html>
Output
The result will like the image below.
Example 3 - Using a Configuration Object
By using a configuration object in the function, we can also achieve a named−arguments−like behavior in javascript.
In this example, we will −
create a createProduct function that accepts a configuration object as an argument.
It takes properties like name and price, and includes an optional color property with a default value of 'black'.
By using a configuration object, we can pass only the necessary properties and provide default values for optional ones.
Filename - index.html
<html>
<head>
<title>How to use named arguments in JavaScript functions?</title>
<script>
function createProduct({ name, price, color = 'black' }) {
console.log(`Product: ${name}, Price: ${price}, Color: ${color}`);
}
createProduct({ name: 'Phone', price: 500 });
createProduct({ name: 'Shirt', price: 20, color: 'blue' });
</script>
</head>
<body>
<h1>How to use named arguments in JavaScript functions?</h1>
</body>
</html>
Output
The result will like the image below.
Conclusion
In conclusion, although JavaScript doesn't have native named arguments, we can use techniques like using objects as arguments, destructuring assignments, or configuration objects to achieve similar functionality. These approaches enhance code readability and maintainability to a significant extent. We learned how to use named arguments in javascript using different methods and saw some examples explaining the same.
298 Views
