How to pass the value 'undefined' to a function with multiple parameters in JavaScript?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to pass the value 'undefined' to a function with multiple parameters in JavaScript.

In JavaScript, the data type of 'undefined' is primitive. When a variable is declared, JavaScript automatically assigns the value 'undefined' to it. If a function has multiple parameters and one of the parameters' values is not available at the moment, then we need to omit that parameter's value from the function call. But if we omit the parameter's value with a blank space, the JavaScript will show an error.

Syntax

function abc(param1, param2, param3) {
   console.log(param1, param2, param3);
}
// Will does not work this way
abc(10, ,30) // Throws an error

In the above syntax, "abc" is a function that has three parameters. We called this function with a missing parameter.

In this tutorial, we will discuss two different approaches to overcome this problem and how 'undefined' is passed to a function with multiple parameters −

Passing an 'undefined' value directly into the arguments.
Passing a variable that has a value of 'undefined'.

Passing the 'undefined' value directly as an argument

If the function has multiple parameters and users don't want to use all of them or one of the parameters is missing, then passing an 'undefined' value directly in the arguments is good ways to deal with this issue. We can pass undefined values in the arguments like any other data type, such as a number, string, or Boolean.

Syntax

function abc(param1, param2, param3) {
   console.log(param1, param2, param3);
}
// Passing undefined values directly in the arguments
abc(10, undefined, 30)

In the above syntax, "abc" is a function that has three parameters. We called this function by directly passing undefined values in its parameters.

Example

In the below given example, we have passed the value 'undefined' directly to a function with multiple parameters in JavaScript. We used a button click event to call the function "Show Arguments" to show all the arguments of the function "showArguments".

#Note: The variables that we declare during function declaration or definition are called parameters. The real values we pass in a function call are called the arguments.


<html>
<body>
   <p>function showArguments(param1, param2, param3)</p>
   <button onclick = "showArguments('Tutorialspoint', undefined, 10)"> Show Arguments</button>
   <p id = "root"></p>
   <script>
      function showArguments(param1, param2, param3) {
         let str = 'Argument 1: ' + param1 + '<br />'
         str += ' Argument 2: ' + param2 + '<br />'
         str += ' Argument 3: ' + param3 + '<br />'
         root.innerHTML = str
      }
   </script>
</body>
</html>

Passing a variable that has a value of 'undefined'

We can pass the value 'undefined' to a function with multiple parameters using a variable that has the value of 'undefined'. In JavaScript, whenever a user declares a variable, it automatically contains the value of 'undefined'.

Syntax

function abc(param1, param2, param3) {
   console.log(param1, param2, param3);
}
let undef; // stores the value 'undefined'
// Passing 'undefined' values using a variable
abc(10, undef, 30)

In the above syntax, "abc" is a function with three parameters. "undef" is a variable containing the value of 'undefined'. We passed the "undef" variable in the arguments of the "abc" function.

Example

In the below given example, we have passed the value 'undefined' to a function with multiple parameters in JavaScript using a variable containing the value of 'undefined'. We used a button click event to call the function "Show Arguments" to show all the arguments of the function "showArguments". "undef" is the variable containing the value of 'undefined'.


<html>
<body>
   <p>function showArguments(param1, param2, param3)</p>
   <button onclick = "showArguments('Tutorialspoint', undef, 10)"> Show Arguments</button>
   <p id = "root"></p>
   <script>
      
      // 'undefined' variable
      let undef;
      function showArguments(param1, param2, param3) {
         let str = ' Argument 1: ' + param1 + '<br />'
         str += ' Argument 2: ' + param2 + '<br />'
         str += ' Argument 3: ' + param3 + '<br />'
         root.innerHTML = str
      }
   </script>
</body>
</html>

In this tutorial, we learn to pass the value 'undefined' to a function with multiple parameters in JavaScript using two approaches. In the first approach, we directly pass 'undefined' in the function's arguments, and in the second approach, we pass a variable in the arguments that have a value of 'undefined'. Users can use any of these two approaches based on their requirements.