Menu Home

arguments

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:

  1. A descriptive name – you are now not limited to ‘arguments’
  2. Use of all the Array() methods. Rest operators create Arrays, and thus all the Array methods are now at your disposal.
  3. 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.

The Video

Here is a video on the subject.

Shameless Plug

You can find us anywhere!

Check out all our videos at: https://www.boringjavascript.com

Github Repository: https://github.com/TheVirtuoid/boringjavascript

Check out everything at: https://www.thevirtuoid.com

Facebook: https://www.facebook.com/TheVirtuoid

Twitter: https://twitter.com/TheVirtuoid

YouTube: https://www.youtube.com/channel/UCKZ7CV6fI7xlh7zIE9TWqgw

Categories: Boring JavaScript Javascript

Tagged as:

thevirtuoid

Web Tinkerer. No, not like Tinkerbell.

Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: