Deep Tech Point - learn tech easy way

arguments is a reserved keyword in JavaScript. Arguments is an array-like object that you can access inside all non-arrow functions. That object contains the values of the arguments that are passed to that function. arguments object is a local variable available within all non-arrow functions.

Let’s take a look at that definition step by step.

But, what “arguments is an array-like object” means?

Is that an array? Not exactly, but it can be converted into an array. Arguments, however, is not an array. The main similarity with an array lies in the fact that:

arguments has a length property, which contains the number of arguments passed to the function
we can access arguments using index, which means the properties are indexed from zero.

However, the main difference lies in the fact that object arguments don’t contain array’s built-in methods like forEach(), map() or pop() method.

On the other hand, we can convert object arguments to a real array. Let’s have a look below, there are two ways to do it with a slice.call:

var convert-argmts = Array.prototype.slice.call(arguments);
// it is shorter if we use an array literal than the one we used above - the problem with that is that it allocates an empty array
var argmts = [].slice.call(arguments);

As it is the case with all Array-like objects, you can convert arguments to a real Array by using Array.from() method or spread syntax, like so:

//using Array.from() method 
let argmts = Array.from(arguments);
// or spread syntax
let argmts = [...arguments];

An example of functions arguments

Let’s have a look at what it means that arguments is an object that is accessible inside functions that contains the values of the arguments passed to that function. Here is an example of functions arguments:

function example(x, y, z, w) {
  console.log(arguments[0]); 
  // expected output is: 1

  console.log(arguments[1]); 
  // expected output is: 2

  console.log(arguments[2]);
  // expected output is: 3

  console.log(arguments[3]);
  // expected output is: 4
}

example(1, 2, 3, 4);

or like so:

function example(x, y, z, w) {
  console.log(arguments[0], arguments[1], arguments[2], arguments[3]);
}
example(1, 2, 3, 4);  
//expected output is 1, 2, 3, 4

We’ve already mentioned that arguments object is a local variable available within all non-arrow functions. We use functions’ arguments object to refer to a function’s arguments. It contains entries for every argument the function was called with and the first entry starts at index 0. Let’s take a look at an example, where a function is passed 4 arguments and you can access them like so:

arguments[0] // first argument
arguments[1] // second argument
arguments[2] // third argument
arguments[3] // fourth argument

Let’s take a look at the length property

Length property contains the number of arguments passed to the function, for example:

function example(x, y, z, w) {
    console.log(arguments.length);
}
example(); // 0
example(1); // 1
example(1, 2); // 2
example(1, 2, 3); // 3 
example(1, 2, 3, 4); // 4

Can we update the value of arguments?

Of course. Let’s take a look.

function example() {
  arguments[0] = 10 
  console.log(arguments[0]);
}
example(); //10
example(1); //10

So, when we update arguments, at the same time we also update parameter value and the other way round – when we update the parameter value, we also update arguments, for example:

function example(x, y) {
  arguments[0] = 10;
  console.log("x=>", x, "arg[0]=>", arguments[0]);
   
  y = 5;
  console.log("y=>", y, "arg[1]=>", arguments[1]);
}
example(1,2); 
 // expected outcome is: x=> 10 arg[0]=> 10
 // expected outcome is: y=> 5 arg[1]=> 5

However, you should be aware that the example above is not valid if you use the default arguments, becasue these parameters will not synchronize new values assigned to argument variables in the function body with the arguments object. Let’s have a look:

function example(x = 20, y = 20) {
  arguments[0] = 50;
  console.log("x=>", x, "arg[0]=>", arguments[0]);
   
  y = 0;
  console.log("y=>", y, "arg[1]=>", arguments[1]);
}
example(1, 2); 
 // x=> 1 arg[0]=> 50
 // y=> 0 arg[1]=> 2

Another example that describes the above:

function example(x = 5, y = 5) {
  console.log("x=>", x, "arg[0]=>", arguments[0]);
  console.log("y=>", y, "arg[1]=>", arguments[1]);
}
example();
// x=> 5 arg[0]=> undefined
 // y=> 5 arg[1]=> undefined

What about arguments object properties?

Lenght property contains the number of argument that we pass to the function. We’ve already shown a few examples, but let’s do it again:

function example() {
   console.log(arguments.length);
}
example(); // 0
example(1,2,3,4); //4

callee references to the currently executing function that the arguments belong to. It is forbidden in strict mode.

function example() {
  console.log(arguments.callee);
}
example();

arguments[@@iterator] returns a new Array iterator object that contains the values for each index in arguments.

When is it useful to apply the arguments object?

The arguments object had proven to be useful for functions called with more arguments than they are formally declared to accept, and this technique has shown the usefulness with functions such as Math.min() that can be passed a variable number of arguments. For example, the case below accepts each and every number of string arguments and it will return the longest one. Let’s have a look:

function getTheLongestString() {
  var theLongest = '';
  for (var i=0; i < arguments.length; i++) {
    if (arguments[i].length > theLongest.length) {
      theLongest = arguments[i];
    }
  }
  return theLongest;
}

As you had already learned, you can use arguments.length to count the number of arguments that were passed to the function. On the other hand, when you want to count how many parameters a function is declared to accept, inspect that function’s length property. We’ve already shown examples above.

Another example where arguments had proven to be useful is when we want to define a function that concatenates several strings. In this case, the only formal argument of a function is a string that carries the characters that separate the components or items that need to be concatenated. As it is the case with an example above where the function accepted each and every number of string arguments and returned the longest one, here too we can pass to the function as many arguments as we want and the function will return a string list and will use every argument that is in the list. Here’s an example:

function concatenate(separate) {
  let myArguments = Array.prototype.slice.call(arguments, 1);
  return myArguments.join(separate);
} 

// function returns "yellow, green, black"
concatenate(', ', 'yellow', 'green', 'black');

// function "Leon; Nera; Alex; Maxim"
concatenate('; ', 'Leon', 'Nera', 'Alex', 'Maxim');

// returns "volleyball. basketball. waterpolo. handball. baseball"
concatenate('. ', 'volleyball', 'basketball', 'waterpolo', 'handball', 'baseball');

Another example of arguments usefulness is when we want to define a function that creates HTML lists. The example below declares a function that generates a string, which contains HTML for a list. We’ve decided that the only formal argument for the function is a string, which is “unordered” if the list is unordered or bulleted, or “ordered” when the list is ordered or numbered. Let’s declare the function:

function myList(typeUnorderedOrdered) {
  var htmlList = '<' + typeUnorderedOrdered + 'l>';
  var myArguments= Array.prototype.slice.call(arguments, 1);
  htmlList += myArguments.join('
');
  htmlList += '
'; // this brings us to the end of a list
  return htmlList;
}

As with the examples above, you can pass as many arguments as you want to this function. The function will add every argument in a form of a list item to a list of the type indicated. For example: