Arguments vs Parameters and The Rest Parameter

Knowing the difference between arguments and parameters can be important.

But before we begin, just a quick note that our new course, Fundamentals of Angular, is out and completely free. That’s right. 100% free. Nothing behind a paywall. This isn’t a half course or anything. This is the whole enchilada. Go check it out.

And for a video version of this blog, click here.

I recently ran a quick little twitter poll to see if people, in general, knew the difference between parameters and arguments. The results of the poll were quite interesting.

Only 50% of people were confident with the difference between arguments and parameters, which makes this a good subject to review.

An argument is the value you pass into a function. A parameter is the name the function assigns to that value. That is the difference. Often times we use these two terms interchangeably, and most of the time the difference is unimportant. But it can matter, so learning the difference, and learning to use the appropriate term at the appropriate time can help with communication of all kinds.

In the above example, “itemName” and “quantity” are parameters, and “handSanitizer” and 300 are arguments.

This actually clues us in as to why the arguments object in JavaScript is named arguments, and not parameters. Arguments are the values, not the names. The arguments object contains the values, but doesn’t care about the names.

If you’re not familiar with the arguments object, it’s a global object that gives you information about the arguments used in the function call for the current context.

So in this example:

Notice how the arguments object was never created or referenced, it just exists. Inside that function, those three calls will log out “2”, “Hand Sanitizer” and “300” respectively.

Now, why is there an arguments object when we have the named parameters anyway?

Well, JavaScript is just so loosey-goosey that it doesn’t care if you pass it more arguments than there are parameters.

Now, look at the sentence I just typed. This is a GREAT example of why we need to understand the difference between arguments and parameters. If you use those two terms interchangeably, then the sentence makes no sense. But they’re not the same thing. And understanding them lets us learn about things like the arguments object.

So continuing on, you can pass more arguments than there are parameters. Let’s look at a case for this. Let’s say we want a function that can receive a list of numbers and add them all up, but doesn’t require that they’re in an array, and can instead be passed in as separate arguments. Doing this with separate arguments would be impossible, and even if we do our best it’s messy.

But with the arguments object, this is trivial. Since the arguments object only has the arguments that were already passed in, it’s basically an array of numbers we just add up.

Unfortunately, arguments is only an array-like object, and not a full array, so we can’t do things like reduce().

But thank you EcmaScript for coming to the rescue here. The Rest Parameter is a way to get the best of both worlds.

A rest parameter is a special parameter in a function signature (good thing we know what a parameter is vs. an argument) that is signified by three dots before it. It must be the very last parameter in a function signature. This parameter receives all the arguments that don’t have named parameters already, and is an array of those arguments.

So our new AddEverythingUp method would look like this:

You can mix in named parameters (only before the rest parameter).

So for most uses, a rest parameter is preferred over the arguments object, and many developers now consider the arguments object to be a code smell.

And that’s the rest parameter, and also arguments and parameters. Think you get it? Try this challenge and see if you can solve it!

How to learn five times faster

Here at Thinkster, we use educational science to teach yo five times faster than just about anything else out there. How? With proper instruction based on educational principles and hands-on exercises, you will retain 75% to 90% of what you learn. Without these techniques, you only remember 7% to 15% of what you learn. That’s why you can watch a video or a course or read a blog and feel like you need to watch a couple more before you really “get it”.

You can see this in action in our courses. And you can get it for free in our Fundamentals of Angular course. Go check it out.

Happy Coding!

Signup for my newsletter here.

Visit Us: thinkster.io | Facebook: @gothinkster | Twitter: @GoThinkster