JavaScript Functions – Parameters Vs Arguments

Note: This post is work-in-progress learning-note and still in active development and updated regularly.

In JavaScript (JS), functions and objects are very important component of JS language, often use of the terms parameters and arguments seems to be used interchangeably. For beginners, this could be confusing. Yes. there is some difference between parameters and arguments.

MDN defines parameter as “named variable passed into a function. Parameter variables are used to import arguments into functions”.

  • Parameters: refers to variable name listed in the function definition.
  • Arguments: refers to the real values passed to (and received by) the function.
Are Parameters and Arguments Are Same?

The MDN documentation lists following differences between parameters and arguments:

  • Function parameters are the names listed in the function’s definition.
  • Function arguments are the real values passed to the function.
  • Parameters are initialized to the values of the arguments supplied.

To illustrate the above differences, lets examine an example using different number of parameters and arguments in a function:

//define myArg function four parameters
function myArg(param1, param2, param3, param4) {
   return param1 + param2 + param3 + param4;
};

//invoke with equal arguments
console.log(myArg(2,4,6,8)); 
//OUTPUT
20
//invoke with extra arguments
console.log(myArg(2,4,6,8,10));
//OUTPUT
20 //extra argument is ignored
//invoking with missing arguments
console.log(myArg(2,6));
//OUTPUT
NaN

In the example above, myArg() function is defined to take four parameters. When the function is invoked with equal number of argument (line 7) we got expected output (line 9). When the myArg() was invoked with extra arguments (line 11) we still got expected output with any error, the extra argument was ignored. By default, extra arguments are not get assigned to any parameters.

But when the myArg() was invoked with missing arguments, only two that is less than four defined in the function (line 15), the output was NaN (not defined number) but didn’t throw any error. By default, any missing arguments is set to undefined, and thus param2 and param4 were assigned to undefined thus 2+undefined+6+undefined = NaN. This demonstrates that there is difference between parameters and arguments.

The Arguments Object

The arguments object could be confusing with respect to functions. The arguments object is local variable in non-arrow functions. The MDN defines arguments objects as “an Array-like object corresponding to the arguments passed to a function“.

In the following example (adopted from Yash Agrawal’s post) use of arguments parameter is demonstrated. The arguments parameter is implicitly passed just like this parameter. It performs as a local variable which is accessible within all the functions which contains the entry of each arguments passed to that function.

The arguments object is array-like which is used to access arguments passed to the function in cases when parameters defined in a function and do not match with the arguments used while invoking that function.

//define function with three parameter
function argObj(param1, param2, param3) {
  console.log(arguments.length); //logs length of arguments passed
  console.log(arguments[2]);// logs 3rd argument
};
//invoke with six argument
argObj(1,2,3,4,5,6);
//OUTPUT
6 //number of arguments passed
3 // its the 3rd argument passed

In the example above, arguments.length indicates that exact number of arguments passed (which may not match with number of parameters used in function definition (line 9). Individual argument can be accessed using array-like indexing notation (line 10).

Because functions can take any number of arguments, before ES6 use of arguments object was the only way to dynamically get all the argument(s) of a function. Arguments object is array-like and iterable but it does not have other array properties like methods (eg.  ). Unlike regular functions, arrow functions don’t have arguments object. Arrow functions don’t have their own this either.

Arrow Functions – No Arguments Object Binding

Because arrow functions don’t have their own arguments object, if an arguments object is accessed it reference from outer enclosing scope or “normal” function as shown below:

//assign arg array
let arguments = [2, 4, 6];
//using arrow function
let myArr = () => arguments[1];
//invoke function
myArr() // OUTPUT => 4

//Using Arrow Function
function myFunc(x) {
  let argObj = () => arguments[0] + x; 
  return argObj();
}
//invoke myFunc
myFunc(5); //OUTPUT => 10

In the example above (adopted from the MDN), arguments array with three items is initialized (line 2). Index number of the arguments array can be accessed using arrow function (line 4) which gets it from enclosing scope (line 2).

Likewise, in a nested function example argObj() arrow function access argument by index (line 10) from outer (adjacent) myFunc() function scope (line 9) and returns correct output (line 14).

//using arguments in arrow function
let arrayFunc = () => {
  console.log(arguments); 
}
//OUTPUT
reference error: 'arguments' not defined

In the above example, when arguments object is used in arrayFunc() arrow function (line 3) without an enclosing function, it throws reference error: 'arguments' not defined (line 6).

Rest Parameters

In ES6, rest parameters were introduced as a good alternative to using an arguments object. The rest parameters are the standard way of accessing an indefinite number of arguments in an array and manipulate inside a function scope, the arguments objects are less frequently used.

The use of Rest Parameters and Spread Operators will be discussed separately in another learning-note post.

Wrapping Up

In this learning-note post, we discussed the difference between parameters and arguments. We discussed how to access different number of arguments than those defined parameters with some examples. Use of arguments object accessing arguments parameters in functions (expression & arrow) discussed. The rest parameters introduced with ES6 as an alternative to using an arguments object will be discussed in more detail in a separate learning-note post.

Related Topic: Understanding Rest Parameters and Spread Operator

Useful Resources & Links

While preparing this post, I have referred the following references extensively. Visit original link for additional information.