Teach with us

Passing unknown number of arguments to a function in Javascript

Front End TechnologyJavascriptObject Oriented Programming

The terms "parameters" and "arguments of a function" are frequently used synonymously in JavaScript, despite the fact that there is a substantial distinction between the two. The function parameters are included when we define a function. While defining a function, you may also specify a list of variables; these variables are referred to as function parameters. On the other hand, "function parameters" are the values we pass when we call or execute the newly created function.

In JavaScript, the variables listed in the function declaration serve as the argument values. The arguments that are part of the function definition are used when we create a function. The syntax provided below shows how many arguments can be put inside parentheses and separated by commas.

Example 1

Irrespective of what the function declaration indicates, JavaScript allows you to pass any number of parameters when calling a function. No restriction on function parameter length exists.

In this example let us understand the basic example by creating a function that accepts two parameters. Any number of inputs will always produce the same outcome because it only accepts the first two parameters.

<!DOCTYPE html>
<html>
<title>Passing unknown number of arguments to a function in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
   <body style="text-align:center">
   <script>

      // function with two parameters
      function addPara(x, y) {
         return x + y;
      }
      document.write(addPara(5, 3) +'<br>'); // 8
      document.write(addPara(5, 3, 2)); // 8
   </script>
</body>
</html>

We must create a function that can take any number of inputs. There are two ways we can deal with it.

  • arguments object (ES5)
  • Rest parameters (ES6)

arguments object (ES5)

Example 2

All non-arrow functions in JavaScript have access to the local JavaScript object variable known as arguments. The values of the parameters supplied to a function are stored in an Array-like object called arguments, which is accessible inside functions.

In this example let us understand how to write a function in ES5 that takes n parameters −

<!DOCTYPE html>
<html>
<title>Passing unknown number of arguments to a function in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // function with n number of parameters
      function addPara() {
         let addNum = 0;
         for (let i = 0; i < arguments.length; i++) {
            addNum += arguments[i];
         }
         return addNum;
      }
      document.write(addPara(5, 10, 15) +'<br>'); // 30
      document.write(addPara(10, 20, 30, 40, 50) +'<br>'); // 150
      document.write(addPara(10, 20, 10, 20)); // 60
   </script>
</body>
</html>

Example 3

The reduce method cannot be used until the arguments object has been converted into an array using the Array.from method because it is not an array by default. The arrow functions were unable to handle the arguments object.

<!DOCTYPE html>
<html>
<title>Passing unknown number of arguments to a function in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // function with n number of parameters
      function addPara() {
         let arg = Array.from(arguments);
         return arg.reduce(function (acc, cur) {
            return acc + cur;
         })
      }
      document.write(addPara(5, 10, 15) +'<br>'); // 30
      document.write(addPara(10, 20, 30, 40, 50) +'<br>'); // 150
      document.write(addPara(10, 20, 10, 20)); // 60
   </script>
</body>
</html>

Rest Parameters (ES6)

Example 4

In order to work with an infinite number of arguments, the rest parameter offers an easier and cleaner method. The previous example should now include a rest parameter. We may pass our function an infinite number of parameters by using the rest parameter that has the same syntax as the spread operator.

<!DOCTYPE html>
<html>
<title>Passing unknown number of arguments to a function in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // using rest parameter in ES6
      function addPara(...args){
         return args.reduce(function (acc, cur) {
            return acc + cur;
         })
      }
      document.write(addPara(5, 10, 5) +'<br>'); // 20
      document.write(addPara(10, 20, 10, 20, 30) +'<br>'); // 90
      document.write(addPara(10, 20, 10, 20)); // 60
   </script>
</body>
</html>

Following are the differences between the rest parameters and the arguments object −

The rest parameters array could be applied directly with all array methods such as map, sort, and filter, however the arguments object is not allowed. The arguments object must first be transformed into a true array before using Array methods on it.

In terms of how the function is used, the rest parameter is more straightforward and has a logical syntax.                                

The arguments object has additional capabilities that are unique to it (like the callee property).

Arrow functions do not have access to the arguments object.

raja
Manisha Patil
Updated on 23-Aug-2022 13:46:05

Previous Page Print Page Next Page  
Advertisements