How to set a default parameter value for a JavaScript function?

Javascript Web Development Front End Technology

In this tutorial, we are going to learn to set a default parameter value for a JavaScript function. JavaScript is an object-oriented programming language that provides us the facility to perform both functional and class-oriented programming which gives us the facility to manage code easily and can re-use the code as well.

In functional programming, the programmer creates a function that may take some parameters and may return some value after performing a number of steps it was supposed to do. The value of parameters for the function can be a string, number, object, etc. and we can also set a default value of a parameter.

This came to handle function parameters with ease. You can easily set default parameters to allow the initialization of formal parameters with default values. This is possible only if no value or undefined is passed.

Syntax

Now let’s move to see the syntax to set a default parameter value for a JavaScript function −

//default is set to 1
function setDefaultValue(val1, defaultValue = 1) {
   return val1 + defaultValue;
}

In the above syntax, we have commented that ‘default is set to 1’ defines the default value of the second parameter ‘defaultValue’ and declared a function name ‘setDefaultValue’ by using the ‘function’ keyword. In this function, we have passed two parameters ‘val1’ and ‘defaultValue’ as we discussed we set a default value of the second parameter i.e. 1. At the last of the function, we have returned the sum of the value of both parameters.

Algorithm

We have seen the syntax above to learn to set a default parameter value for a JavaScript function, now we are going to see the complete approach step by step −

First, we create a form in which we create a button that is connected to the function ‘display’.
Now we have to create a function ‘setDefault Value’ in the script tag. In this function, we have to pass two parameters.
Now we have to set the default value of the second parameter of the function ‘setDefaultValue’.
In the function ‘setDefaultValue’ we have to write a return statement in which we have passed the sum of both parameters.
Further in the script tag, we have to create another function ‘display’ which is connected to the button.
In the function ‘display’, we have to write the ‘document.write’ statement and in that, we have called the function ‘setDefualtValue’ by passing the value of both the parameter i.e. case first.
Similarly, for case second, we have passed only the value of the first parameter of the function ‘setDefaiultValue’.

Example

We have seen the syntax and algorithm to learn to set a default parameter value for a JavaScript function, now let’s take an example to implement the above-discussed steps.


<html>
<body>
   <form>
      <button type="button" onclick="display()">Click to see the Result</button>
   </form>
   <script>
      // default is set to 1
      function setDefaultValue(val1, defaultValue = 1) {
         return val1 + defaultValue;
      }
      function display(){
         //Here we passed value of both the variable val1 and defaultValue
         document.write(setDefaultValue(10,10));
         document.write("<br>");
         
         //Here we only passed the value of the variable val1
         document.write(setDefaultValue(10));
      }
   </script>
</body>
</html>

In the above code first, we declared a form in which we created a button that is connected to a function name ‘display’ so when we click on this button function display is invoked. Further, in the script tag, we have created a function ‘setDefaultValue’ in which we have passed two parameters and set the default value of the second parameter by simply using ‘=’ and assigning 1. After that we created another function ‘display’ in which we are using ‘document.write’ and in which we passed the first function with the value of parameters. we have 2 cases in it.

The first case is that we have passed the value of both the parameters i.e. 10, 10 so that’s why the function ‘setDefaulValue’ consider the value of the second parameter to be 10 and returns the sum of the value of both the parameters i.e. 10+10 = 20 you can see in the second image.

The second case is that we have passed the value of only the first parameter i.e. 10. Now the function ‘setDefalutVaule’ consider the value of the first parameter as 10 and we didn’t pass the value of the second parameter so that time it considers the default value of the second parameter i.e. 1. And return the sum of values of the parameters i.e. 10+1 = 11 you can see in the second image.

Conclusion

In this tutorial, we learned to set a default parameter value for a JavaScript function. The value of parameters for the function can be a string, number, object, etc and we can also set a default value of a parameter. This came to handle function parameters with ease. You can easily set default parameters to allow the initialization of formal parameters with default values. This is possible only if no value or undefined is passed.