You recently learned how to use the new and this keywords to create and manipulate classes in JavaScript.

There are certain situations where you will want to change the scope of what the this keyword is equal to in your applications.

In this tutorial, you will learn how to use the bind, call, and apply functions to change the scope of the this keyword in JavaScript.

Table of Contents

You can skip to a specific section of this JavaScript tutorial using the table of contents below:

• Why We Might Need to Change The Scope of the this Keyword in JavaScript
• The JavaScript bind Function
• The JavaScript call and apply Functions
• Final Thoughts

Why We Might Need to Change The Scope of the this Keyword in JavaScript

As mentioned in the introduction of this article, the bind, call, and apply functions are used to change the scope of the this keyword in JavaScript. Before we explore how these functions work, it is useful to first consider why we might need to implement this in a JavaScript application.

To start, let's create a JavaScript object with a method in it. Specifically, the object will have a name (Nick), an amount of money (0), and a method called sellCourse that increases the money variable by 49 every time that it is run.

const me = {

    name: 'Nick',

    money: 0,

    sellCourse(){

        this.money += 49;

    }

}

If you reference the sellCourse method by typing me.sellCourse without any brackets on the end, here is what gets returned:

sellCourse(){

        this.money += 49;

    }

Now what happens if you want to store this function in an outside variable? You could theoretically do this with the following code:

const sellCourseFunction = me.sellCourse;

This is exactly the same function as the one held within the me object. More specifically, referencing the sellCourseFunction variable returns the same output as before:

sellCourse(){

        this.money += 49;

    }

You can even test the equality of sellCourseFunction and me.sellCourse using the === operator:

sellCourseFunction === me.sellCourse

//Returns true

However, when you attempt to run the sellCourseFunction, it does not actually increase the value of the money variable within the object. Here's how you can test this:

me.money

//Returns 0

sellCourseFunction()

me.money

//Returns 0 again

However, running the sellCourse method by calling it off of object using the dot operator does increase the value of the money property (as intended):

me.money

//Returns 0

me.sellCourse()

me.money

//Returns 49

What gives?

Well, object methods that use the this keyword are designed to work on the object that is to the left of the dot operator. As an example, when you call me.sellCourse, the this keyword is equal to the me object.

When you run the sellCourseFunction function while it is stored in a separate variable, there is no dot operator, which assigns the value of this to the document - the entire body of HTML on the page. There is no money property in the document object, so the function becomes useless.

Fortunately, there is a workaround. You can use the bind function to fix this problem.

The JavaScript bind Function

We can use the bind function to store the sellCourse method in a separate variable and still cause it to modify the properties within the me object.

Here is how we could do this:

const sellCourseFunction = me.sellCourse.bind(me);

Now, this function modifies the value of the money property, as intended. Here's how you can test this:

me.money

//Returns 0

sellCourseFunction()

me.money

//Returns 49

The bind function is arguably the most popular way to change the scope of the this keyword in JavaScript.

However, there are two alternatives to the bind function - the call function and the apply function. We will discuss these two functions next.

The JavaScript call and apply Functions

While the bind function is useful when you want to bind a method to a specific object or class instance for use later in your application, the call function is better suited when you also want to run the function immediately.

Here is an example:

console.log(me.money);

//Logs 0 to the console

const sellCourseFunction = me.sellCourse.call(me);

//Runs the function bound to the "me" object, 

//and also saves it in the sellCourseFunction variable for reference later

console.log(me.money);

//Logs 49 to the console

The apply function is similar to the call function except that it accepts an array as an argument instead of comma-separated values. Given their similarities, it is sufficient to have an understanding of just the call method for the purpose of this course. You can also read the documentation for the apply function if you think you'll need to use it in a JavaScript application in the future.

Final Thoughts

In this tutorial, you learned how to use the bind, call, and apply functions in JavaScript.

Here is a brief summary of what you learned in this lesson:

• Why you might want to change the scope of the this keyword in JavaScript
• How to use the bind to bind a function to a specific object or class instance
• How the call and apply functions differ from the bind function