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 can I declare optional function parameters in JavaScript?
This tutorial will teach us how to declare optional function parameters in JavaScript. While declaring the function, we pass some variables to the function definition to use it inside the function block, called function parameters. The function parameters can also be optional, which gives us the independence to pass function arguments when we call the function. Here, Arguments are the values we pass while calling the function, and parameters are the variables we pass in the function definition.
Optional Parameters
The optional parameter word means that you don’t need to pass that parameter every time you call the function, giving you the independence to pass fewer arguments to the function.
Simply, we can say that if we don’t pass the parameters, we still don’t get any parameters error while executing the function, which is called optional parameters.
You can make all the parameters optional in JavaScript by not passing any argument to the function call.
There are different approaches to handling optional function parameters in JavaScript, which we will look at individually.
- Using the default value to the parameter
- Using the arguments.length property
- Using the logical OR operator (‘||’)
Using the default value to the parameter
In this approach, we will assign the default value to the parameters. After that, while calling the function, it considers the default value as the parameter value if we don’t pass the argument for that parameter. Furthermore, if you pass the argument value for a particular parameter, it considers the passed value.
Syntax
Users can follow the given syntax to pass the default value to the parameter.
function (parameter_1, parameter_2=default_value, parameter_3=default_value ){
// parameter_2, and parameter_3 are optional parameters
}Parameters
default_value − It can be any value of the string, number, or other data types.
Example 1
In the below example, users can learn how we can pass default values to the parameter to handle the optional parameter.
<!DOCTYPE html>
<html>
<body>
<h2>Declaring optional function parameters by passing Default values.</h2>
<h4>Result we get when we call function with 4 parameters:</h4>
<p id="resultDiv1"></p>
<h4>Result we get when we call function with 2 parameters:</h4>
<p id="resultDiv2"> </p>
<script type="text/javascript">
let resultDiv1 = document.getElementById("resultDiv1");
let resultDiv2 = document.getElementById("resultDiv2");
function optionalParameter(contentdiv, num1, num2 = 20, num3 = 10) {
contentdiv.innerHTML = " The value of <i> num2 </i> is " + num2 + ". The value of <i> num3 </i> is " + num3;
}
optionalParameter(resultDiv1, 10, 1000, 4000);
optionalParameter(resultDiv2, 10);
</script>
</body>
</html>In the above output, users can see that when we pass 2 parameters, it uses the default value for the num2 and num3 variables and that’s how num2 and num3 are optional function parameters.
Using the arguments.length Property
In JavaScript, every function has its object called arguments which contains the parameter values. The length of the arguments’ object tells us how many parameters are passed to the function. We will assign a value for unpassed parameters by using the if and else condition.
Syntax
Programmers can follow the below syntax to use the arguments.length property.
function( parameter_1, parameter_2, parameter_3 ){
if(arguments.length == 0){
// assign value to the all parameter
} else if(arguments.length == 1){
// assign value to the last 2 parameter
} else if(arguments.length == 2){
// assign value to the last parameter
}
}Example 2
In the below example, users can learn how to check the total number of parameters passed using the argument.length property and assign values to the parameters according to that.
<!DOCTYPE html>
<html>
<body>
<h2>Declaring optional function parameters by using <i>arguments.length</i> property.</h2>
<p>Result we get when we call function with 2 parameters:</p>
<p id="resultDiv1"></p>
<p>Result we get when we call function with 1 parameter:</p>
<p id="resultDiv2"> </p>
<p>Result we get when we call function with no parameter:</p>
<p id="resultDiv3"> </p>
<script type="text/javascript">
let contentDiv1 = document.getElementById("resultDiv1");
let contentDiv2 = document.getElementById("resultDiv2");
let contentDiv3 = document.getElementById("resultDiv3");
function optionalParameter( num1, num2) {
if (arguments.length === 0) {
num1 = 20;
num2 = 40;
} else if (arguments.length == 1) {
num2 = 50;
}
return num1*num2;
}
contentDiv1.innerHTML = optionalParameter(5, 15);
contentDiv2.innerHTML = optionalParameter(30);
contentDiv3.innerHTML = optionalParameter();
</script>
</body>
</html>In the above output, users can see that when we call the function with a different number of arguments, it sets the value to the parameters accordingly length of the arguments object.
Using the logical OR operator (‘||’)
The logical OR operator reads the value from the first and assigns the first defined value to the variable. If the function argument is not passed for any parameter, it should be undefined, and the OR operator assigns a second value to the variable.
Syntax
Follow the below syntax to handle optional parameters using the OR operator.
function(parameter_1, parameter_2, parameter_3) {
let var1=parameter_1 || default_value;
}Parameters
default_value − It could be any value that we can consider when the argument for the particular parameter is not passed.
Example 3
In the below example, users can learn how use logical OR operator to handle the optional parameters.
<!DOCTYPE html>
<html >
<body>
<h2>Declaring the optional function parameters using logical OR.</h2>
<h4>Result we get when we call function with 1 parameter only:</h4>
<p id="contentDiv1"> </p>
<h4>Result we get when we call function with 2 parameters:</h4>
<p id="contentDiv2"> </p>
<script>
let contentDiv1 = document.getElementById("contentDiv1");
let contentDiv2 = document.getElementById("contentDiv2");
function optionalParameter(contentdiv, param1, param2) {
let var1 = param1 || "tutorialsPoint";
let var2 = param2 || 20;
contentdiv.innerHTML = "The value of param1 is " + var1 + ". The value of param2 is " + var2;
}
optionalParameter(contentDiv1);
optionalParameter(contentDiv2, 100101);
</script>
</body>
</html>In the above output, users can see that when we pass only single argument, it takes default value for both parameter using the logical OR operator. When we pass two arguments to the function call, it take default value for the last parameter only.
10K+ Views
To Continue Learning Please Login