Understanding call, apply, and bind in JavaScript

Terms to know

Method: A function associated with a class or object.

What is call?

call is a method that lets you call a function with a desired this value.

• Because it is associated with the **Function class** in JavaScript so it called a method.

Let’s understand it by an example:

const person = {
  name: "Nitesh",
  myName: function() {
      console.log(this.name);
  }
}

Here, person has a name and a method myName. If we call person.myName(), it prints "Nitesh".

// Case 1
person.myName(); // Nitesh

// Case 2
const { myName } = person;
myName(); // undefined

• In case 1, the output is "Nitesh" because myName is called on person.
• In case 2, the output is undefined because myName is no longer attached to person, so this is undefined.

Using call to fix this

myName.call(person); // Nitesh

• We pass the object we want as this to the function.
• Useful if we want to reuse methods across different objects:

const animal = { name: "Tiger" };
myName.call(animal); // Tiger

• You can also pass arguments after the object:

const person = {
  name: "Nitesh",
  myName: function(greeting) {
      console.log(greeting, this.name);
  }
};

myName.call(animal, "Hi"); // Hi Tiger

• If you have multiple arguments, just pass them one by one.

Using apply to pass arguments as an array

apply is almost identical to call, but it takes the arguments as an array:

const person = {
  name: "Nitesh",
  myName: function(greeting, punctuation) {
      console.log(greeting, this.name + punctuation);
  }
};

const animal = { name: "Tiger" };
// Using call
person.myName.call(animal, "Hello", "!"); // Hello Tiger!
// Using apply
person.myName.apply(animal, ["Hello", "!"]); // Hello Tiger!

• call → comma-separated arguments
• apply → array of arguments

Using bind to create a new function

bind is similar to call, but it does not call the function immediately. Instead, it returns a new function with this bound to the object you provide:

const person = {
  name: "Nitesh",
  myName: function(greeting) {
      console.log(greeting, this.name);
  }
};

const animal = { name: "Tiger" };

const printAnimalName = person.myName.bind(animal);

printAnimalName("Hey"); // Hey Tiger

• Useful for event handlers or callbacks, where this may otherwise change.
• You can also preset arguments when using bind:

const greetTiger = person.myName.bind(animal, "Hello");
greetTiger(); // Hello Tiger

Benefits

• Reuse methods across objects → avoids repeating code.
• Control the value of this explicitly.
• Pass arguments flexibly (individual or as an array).
• Create bound functions for callbacks or events.

Conclusion

call, apply, and bind are powerful tools in JavaScript that help you reuse functions, control this, and write cleaner code.