Bind, Call, and Apply Readme

In this code along, we will be practicing the use of bind, call and apply.

You can follow along using your browser's JS console, or use httpserver to serve the provided index.html. The HTML file will automatically load index.js and edits you make there will be shown in your browser.

Objectives

1. Use call() and apply() to invoke a function with an explicit value for this
2. Explain the difference between call() and apply() in the way you pass arguments to the target function
3. Use bind() to create new functions that are associated to specified contexts
4. Use bind() to execute functions asynchronously

Alternate Ways to Invoke Functions

In our exploration of this, we saw how it can change depending on how it is called. Let's take a look at a quick example. Copy and paste this into your browser's JS console to test for yourself:

function greet() {
	console.log(`my name is ${this.name}, hi!`);
}

greet(); // my name is , hi!

let person = {
	name: 'Bob',
	greet: greet
};

person.greet(); // my name is Bob, hi!

We have a function, greet, that logs a string. Interpolated into this string is this.name. When the greet is invoked as a function, this is referring to the global object, window. We say that the context for the greet() is window. In browser-based JavaScript, window is the "default context."

However, when greet is invoked as a method of an object, this changes to refer to the object the method is invoked in. That is, the context automatically changes to be the containing object. Since person has a name property set, this.name refers to the value 'bob'.

We've seen here that there are conditions where JavaScript will change the context ("what this is set to) automatically. Developers can also force functions to be executed in other contexts. Javascript allows us to do this using the call and apply methods.

function greet() {
	console.log(`my name is ${this.name}, hi!`);
}

let sally = { name: 'Sally' };

greet.call(sally);
// my name is Sally, hi!

greet.apply(sally);
// my name is Sally, hi!

As you see above, we can use call or apply to invoke a function with a specified context. The context in which the function is to be run is passed in as the first argument to these methods.

NOTE: Our greet function is actually an instance of a Function class. Because of this a function instance can also have methods. Functions are things that run, but also things like {} in JavaScript.

Both call and apply let us set the value of this to whatever we pass as the first argument. The difference between the two is how arguments are passed to the function.

Passing Arguments With call and apply

Let's modify our greet function to be a little chattier:

function greet(customerOne, customerTwo) {
	console.log(`Hi ${customerOne} and ${customerTwo}, my name is ${this.name}!`);
}

Now, when we invoke greet, not only do we need to explicitly set this, but we also need to pass values for customerOne and customerTwo.

Using call, we pass the object for this as the first argument, followed by any function arguments in order.

let sally = { name: 'Sally' };

function greet(customerOne, customerTwo) {
	console.log(`Hi ${customerOne} and ${customerTwo}, my name is ${this.name}!`);
}

greet.call(sally, 'Terry', 'George');
// Hi Terry and George, my name is Sally!

Great! Now we see the name and the message! What happens if we don't pass any arguments?

greet.call(sally);
// Hi undefined and undefined, my name is Sally!

The call to apply works similarly to call, except that apply only takes two arguments: the value of this, and then an Array of arguments to pass to the function, like so:

greet.apply(sally, ['Terry', 'George']);
// Hi Terry and George, my name is Sally!

You can remember the difference because apply takes an array (both begin with the letter a). You can use either call or apply. The only difference is stylistic. Both exist because sometimes arguments need to be collected or bundled up (apply) versus passed directly (call).

Introduce bind

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

Sometimes, we want to take a function, associate it to a context and return a "context-bound" version of the original function.

Once we have the "context-bound" version of the function we can call it with (arguments, arguments, ...) or call() or apply() without having to manually set the context. Let's see it in action.

let sally = { name: 'Sally' };

function greet(customer) {
	console.log(`Hi ${customer}, my name is ${this.name}!`);
}

let newGreet = greet.bind(sally); // newGreet is context-bound to sally

newGreet('Bob');
// Hi Bob, my name is Sally!

greet('Bob');
// Hi Bob, my name is !

As you see from the above code, by calling greet.bind(sally), we return a new function that we then assign to the variable newGreet. Invoking newGreet shows that the this object is bound to sally.

Note that the original greet function is unchanged. bind does not change it. Instead, bind copies the function, and sets the copied function's this context to whatever is passed through as an argument.

We can actually use bind and invoke immediately:

greet.bind(sally)('Bob');
// Hi Bob, my name is Sally!

But this is just a noisy way of doing the same work of call() or apply().

bind(), call(), and apply() in JavaScript code

But assigning this to a variable like we did with newGreet makes this easily reusable and transferable. In complex applications, there are times when it is better that this refers to the context we assign. Until the introduction of arrow functions, every new JavaScript function defined its own this value. Using bind, we can prevent this behavior.

Let's imagine we want to create an app that matches user interests with keywords from upcoming events. We could create a User class and be able to assign properties to user instances, like a name and an array of interests. We can also include a class function, matchInterests, that takes in an event and returns true if there are any matching keywords:

class Event {
	constructor(title, keywords) {
		this.title = title;
		this.keywords = keywords;
	}
}

class User {
	constructor(name, interests) {
		this.name = name;
		this.interests = interests;
	}

	matchInterests(event) {
		return event.keywords.some(function(word) {
			return this.interests.includes(word);
		});
	}
}

let billy = new User('billy', ['music', 'art', 'movies']);
let freeMusic = new Event('Free Music Show', ['music', 'free', 'outside']);

billy.matchInterests(freeMusic);
// Uncaught TypeError: Cannot read property 'interests' of undefined

Here, a new User instance is created and assigned to billy. A name and interests are assigned as properties in the constructor. We've also created a new Event, with a title and keywords, assigned to freeMusic.

matchInterests is a class method that takes in an event object, checks to see if some event keywords are included in the user's interests, and returns true or false accordingly.

Except, when we call billy.matchInterests(freeMusic);, that is not what happens. The problem in our code above is here:

function(word) {
  return this.interests.includes(word);
}

Since every new function defines its own this value, when the callback function is invoked, this will be undefined. We can see this by logging inside and outside the function:

class Event {
	constructor(title, keywords) {
		this.title = title;
		this.keywords = keywords;
	}
}

class User {
	constructor(name, interests) {
		this.name = name;
		this.interests = interests;
	}

	matchInterests(event) {
		console.log("'this' is defined: ", this);
		return event.keywords.some(function(word) {
			console.log("'this' is now undefined: ", this);
			return this.interests.includes(word);
		});
	}
}

let billy = new User('billy', ['music', 'art', 'movies']);
let freeMusic = new Event('Free Music Show', ['music', 'free', 'outside']);

billy.matchInterests(freeMusic);
// 'this' is defined:  User {name: "billy", interests: Array(3)}
// 'this' is now undefined:  undefined
// Uncaught TypeError: Cannot read property 'interests' of undefined

In the first console.log, this refers to the billy user instance. In the second, this is undefined. To solve this problem, we can use bind:

class Event {
	constructor(title, keywords) {
		this.title = title;
		this.keywords = keywords;
	}
}

class User {
	constructor(name, interests) {
		this.name = name;
		this.interests = interests;
	}

	matchInterests(event) {
		return event.keywords.some(
			function(word) {
				return this.interests.includes(word);
			}.bind(this) // added to the and of the callback function
		);
	}
}

let billy = new User('billy', ['music', 'art', 'movies']);
let freeMusic = new Event('Free Music Show', ['music', 'free', 'outside']);

billy.matchInterests(freeMusic);

Let's see why the above code works. When the matchInterests method is invoked, this refers to the User instance context receiving the method call. We are in that context when our callback function is defined. Using bind here lets us keep this referring to the User context.

A Brief Look at Arrow Functions

In modern JavaScript, arrow functions don't have their own this, so this will refer to whatever context the arrow function was invoked in. Using an arrow function, we could rewrite matchInterests as:

matchInterests(event) {
  return event.keywords.some(word => this.interests.includes(word));
}

Here, this will refer to the User instance context.

Summary

We reviewed how this works for simple function calls. Then we saw how call and apply allow us to instantly execute functions while specifying the this value of the executed function. Then we learned how to use bind to make copies of functions with a new this value bound to the copy of the function.

Resources

• MDN: Function.prototype.call()
• MDN: Function.prototype.apply()
• MDN: Function.prototype.bind()
• No Separate This

View Javascript bind call and apply on Learn.co and start learning to code for free.