📅 Wed, Dec 4, 2024 ⏲️ ~ 5 minutes Advanced

How Call, Apply, and Bind Work in JavaScript

When working with JavaScript, it is common to encounter situations where we need to control the value of this.

This is where the call(), apply(), and bind() methods come into play. These methods allow us to explicitly set the context of this for a function.

Method	Description	Execution
`call`	Immediately execute a function with a specific context.	Immediate
`apply`	Similar to `call`, but when the arguments are in an array.	Immediate
`bind`	To create a new function with a fixed context.	Not immediate

These methods are very useful when we want to ensure that this points to the correct object, regardless of how the function is invoked (and that it does not get “lost”).

Method call()

The call() method allows calling a function with a specific this value and passing the arguments one by one.

The syntax for call() is as follows:

functionName.call(thisArg, arg1, arg2, ...);

thisArg: The object you want to associate with this when the function is executed. This defines the context.
arg1, arg2, …: The arguments passed to the function, listed one by one.

Let’s see it with an example,

function greet(greeting) {  
  console.log(`${greeting}, I am ${this.name}`);  
}  

const person = { name: "Luis" };  

greet.call(person, "Hello");  // Output: "Hello, I am Luis"

The function greet does not have its own this object.
We use call() to set the value of this to the person object.
We pass the argument "Hello" directly as a parameter.

Method apply()

The apply() method works similarly to call(), but the arguments are passed as an array or list.

The syntax for apply() is:

functionName.apply(thisArg, [arg1, arg2, ...]);

thisArg: Similar to call(), it is the value that will be assigned to this.
[arg1, arg2, …]: An array or iterable object that contains the arguments for the function.

If we look at an example, it could be:

function introduce(name, age) {  
  console.log(`My name is ${name} and I am ${age} years old. I am ${this.profession}`);  
}  

const context = { profession: "developer" };  

introduce.apply(context, ["Luis", 30]);  
// Output: "My name is Luis and I am 30 years old. I am developer"

apply() is useful when you have the arguments stored in an array or need to pass them dynamically.

Method bind()

Unlike call() and apply(), the bind() method does not execute the function immediately.

Instead, it returns a new function with the value of this bound to the specified context.

The basic syntax of the .bind() method is as follows:

functionName.bind(thisArg[, arg1[, arg2[, ...]]]);

thisArg: The value to associate with this when the function is executed. This defines the function’s context.
arg1, arg2, ... (optional): Arguments that are passed before the arguments the original function would take.

const person = {  
  name: "Luis",  
  greet: function() {  
    console.log(`Hello, I am ${this.name}`);  
  }  
};  

const greeting = person.greet.bind(person);  
greeting();  // Output: "Hello, I am Luis"

Let’s see it with an example. bind() is useful to ensure that this remains fixed, even when the function is used in other contexts.

const object = {
    name: "Luis",
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

const greetLuis = object.greet.bind(object);
greetLuis(); // "Hello, my name is Luis"

In this example,

By using bind, we create a new function greetLuis that will always have this pointing to the object.
This ensures that when invoked, the greet method correctly accesses the name property.

Practical Examples

In object-oriented programming in JavaScript, classes can inherit methods from their base classes. However, sometimes we need a method from a base class to use the context of a derived class. This is where .bind() becomes useful.

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a sound.`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
        this.speak = this.speak.bind(this);  // Ensure that `this` refers to the dog object
    }
}

const myDog = new Dog('Rex');
setTimeout(myDog.speak, 1000);  // `this` inside `speak` refers to `myDog`

In this example, this.speak = this.speak.bind(this) ensures that the speak method of the Dog class executes with the correct context when invoked from outside the class (like in a setTimeout).

The use of .bind() also makes it easier to create partial functions, where some parameter information is partially fixed.

This is useful when we need to create specialized versions of a function, where some arguments are already predefined.

function add(a, b) {
    return a + b;
}

const addFive = add.bind(null, 5);  // Create a new function that adds 5 to any number

console.log(addFive(10));  // 15

bind is especially useful in situations where functions are passed as callbacks. Here’s an example with an event:

const button = document.createElement('button');
button.textContent = "Click me";

const object = {
    name: "Luis",
    greet: function() {
        console.log(`Hello, I am ${this.name}`);
    }
};

// By using bind, `this` always refers to `object`
button.addEventListener('click', object.greet.bind(object));
document.body.appendChild(button);

In this case, when the button is clicked, this inside the greet method will still point to object, preventing the context from being lost.

These examples show how Call, Apply, and Bind work. This does not mean that they are always the best way to solve every problem; in some cases, there may be more suitable solutions.

Method call()

Method apply()

Method bind()

Practical Examples

In the context of inheritance

Partial functions

Callbacks