Understanding this, call(), apply(), and bind() in JavaScript

When people first come across the keyword this in JavaScript, it often feels confusing. The word itself sounds simple, but the behavior changes depending on how a function is called.

A very practical way to think about it is this.

this refers to the object that is calling the function.

Whenever a function runs, JavaScript checks who called that function. The caller becomes the value of this.

Once you keep this idea in mind, most situations become much easier to understand.

Let us walk through a few common cases.

What this Means in JavaScript

In JavaScript, this is a keyword that points to the object executing the current function.

It is not fixed. The value of this depends on how the function is invoked.

Consider this small example.

function showContext() {
    console.log(this)
}

showContext()

If you run this in the browser console, JavaScript prints the global object. In browsers this is usually the window object.

This happens because the function was called directly and not through any object.

So JavaScript falls back to the global context.

this Inside Normal Functions

When a function runs without being attached to an object, this refers to the global object in non strict mode.

Here is a simple illustration.

function printName() {
    console.log(this.name)
}

let name = "Gaurang"

printName()

The function prints Gaurang because JavaScript looks at the global scope where the variable name exists.

This behavior is one reason beginners get confused. The function itself does not contain the name variable, but the global scope does.

this Inside Objects

Things become clearer when functions are defined inside objects.

let user = {
    name: "Rohit",
    greet: function () {
        console.log("Hello, my name is " + this.name)
    }
}

user.greet()

Here the function greet is called by the object user.

Since user called the function, this refers to user.

That means this.name becomes Rohit.

You can think about it in a very simple way.

If an object calls the function, this points to that object.

What call() Does

JavaScript also allows us to manually decide what this should be. One way to do this is with the call() method.

The call method executes a function immediately and lets us specify what this should refer to.

Look at this example.

function introduce() {
    console.log("Hi, I am " + this.name)
}

let person1 = { name: "Aman" }
let person2 = { name: "Neha" }

introduce.call(person1)
introduce.call(person2)

In the first line, the function runs with person1 as this.

In the second line, the function runs with person2 as this.

Even though the function is the same, the result changes depending on the object we pass.

This technique is often called method borrowing.

What apply() Does

The apply() method is very similar to call.

The only real difference is how arguments are passed.

With call, arguments are passed separately.

With apply, arguments are passed inside an array.

Example.

function addNumbers(a, b) {
    console.log(a + b)
}

addNumbers.call(null, 4, 6)

addNumbers.apply(null, [4, 6])

Both statements give the same result.

The difference lies only in the format of the arguments.

call uses individual values.

apply uses an array.

What bind() Does

The bind() method behaves slightly differently from call and apply.

Instead of running the function immediately, bind returns a new function.

That new function always uses the this value we provided.

Example.

function greet() {
    console.log("Hello " + this.name)
}

let person = { name: "Karan" }

let greetPerson = greet.bind(person)

greetPerson()

The function greetPerson now permanently uses person as this.

This is useful when you want to store a function and run it later while keeping the correct context.

Difference Between call, apply, and bind

All three methods control the value of this, but they behave differently.

call executes the function immediately and accepts arguments one by one.

apply also executes the function immediately but expects arguments inside an array.

bind does not run the function immediately. It returns a new function with this fixed.

A quick way to remember this is:

call runs the function now

apply runs the function now with array arguments

bind creates a function to run later

Small Practice Exercise

Trying these ideas yourself makes the concept clearer.

First create an object with a method that uses this.

let car = {
    brand: "Toyota",
    showBrand: function () {
        console.log("Car brand is " + this.brand)
    }
}

car.showBrand()

Now borrow the method using call.

let anotherCar = {
    brand: "Honda"
}

car.showBrand.call(anotherCar)

Even though the method belongs to car, it now runs using anotherCar.

Next try apply with array arguments.

function multiply(a, b) {
    console.log(a * b)
}

multiply.apply(null, [3, 5])

Finally try bind and store the function.

function sayHello() {
    console.log("Hello " + this.name)
}

let student = { name: "Arjun" }

let helloStudent = sayHello.bind(student)

helloStudent()

Once you experiment with these patterns a few times, the behavior of this starts making sense.

The most important thing to remember is simple.

this points to the object that calls the function.

call, apply, and bind are simply tools that help you control that behavior when you need it.