• JavaScript Video Tutorials

JavaScript - Function Parameters

Function Parameters and Arguments

The function parameters in JavaScript are variables listed inside the parentheses in the function definition. A function can have multiple parameters separated by commas. The function arguments are the values that are passed to function when it is called. We define function listing the parameters and call the function passing the arguments.

The number of arguments that you pass to the function must match the number of parameters in the function definition. If not, you may get unexpected result.

Syntax

The syntax to use function parameters in JavaScript is as follows −

function functionName (parameter1, parameter2, parameter3) {
  //statements
}

In the above syntax, the function parameters are 'parameter1', 'parameter2', and 'parameter3'.

Parameter Rules

  • JavaScript functions don't check the number of arguments passed while invoking the function.

  • Don't need to specify the data type of function parameters.

  • JavaScript compiler doesn't perform the type-checking on the passed function arguments.

The JavaScript function arguments are the variables or values passed to the function while invoking it.

functionName (10, b, 'Hello');

In the above syntax, the first argument is of number data type, and the third is of string data type. The second argument is variable, which is defined earlier in the code.

Example: Function Parameters and Arguments

In the below code, the mult() function takes 4 parameters. You can observe that the type of parameters is not defined. We multiply the parameter values in the function body and return the resultant value.

While calling the function, we passed 4 number values as a function argument. Users can observe the output of the function for the different function arguments.

<html>
<body>
   <p id = "output"> </p>
   <script>
      function mult(a, b, c) {
         let res = a * b * c;
         return res;
      }
      let ans = mult(2, 3, 4);
      document.getElementById("output").innerHTML = 
	  "The multiplication of 2, 3, and 4 is " + ans;
   </script>
</body>
</html>

Output

The multiplication of 2, 3, and 4 is 24

Argument Object

In JavaScript, each function can have an 'arguments' object. It contains all passed arguments while invoking the function in the array format. We can traverse through the array and get each argument even if the function's parameters are not specified.

Example

In the example below, the function definition doesn't contain any parameters, but we have passed the 4 arguments while calling the function. So, we traverse through the arguments[] array using the loop inside the function body to access all arguments one by one.

In the function body, we merge all arguments and return the 'final' string.

<html>
<body>
   <p id = "output"> </p>
   <script>
      function merge() {
         let final = "";
         for (let p = 0; p < arguments.length; p++) {
            final += arguments[p] + " ";
         }
         return final;
      }
      let ans = merge("Hi", "I", "am", "John!");
      document.getElementById("output").innerHTML = 
	  "The merged string is: " + ans;
   </script>
</body>
</html>

Output

The merged string is: Hi I am John!

Passing Arguments by Value

In the function, when you pass the argument by value to a function call, it sends the argument value to the parameter of the function definition. So, when you update the function parameters, the function argument doesn't get changed.

Example

In the below code, we have defined the 'val1' and 'val2' variables outside the function and passed them as a function argument.

In the function body, we change the parameter value. In the output, you can see that even after updating the parameter value, the actual value of the 'val1' and 'val2' is not changed.

<html>
<head>
   <title> JavaScript - Arguments are passed by value </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      function update(val1, val2) {
         val1 = 20;
         val2 = 30;
      }

      var val1 = "Hello";
      var val2 = "World";

      output.innerHTML += "Before calling the function! <br>";
      output.innerHTML += "val1 = " + val1 + ", val2 = " + val2 + "<br>";

      update(val1, val2);

      output.innerHTML += "After calling the function! <br>";
      output.innerHTML += "val1 = " + val1 + ", val2 = " + val2 + "<br>";
    </script>
</body>
</html>

Output

Before calling the function!
val1 = Hello, val2 = World
After calling the function!
val1 = Hello, val2 = World

Passing Arguments by Reference

When you pass the object as an argument, the function sends the address of the object as a parameter to the function definition. So, it is called the arguments are passed by reference.

In the function body, if you change the property of an object, it will also reflect the outside of the function.

Example

In the below code, we pass the 'obj' object as a function argument. In the function body, we change the value of the 'domain' property of the object.

In the output, you can observe that the value of the 'domain' property is changed even outside the function after invoking the function as objects are passed by reference.

<html>
<head>
   <title> JavaScript - Arguments are passed by reference </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      function update(obj) {
         obj.domain = "www.tutorialspoint.com";
      }
      var obj = {
         domain: "www.google.com",
      }
      output.innerHTML += "Before calling the function! <br>";
      output.innerHTML += "domain = " + obj.domain + "<br>";
      update(obj);
      output.innerHTML += "After calling the function! <br>";
      output.innerHTML += "domain = " + obj.domain + "<br>";
    </script>
</body>
</html>

Output

Before calling the function!
domain = www.google.com
After calling the function!
domain = www.tutorialspoint.com
Advertisements