• JavaScript

Working with Function Arguments

From the class:  JavaScript Functions

In this video, we're going to talk about function arguments, something you've probably already used quite a bit of. But in this video, by the end, you should be a master at using arguments for a number of different use cases. So we'll start off by looking at argument assignment and then look at named arguments, and then play around with the arguments object and different various things we can do with it.

Function arguments become assigned when we call the function. So here we're calling my function and passing in some arguments. We're passing two strings, one as the first parameter, and two as the second. And when we get into our function body at call time, we have these two arguments here which we'll called named arguments.

You might also hear these referred to as formal arguments. So these are the arguments that are named, and we can refer to their values by just using the variable name here or the argument name, just like we can with variables. So what I'd like to do is to press Play here and drop us into the debugger.

So this will drop us right into my functions debugger. And let's take a look at these named arguments. These are just like regular variables, and they become bound or assigned inside of the function body when it gets called. And so right now arg one points to the value of one, and arg two points to the value of two.

Now in this case, both of these values have been copied into these new variables. And that's because we're passing in a primitive value. If we passed in an object or a function, we would create a new variable assignment, but it would be a pointer to the object in memory. And we talked about that a little bit in the previous video on reference assignment.

You typically use named arguments like this or named parameters if you know ahead of time what you want the parameters to be. For example, if they're required, or the signature of the function doesn't change. Sometimes though you want to allow the user to pass in any number of arguments. And so we could say that we have a variable number of arguments, or the arguments are anonymous.

In JavaScript, we can do this using something called the arguments object, or the arguments key word, that gets assigned when our function gets called. Let's take a look at it. Inside of the function body, I'm going to create a variable called args and assign it equal to this special key word called arguments so that we have an easier time working with it. And then over in the browser, I'll just refresh. And when we refresh, we should land back in the debug statement.

Now let's take a look at what this arguments object actually is. We'll use our console.dir trick and pass in the args variable, or we could just pass in arguments directly. When I expand it, you can see it looks sort of like an array. So we can access the positional arguments. The positional arguments are arguments that are at a particular index, like zero and one.

And so in that sense, it's very array like. It also has a length property that tells us how many arguments were passed in. So in this case, we have two arguments. But if we take a look at its prototype pointer, you can see that it points right up to object. And so it's not actually an array. It's a different kind of object that just kind of is array like.

We can play around with the arguments object directly in the console here. And so let's try accessing the variable or the argument at the first position, so at index zero. And you can just see its value is one. And the second argument, its value is two. We can see the arguments object has a length property, which is set to two.

And if we look at the type of the arguments object, notice that it's just an object, not an array, even though it has a length property. Now sometimes it's useful to be able to treat the argument's object as an array. For example, you might want to call the slice function on it to be able to get all the arguments after a particular position. But to do that, we need to convert the arguments object into an array. And so next I'm going to show you a trick on how to do that.

An array has a method on it called slice. And so let me show you how that works. If we call this slice method and just don't pass any arguments, what will happen is it will create a copy of this array and return it. And so another actually is another array, and it does not equal the original one. So it's a new array. So we can use this slice method to convert arguments into an actual array that we can call functions on it with. And so the only requirement for slice is that the object have a length property.

So we're going to use a technique called borrowing prototype functions. So what I'm going to do is we'll call array prototype slice. And so if we look at this, we'll see that it's a function. And I'm going to use something that we haven't talked about yet, and we're going to talk about it in the next video. But just try to follow along here.

I'm going to call the apply function. And as the this argument, we're going to pass the arguments object. And that will actually return a real array that we can call array methods on. And so back in our function here, what I'm going to do is instead of just assigning this to arguments, we'll convert it first into an array. Now you can use call or apply here, it doesn't matter.

Back in the browser, let me refresh this. And we'll take a look at the arguments object now. Notice this time around the args variable is an array. And if we look at its prototype pointer, it now points up to the array prototype. And we get all these useful methods like find and join, index of, slice, and so on that we didn't have on the original arguments object.

So back in our code, let's say that we wanted to get all of the arguments after these first two named ones. So I'll put a little comment here to indicate to other users of this code that there's some other optional arguments here. What we can do is called the slice method on this args array and say we want to get a new array that has the arguments after the position two.

Notice this is using regular number index notation instead of array-based index notation. So it would be two instead of one. So then we'll refresh the browser, and this will drop us back in the debugger. And if we look at the other variable, we see that it's empty currently because we haven't actually passed in any other additional arguments. So let's go ahead and pass in a few more.

And we'll get back to our debugger and take a look at the other array now. So notice that our arguments array has all of the arguments, and now our new other array has only the last two arguments that were not named. Sometimes it's useful to iterate over all of the arguments that were passed in and do something with those arguments. So now that we have our args converted into an array, we can use an array method on it called for each to iterate over each argument.

And so for now, we'll just take the argument, and we'll print it to the console. And over in the console when I refresh, you can see each one of the arguments is now printed to the console. And so this allows us to iterate over the arguments in the list. So we converted it to an array, and then just called the for each method on that array. You can also just use a for loop and iterate over the arguments object directly using its length property.

In this video, we took a detailed look at function arguments. First we looked at how to create named or formal parameters or arguments, which we can reference just like regular variables inside of the function body. Then we looked at how to use anonymous arguments using something called the arguments key word or the arguments object, which allows us to access each argument by index and also provides a length property that we can use for iteration. We looked at how to take this arguments object and convert it into an array so that we can access the array methods like slice and for each. And then finally we looked at how we can iterate over the arguments by converting them to an array and then calling this for each method.