10 Examples of JavaScript Arguments Object

In this article, we will learn what is JavaScript arguments object and how to use it with 10 different types of examples and usages.

In short, JavaScript arguments object is Array-like object that is accessible from inside the functions that contain the values of all the arguments passed to that function while calling.

Note: If you’re writing ES6 compatible code, then rest parameters should be preferred.

Note: “Array-like” means that arguments has a length property and properties indexed from zero, but it doesn’t have Array‘s built-in methods like forEach() and map().

source

Remember that javascript arguments object is a local variable that is available inside only a non-arrow function. And it is not an array. It is similar to an array but doesn’t contain any array properties except length.

For deep drive in arrow function see this article

#1 Simple Example

function test(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

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

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

test(1, 2, 3);

Explanation

In the above example, I have created a function called test with three arguments a, b and c and accessing them using arguments object on the position of 0, 1 and 2 as you can see the log inside the function in the above example.

#2 How the arguments object looks like?

Wanna see how it looks like?

Let’s go inside the arguments object below:

function test(a, b, c) {
  console.log(arguments);
}
test(1, 2, 3); 
// Output:- Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

Let’s open that array-like object

Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
  0: 1
  1: 2
  2: 3
  callee: ƒ test(a, b, c)
  length: 3
  Symbol(Symbol.iterator): ƒ values()
  __proto__: Object

Did you noticed the __proto__ is an object So, basically arguments object contains:

the parameters of its function as an array,

the length of that array.

and some other functions like callee and Symbol. Let’s dig more into it.

Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
  0: 1
  1: 2
  callee: ƒ test(a, b)
    arguments: null
    caller: null
    length: 2
    name: "test"
    prototype: {constructor: ƒ}
    __proto__: ƒ ()
    [[FunctionLocation]]: VM110:1
    [[Scopes]]: Scopes[2]
  length: 2
  Symbol(Symbol.iterator): ƒ values()
    arguments: (...)
    caller: (...)
    length: 0
    name: "values"
    __proto__: ƒ ()
    [[Scopes]]: Scopes[0]
  __proto__: Object

The callee function contains the information related to the function like name and arguments length.

As MDN says that the callee function is a reference to the currently executing function that the arguments belong to.

And As, I’m no expert in this so, don’t know why it contains the Symbol well if you know let me know.

#3 Changing Values

You can set or reassign each value of argument object. See the example below:

function test(a, b, c) {
  arguments[0] = 'TEST';
  console.log(arguments[0]);
}

test(1, 2, 3); // TEST

In the above example, I passed 1 as the first argument and change it inside the function to TEST and it logs the arguments[0]. Please see #6 for more.

#4 Convert it to a real array.

As I already told you arguments object is not an array but it can be converted to a real array.

#4.1 Using Array.prototype

function test(a, b, c) {
  var args = Array.prototype.slice.call(arguments);
  console.log(args);
}
test(1, 2, 3); // [1, 2, 3]

The output of the above example is [1, 2, 3] See the output of console below:

(3) [1, 2, 3]
  0: 1
  1: 2
  2: 3
  length: 3
  __proto__: Array(0)

Did you noticed this time the __proto__ is the type of array, we have converted it to the real array.

#4.2 Using array literal

Using the array literal is a shorter way than the above example I showed. See the example below:

function test(a, b, c) {
  var args = [].slice.call(arguments); 
  console.log(args);
}
test(1, 2, 3); // [1, 2, 3]

#4.3 Using Array.from()

You can also use array .form() method to convert the array-like object to a real array as I show in the example below:

function test(a, b, c) {
  var args = Array.from(arguments);
  console.log(args);
}
test(1, 2, 3); // [1, 2, 3]

#4.4 Using spread syntax

Of course, You can use spread syntax to convert it into an array, like the example below:

function test(a, b, c) {
  var args = [...arguments];
  console.log(args);
}
test(1, 2, 3); // [1, 2, 3]

The JavaScript arguments object is useful when you have dynamic parameters to received or you just don’t know the function called with more parameters than the function is gonna formally received.

#5 Usages

For example if I say that, create a function that accepts any number of string parameters and returns the longest one?

#5.1 Finding the longest

See the example below:

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

#5.2 Generate the HTML list

I have one more example for you. I’m gonna define a function that creates the HTML list. Given below:

function list(type) {
  var html = '<' + type + 'l><li>';
  var args = Array.prototype.slice.call(arguments, 1);
  html += args.join('</li><li>');
  html += '</li></' + type + 'l>'; // end list

  return html;
}

you can pass any number of arguments in the list function that I created in the above example and also which type of list you want ol or ul. See the example below:

var listHTML = list('u', 'One', 'Two', 'Three');
/* listHTML is:
"<ul><li>One</li><li>Two</li><li>Three</li></ul>"
*/

I know, I know maybe you are thinking that I can do this using rest parameters. Yes, of course, you can do that and there are many different ways to do that but we are talking about arguments object so I’m sticking with it.

And, if you have a better example let me know in the comment section.

You can always use arguments.lenth to count how many arguments this function is receiving.

#6 Careful with updating values

While you are using the arguments object, please be careful with update values as it also change the value of your parameters too. I mean see the example below:

function func(a) { 
  a = 99; // updating a also updates arguments[0]
  console.log(arguments[0]);
}
func(10); // 99

In the above example, I accept the a as a first parameter and pass the value 10 and reassign the a inside a function, So it also gonna change arguments on 0 positionarguments[0].

And Its also works reverse like if I change arguments[0] it is gonna change a. So be careful when you are changing.

But, mdn docs say that it changes the value only in strict mode, but I tested it on my latest chrome console it also changes value normally without strict mode. Maybe they did not update their docs or chrome dev updated their JavaScript engines. It’s still a mystery.

I don’t know but it changes the value so careful with it.

That’s all for now, Thank you so much for reading this long post, please share and support. For more about CSS or JavaScript