6.2 Working With Functions

Hi folks, in this lesson we're going to look at some of the properties and methods that functions have. Functions ultimately are objects as well, like most other things in JavaScript, and so they also come with a number of properties and methods that we can make use of. So let's have a simple test function first of all. So we have to find a simple function here which accepts two parameters, and it returns those two parameters added together. There's really only one properties functions that we'll ever be interested in and that is the length property. When used with a function, this property refers to the number of named parameters. Functions do have some other properties, but they are generally unavailable in all browsers, and so they're not recommended for general use. Let's move on now to look at some of the methods that functions have. Functions don't have a huge number of methods, but the ones that they do have are extremely powerful. These are the call, apply and find methods. And they can all be used in very similar ways with just some subtle difference between them, especially call and apply. The call method is used to invoke a function and specify the objects that should be used the functions this objects. So let's just add a new object first of all. So we've added a regular object literal in the variable person and we've given it name and job properties. Let's set a new function now called introduce. So this function just logs an introductory message to the console but it makes use of this .name and this .job as part of the message. So if we were to invoke the introduce function normally just by adding it's identifier and a pair of parenthesis, this would be undefined inside the function. What we can do instead is invoke this function using the call method. So, let's see the output in the browser's console now. It works in the way that we were probably expecting. So what's happened is, when we use the call method, we can specify what the this object, inside the function that we're calling should point to. So in this case, we are using the call method with the introduce function and we're saying that inside the introduce function, the Vis object should point to the person object literal. So the first argument that we pass to the call method is the object that we want to use for this. But we can also parse any number of additional arguments, and these arguments will be parsed to the function being invoked as arguments. So let's just add a named parameter to the introduce function. So this time the introduce function accepts a grammatical inductee and we've added that to the message that gets logged to the console. So now if we want to pass in the name of an inductee, we can add a second argument when we use the call method. So what's happened is when we use, and we can see that the argument has been passed through in the way that we would expect. So don't forget, we can pass as many additional arguments as we want using the call method, and they are just passed as a comma separated list. So this argument passing is actually where the difference between the call and the apply methods emerge. Everything about the apply method is the same as the call method, it invokes the function and allows us to specify the binding for the this objects inside the function that apply is used with. So at the moment we aren't passing any arguments and so we see undefined as part of our string. But you can see that so far it's working in the same way that the comma had worked. So now let's work at passing arguments. And now we see the same message as before. So the difference between call and apply is how we pass arguments. The apply method only takes two arguments. The first argument is the objects that should be used for this insider function, and the second argument is an array containing all of the arguments that we want to pass to the function that we're applying. This is useful when we don't know how many arguments we're passing to the function. This makes the apply method very flexible because we can pass an unknown number of arguments to the function that is being invoked. There is a great neumonic to remember the difference between the co and apply methods. That neumonic is as follows, C for call, A for apply. C is for comma because when we use the call method the arguments are passed as a comma separated list. A is for array, because the arguments passed to apply a passed as an array. C for call, A for apply, as long as you remember that, you will always remember how to use the call and apply methods, and what the difference between them is. So, before we finish up in this lesson, let's take a quick look at the bind method. The bind method also allows us to control the value of a function's this object. But this method returns a new function and the this object that we specify is the this object for the function that bind returns. So bind itself doesn't invoke the function that its called on. Let's look at a simple example. The function that we've defined, addToCart, receives an argument called price, which will add to a running total. We check whether the this object has a property called total and if it doesn't, we add one and initialize it to zero. The function then updates the total with the number passed into the function and, lastly, returns a string showing the name of whose cart it is and the current total. So now we have to bind the function to an object to use as it’s this object. We call the bind method on the addToCart function and specify the person object that we used earlier as an argument. So the person object will become the functions this objects. So now we can invoke our function and pass it in a value. And we can invoke it later again if we want. So let's take a look in the console to see what output we're getting. We can see what we're seeing undefined at this point. And the reason we're seeing undefined is because I've used this .price instead of this .total. Let me just fix that quickly. And now it's working as we expect. We can see that the total property keeps on being updated. This is quite useful. So when we use the bind method, JavaScript returned a function that we can invoke. And every time we invoke that function the this object will always point to the object that we passed into bind. We can also specify arguments that may be passed when the bound function is invoked. Maybe we want to add a handling fee to each item added to the cart, which is the same each time the function is called. We can update the function to accept a fee. And now when we bind to the addToCart function we can specify the default value for this fee. And let's now check the browsers output. So we can see that each time the function has been invoked here as simply added one to the total. So in this lesson we looked at the different properties and methods that we can use with functions. We first looked at the length property which simply tells us how many name parameters a function accepts. When then moved on to look at the call, apply, and bind methods which can all be used to set the this object or the context of a function. We saw that call and apply are both very similar. They only differ in that with call we need to specify each argument independently. Whereas with apply we can pass an array containing all of the arguments that we want to pass to the function. Lastly we looked at the bind method, which returns a new function that has this object bound to a particular value, and it retains this each time the returned function is invoked. In the next lesson, we're going to learn all about Scope in JavaScript. Thanks for watching.