arguments

By thevirtuoid on January 11, 2022 • ( Leave a comment )

Hi everyone, and welcome to another exciting edition of Boring JavaScript! Today, we’ll talk about the ‘arguments’ reserved variable – how it is used, when to use it, and most important, why not to use it again. 🙂

Don’t like to read? Then watch the video.

It’s Always Something With That Guy

The reserved ‘arguments’ variable is created each time a function is called, and is scoped (that is, available) only to that function. It turns all the arguments to the function into an array-like structure (more on this later).

Let’s look at an example:

const animals = [
	{ "type": "Cat", "name": "Fluffy", "class": "Mammalia"},
	{ "type": "Dog", "name": "Fido", "class": "Mammalia"},
	{ "type": "Horse", "name": "Mr. Ed", "class": "Mammalia"},
	{ "type": "Cow", "name": "Betsy", "class": "Mammalia"},
	{ "type": "Coyote", "name": "Wile E.", "class": "Mammalia"},
	{ "type": "Road Runner", "name": "Beep Beep", "class": "Aves"},
	{ "type": "Dolphin", "name": "Flipper",  "class": "Mammalia"},
	{ "type": "Whale", "name": "Moby Dick", "class": "Mammalia"},
	{ "type": "Lizard", "name": "Larry", "class": "Reptilia"}
];

function addAnimal () {
	for(let i = 0, l = arguments.length; i < l; i++) {
		animals.push({ type: 'Unknown', 'name': arguments[i], 'class': 'Unknown' });
	}
}

addAnimal('Tigger', 'Carl', 'Waldo', 'Samantha', 'Una');

console.log(animals);

/* output
[
  { type: 'Cat', name: 'Fluffy', class: 'Mammalia' },
  { type: 'Dog', name: 'Fido', class: 'Mammalia' },
  { type: 'Horse', name: 'Mr. Ed', class: 'Mammalia' },
  { type: 'Cow', name: 'Betsy', class: 'Mammalia' },
  { type: 'Coyote', name: 'Wile E.', class: 'Mammalia' },
  { type: 'Road Runner', name: 'Beep Beep', class: 'Aves' },
  { type: 'Dolphin', name: 'Flipper', class: 'Mammalia' },
  { type: 'Whale', name: 'Moby Dick', class: 'Mammalia' },
  { type: 'Lizard', name: 'Larry', class: 'Reptilia' },
  { type: 'Unknown', name: 'Tigger', class: 'Unknown' },
  { type: 'Unknown', name: 'Carl', class: 'Unknown' },
  { type: 'Unknown', name: 'Waldo', class: 'Unknown' },
  { type: 'Unknown', name: 'Samantha', class: 'Unknown' },
  { type: 'Unknown', name: 'Una', class: 'Unknown' }
]
*/

Notice that with the function ‘addAnimal’, we have declared no arguments within the definition of the function (Line 13). However, we can still access any arguments that may have been passed to the function by using the ‘arguments’ variable. This is a reserved variable that is created with each call to the function and is only available within that function. It contains an array-like structure (again, more on this in a minute) that let’s us loop through the ‘arguments’ variable and get all of the arguments passed by the calling code.

In our example, we merely add a new record onto the ‘animals’ array. Now, no matter how many arguments are passed to the function (as in Line 19), we can easily process them all.

Your Arguments are Moot

Remember when I said “more on that in a minute”? Here’s that minute.

Using ‘arguments’ is not a good way to get to the arguments passed to the function. Why?

‘arguments’ is array-like, but it not an array. It has a ‘length’ property that tells us how many entries there are, and we can access them using square brackets (like an array), but that’s it. Any other array methods – like map(), filter(), every(), etc. – cannot be used.

With the introduction of ES6 and ‘rest operators’, there is a cleaner and much better way to get the arguments. Let’s change our ‘addAnimal’ function to look like this:

function addAnimal (...names) {
	names.forEach((name) => animals.push({ type: 'Unknown', 'name': name, 'class': 'Unknown' }));
}

By using the rest operator (…) as the argument variable, we now get the same functionality as ‘arguments’ but with the following features:

A descriptive name – you are now not limited to ‘arguments’
Use of all the Array() methods. Rest operators create Arrays, and thus all the Array methods are now at your disposal.
Cleaner, more understandable code

Bottom line is – don’t use ‘arguments’ anymore unless you simply cannot (like still having to write code for 20 year old browsers). Use a rest operator instead.