This Code-along

Overview

In this lesson we'll be exploring the ways we can manipulate this to use functions in new ways.

Objectives

1. Use this with functions in JavaScript

2. Use call() and apply() to invoke a function with an explicit value for this

3. Explain the difference between call() and apply() in the way you pass arguments to the target function.

4. Use bind() to execute functions asynchronously

Introduction

You know that we can create objects in JavaScript and store data in their properties, call methods on them, and pass them around between functions.

And you know that you can reference this inside of a function to find out what the function's owner is, and perform operations based on that owner.

But did you know that functions are also objects? And that we can borrow functions from one object and use them on another object? Or hold on to a function with specific arguments and call it later?

If you didn't understand all that, that's okay. In this lesson we'll be exploring the ways we can manipulate this to use functions in new ways.

Don't forget to code along in your console!

Plain Ol' JavaScript Objects (POJOs)

We can create objects in JavaScript to associate values to properties, like a sandwich:

const pbj = {
	name: 'PB&J',
	bread: 'White',
	ingredients: ['Peanut Butter', 'Jelly'],
	cut: 'Triangles'
};

We can also use a constructor function to create all kinds of sandwich objects:

function Sandwich(bread, ingredients, cut) {
	this.bread = bread;
	this.ingredients = ingredients;
	this.cut = cut;
}

const blt = new Sandwich(
	'White',
	['Bacon', 'Lettuce', 'Tomato', 'Mayo'],
	'Rectangle'
);
const reuben = new Sandwich(
	'Rye',
	['Corned Beef', 'Sauerkraut', 'Swiss', 'Russian dressing'],
	'Diagonal'
);

And we can even attach a function to an object like this:

const pbj = {
	name: 'PB&J',
	bread: 'White',
	ingredients: ['Peanut Butter', 'Jelly'],
	cut: 'Triangles',
	serve: function() {
		console.log(`Here's your ${this.name}. Enjoy!`);
	}
};

Now try calling pbj.serve():

pbj.serve();
// LOG: Here's your PB&J. Enjoy!

this and functions

When we called pbj.serve() above, it gave us the message with the name value for our sandwich. The this.name refers to the name of the pbj object because we invoked the serve() method on the pbj object.

If we wanted to explicitly add a serve() method to our blt object, we could do that:

const blt = {
	name: 'BLT',
	bread: 'White',
	ingredients: ['Bacon', 'Lettuce', 'Tomato', 'Mayo'],
	cut: 'Rectangle',
	serve: function() {
		console.log(`Here's your ${this.name}. Enjoy!`);
	}
};

blt.serve();
// LOG: Here's your BLT. Enjoy!

This works, but now we're repeating this serve function everywhere and that's not only a violation of the DRY principle but also just a total pain.

How can we apply what we know about constructor functions to this problem?

It stands to reason that if we can set primitive property values in a constructor function we should also be able to create methods on the object we're constructing. Let's give it a shot:

function Sandwich(bread, ingredients, cut) {
	this.bread = bread;
	this.ingredients = ingredients;
	this.cut = cut;
	this.serve = function() {
		console.log(`Here's your ${this.name}. Enjoy!`);
	};
}

const blt = new Sandwich(
	'White',
	['Bacon', 'Lettuce', 'Tomato', 'Mayo'],
	'Rectangle'
);

blt.serve();
// LOG: Here's your undefined. Enjoy!

Oops! Not quite what we were looking for, but close. The function worked, but we got undefined for this.name. Why?

Here, this refers to the instance of Sandwich that we constructed. We didn't add the name property to our constructor function, so this blt doesn't have a name, so the serve function doesn't have anything to fill in there.

There are a couple of ways we could solve this problem. We could add a name to the constructor function, but then we'd have to change the code for every sandwich we've created to add that new argument. In a bigger system, that might introduce bugs in code we don't know about.

Instead, we can take advantage of JavaScript and add a name property to just our blt and try calling the function again:

function Sandwich(bread, ingredients, cut) {
	this.bread = bread;
	this.ingredients = ingredients;
	this.cut = cut;
	this.serve = function() {
		console.log(`Here's your ${this.name}. Enjoy!`);
	};
}

const blt = new Sandwich(
	'white',
	['bacon', 'lettuce', 'tomato', 'mayo'],
	'rectangle'
);
// add name to the blt before serving
blt.name = 'BLT';
blt.serve();

Perfect! Now our blt's serve function can access a name. If we were to create another Sandwich, and try to call serve() on it without setting the name, we'd get the undefined value for this.name again, because by defining the serve function within the constructor function, we've bound this to whatever current instance is being constructed.

But this brings up some interesting thoughts. If we can add more properties to an object and change its definition at runtime, and if functions are objects, can we invoke functions in a way that allows us to bind new values to this to get new results?

What if we decided that we wanted to serve() something other than a sandwich? I don't know why we would want to do that, because sandwiches are perfect, but some people like to eat other things, I guess.

Alternate ways to invoke functions

Normally, when we want to invoke a function, we simply call it by name directly, like serve(). But there are cases when we want to modify how the function is called, and more specifically, modify the this property of the function.

Let's go back to our serve example. We said that there's an off chance that someone will want to eat something other than a sandwich. So we decide to make serve a function separate from sandwich:

function serve() {
	console.log(`Here's your ${this.name}. Enjoy!`);
}

Okay, let's call serve() now. Back to that undefined problem, right? Of course. Now that the function is all by itself, this will be either window, which doesn't have a name property, or, if we are in strict mode, this remains undefined when the function is called.

We could certainly modify serve to take an object with a name as an argument here, but what if the rest of the system is designed around using the serve function without an argument?

What we need is a way to invoke serve with a value for this that we can control.

call() and apply()

Fortunately, JavaScript gives us a way to do exactly what we need. Two ways, in fact!

We can use call() or apply() to invoke a function with an explicit value for this. Let's see it in action, first with call.

First, let's go back to our Sandwich constructor function and make a couple of sandwiches:

function Sandwich(bread, ingredients, name) {
	this.bread = bread;
	this.ingredients = ingredients;
	this.name = name;
}

function serve() {
	console.log(`Here's your ${this.name}. Enjoy!`);
}

const gc = new Sandwich('White', ['Cheese'], 'Grilled Cheese');
const pbj = new Sandwich(
	'Wheat',
	['Peanut Butter', 'Raspberry Jam'],
	'Peanut Butter & Jelly'
);

Okay, now we want to be able to do the equivalent of gc.serve(), but serve is no longer part of the Sandwich constructor. This is where call() comes in:

serve.call(gc);
serve.call(pbj);

We should see the correct message for each sandwich!

What's happening here? Remember that a function is also an object, so a function can have properties, like this, and it can also have its own methods, in this case, call. Instead of invoking the serve() function directly, we're invoking the call() method of the serve function.

The first argument for call is always the object that you wish to assign to this for the function. So by using call(gc), we called the serve function, setting this to our gc sandwich object. That way, when we accessed this.name inside of the function, it knew the right sandwich for this.

For a simple, no argument function like serve(), we can use apply() interchangeably with call(). The first argument for apply() is also always the object that we want to assign to this in the function, so serve.apply(gc) will work exactly the same as serve.call(gc). Try it out!

So both call and apply give us a way to invoke a function and explicitly set this with the first argument. What is the difference?

Passing arguments with call() and apply()

The only real difference between call and apply is the way you pass arguments to the target function.

Let's modify our serve function to be a little friendlier:

function serve(customer) {
	console.log(`Hey ${customer}, here's your ${this.name}. Enjoy!`);
}

const gc = new Sandwich('White', ['Cheese'], 'Grilled Cheese');
const pbj = new Sandwich(
	'Wheat',
	['Peanut Butter', 'Raspberry Jam'],
	'Peanut Butter & Jelly'
);

Now, when we invoke serve, not only do we need to explicitly set this, but we also need to pass in a value for customer as well.

Using call, we simply pass the object for this as the first argument, and then any function arguments in order after that. So to use serve with call, let's do this:

serve.call(gc, 'Terry');
serve.call(pbj, 'Jesse');

Great! Now we see the name and the message! What happens if we don't pass that second argument?

We'll have an undefined value for customer. What if we skipped the this argument and just passed the customer value?

Double undefined! Why? Think about what's happening here. We said that the first argument to call() or apply() is always the value for this, so inside our serve function, this is being set to the string literal 'Terry', and no value is being set to the customer variable. Inside of serve, when it tries to access this.name, it gets undefined, because the value of this, that string literal, doesn't have a name property.

Okay, what about apply? Again, this works very similar to call, except that apply only takes two arguments: the value of this, and then an array of arguments to pass to the target function. So to use apply with our new serve object, we'll need to pass that customer value inside an array.

serve.apply(gc, ['Terry']);
serve.apply(pbj, ['Jesse']);

Very similar, but we need to wrap that second argument in brackets to make it an array.

Let's add a function to tell a server where to deliver the sandwich to see how call and apply are different with more arguments:

function deliverFood(customer, table) {
	console.log(`Delivering ${this.name} to ${customer} at table ${table}`);
}

deliverFood.call(gc, 'Terry', '4');
deliverFood.apply(pbj, ['Jesse', '15']);

In this case, deliverFood(customer, table) takes two arguments. So when we use call, we pass first the sandwich we want to assign to this, then the two arguments in order.

When we use apply, we also pass in the sandwich first to assign to this, but then we only pass one more argument, which is an array of the rest of the arguments for the deliverFood function.

The choice to use call or apply here is essentially down to preference. They do the same things, with slightly different ways to pass arguments to the target function.

Okay, let's have a little more fun. One place where apply and call get more interesting is when working with variadic functions, or functions that take a variable number of arguments.

Imagine we need to serve our food to any number of customers. Grilled cheese is very popular, and many people are likely to order it at once! We want to be able to call out the order to any number of people at runtime, so we might design a method like this:

function serve() {
	if (arguments.length > 0) {
		const customers = Array.prototype.slice.call(arguments);

		last = customers.pop();

		console.log(`${this.name} for ${customers.join(', ')} and ${last}. Enjoy!`);
	} else {
		console.log(`${this.name}. Order up!`);
	}
}

There's a lot going on here, so let's unpack this. First, you'll notice we check the length of arguments, which is an object that JavaScript provides within a function that contains all of the arguments passed to that function.

But our function declaration, serve(), doesn't have any arguments!

It doesn't have any defined, but you can still pass them. Here, we have a function that may get some customers passed to it, but may not. If it doesn't, then arguments.length will evaluate to zero. We can try this out:

serve.call(gc);

serve.apply(pbj, ['Terry', 'Tom', 'Tabitha']);

The first one should give us the message 'Grilled Cheese. Order up!'. The second should yield 'Peanut Butter & Jelly for Terry, Tom and Tabitha. Enjoy!'

In this case, we used apply for the second one, but that could just as easily have been call. Because the function is not set up to take any specific arguments, we can just use an array of values as the second argument to apply or call and it will be picked up by the arguments object within the function body.

Borrowing functions with call() and apply()

Okay, we've seen the output, but what else is happening in there? Notice this line?

const customers = Array.prototype.slice.call(arguments);

This is a great example of using call in the real world. We have access to this arguments object, which is not a true array, but is an array-like object. We can use the slice function to 'convert' an array-like object to an array of that object's values.

The arguments object doesn't have a slice method, because it isn't an array, so we have to go through Array.prototype to get to the slice function, and then explicitly set its this to our arguments in order to turn them into an array. This is known as borrowing a function.

Advanced: You can think of the prototype property of an object as the template for the non-instantiated version of that object. In the example above, rather than using slice() on an instance of Array, we're accessing the slice method on the Array prototype, which is why we have to use call to give it a valid owner on which to operate. For more information about prototype, check out the MDN documentation for Object.prototype.

Function borrowing is a great way to use the functions of another object without having to explicitly write them into your object.

Let's say we have a function that describes the ingredients of our sandwich, and it's a method of our Sandwich object:

function Sandwich(bread, ingredients, name) {
	this.bread = bread;
	this.ingredients = ingredients;
	this.name = name;
	this.describe = function() {
		console.log(
			`Your ${this.name} includes: ${this.ingredients.join(', ')}. Yum!`
		);
	};
}

const pbj = new Sandwich(
	'Wheat',
	['Chunky Peanut Butter', 'Blackberry Preserves'],
	'PB&Jam'
);

pbj.describe();

Awesome. Now we can describe our sandwich. Now someone comes to our lunch counter and wants a salad. We can represent a salad pretty easily:

const salad = {
	ingredients: [
		'Croutons',
		'Romaine Hearts',
		'Steak',
		'Parmesan',
		'Caesar Dressing'
	],
	name: 'Steak Caesar'
};

We want to be able to describe this salad, but it's not a sandwich, so we can't just call salad.describe(). However, since we know we can borrow functions from other objects with call and apply, we should be able to do that here:

pbj.describe.call(salad);

There we go! Our salad described as if it were a sandwich object! Again, this works because we use call to explicitly set this on the describe method to our salad object, even though the function is attached to an instance of a Sandwich.

// Flat-fact: You don't win friends with salad.

bind()

So far, we have been looking at call and apply, which explicitly set this and then immediately execute the function call.

Sometimes, however, we need to be able to hold on to the function and delay calling it until later. For this, we use bind().

Borrowing functions with bind()

In our earlier borrowing example, we used call to describe a salad from our sandwich describe method:

pbj.describe.call(salad);

This works, but it's semantically very ugly. Operating with the idea that our code should be communicative and clear, it doesn't make a lot of sense that you would describe a salad from a sandwich.

What we'd really love to do is borrow the describe function in a way that we can call it from our salad. That's where bind comes in.

Using bind is similar to call in that the first argument will be the value for this in the target function, then any arguments for the target function come in order after that.

The big difference between bind and call is in the execution. When we use call, we execute the function immediately. When we use bind, we actually create a new function with that this value set, and we can execute it whenever.

Try this with our earlier example:

pbj.describe.bind(salad);

We didn't get our message. Depending on your console, you might have seen a message that says the function was bound, or you might see just an output of the body of the function, but it didn't execute and log our message.

That's because we need to hold our bound function somewhere so we can call it later. Let's try this:

const describeSalad = pbj.describe.bind(salad);

Now we've bound the function, with salad assigned to this, into a new function called describeSalad. Let's try executing our new function:

There's our message! So we bound the function to salad, saved it, and executed it later. But we're here to borrow a function and make our code read nice, so let's try something else.

We know that we can assign new properties and methods to objects at runtime. Since our salad doesn't have a describe method, let's give it one using bind:

function Sandwich(bread, ingredients, name) {
	this.bread = bread;
	this.ingredients = ingredients;
	this.name = name;
	this.describe = function() {
		console.log(
			`Your ${this.name} includes: ${this.ingredients.join(', ')}. Yum!`
		);
	};
}

const pbj = new Sandwich(
	'Wheat',
	['Chunky Peanut Butter', 'Blackberry Preserves'],
	'PB&Jam'
);

const salad = {
	ingredients: [
		'Croutons',
		'Romaine Hearts',
		'Steak',
		'Parmesan',
		'Caesar Dressing'
	],
	name: 'Steak Caesar'
};

salad.describe = pbj.describe.bind(salad);

Okay, using our same Sandwich object, we're now borrowing describe from pbj using bind, and assigning it to salad.describe. All that remains is to test it out by executing salad.describe().

It works! We've successfully borrowed the function, given it to salad, and we can execute it whenever we want!

Asynchronous execution with bind()

We know that we can use bind to create a new function that we can use later, which sounds exactly like what we need to execute functions asynchronously, such as when using setTimeout or setInterval.

Let's take our lunch restaurant a step further, and imagine a function to send a server to a table to check on a customer. That function might look something like this:

function visitTable() {
	console.log(
		`The server is visiting ${this.name} at table number ${this.tableNumber}.`
	);
}

Then we'll have a Customer object that we'll use to represent new customers when they come in:

function Customer(name, tableNumber) {
	this.name = name;
	this.tableNumber = tableNumber;
}

Now when a new customer comes in, we want to create a new Customer object, then set up a timer for the server to come after they've had enough time to look at the menu.

We know that setTimeout takes a function as an argument, and we know that we can't directly invoke visitTable() because we need to set this. Let's use our new friend bind to create a new function with that customer bound to this that we can execute within setTimeout:

//create new Customer instance
const sally = new Customer('Sally', '4');

//schedule table visit
const visitSally = visitTable.bind(sally);

setTimeout(visitSally, 1000);

And we can continue like this, using bind to create new functions for each customer that comes in, setting the this for the function to that customer, and giving those functions to setTimeout to schedule table visits for each person.

Summary

We reviewed how to create and instantiate POJOs, and how this works for simple function calls. Then we explored call and apply to see how we can instantly execute functions while providing a different this value explicitly.

We learned how to borrow functions from other objects using call, apply, and bind, and how to use bind to make copies of functions with a new this and execute them later.

Resources

• MDN: Function.prototype.call()
• MDN: Function.prototype.apply()
• MDN: Function.prototype.bind()

View `this` Code-along on Learn.co and start learning to code for free.