Understand call, apply, and bind in JavaScript with Examples

JavaScript’s methods call, apply and bind are essential for controlling the this keyword in functions. They provide a way to invoke functions with a specific context, which can be very handy in real-world coding scenarios.

In this blog, we'll break down each method, explore how they differ, and offer practical examples to show when and why you should use them.

Table of Contents

1. Introduction to call, apply, and bind in JavaScript
2. Why are call, apply, and bind Important in JavaScript?
3. The call() Method
   • Syntax and Example
   • Real-World Use Case
4. The apply() Method
   • Syntax and Example
   • Real-World Use Case
5. The bind() Method
   • Syntax and Example
   • Real-World Use Case
6. Differences Between call(), apply(), and bind()
7. When to Use Each Method
8. Real-World Scenario: Event Handling with bind()
9. Conclusion

Why are call, apply and bind Important in JavaScript?

The this keyword in JavaScript is notoriously tricky because it doesn't always behave the way you expect. The call, apply and bind methods allow you to explicitly set the value of this in functions, which can help resolve common scoping issues.

1. The call() Method

The call() method allows you to call a function and immediately set its this value to the provided context (the first argument). The remaining arguments are passed individually, comma-separated.

Syntax:

func.call(thisArg, arg1, arg2, ...)

• thisArg: The value of this inside the function.
• arg1, arg2, ...: Arguments passed to the function.

Real-World Example: Borrowing Methods

Imagine you have two objects: person and greet, and you want to use the greet function with a different context.

const person = {
  name: "Alice",
  age: 25
};

function greet(city, country) {
  console.log(`Hello, my name is ${this.name}, and I am from ${city}, ${country}.`);
}

// Using call to borrow the greet function
greet.call(person, "New York", "USA");
// Output: Hello, my name is Alice, and I am from New York, USA.

Use Case:

This is useful when you want to reuse a function with a different object, avoiding the need to rewrite similar methods for each object.

2. The apply() Method

apply() is almost identical to call(), except for how it handles arguments. Instead of passing them one by one, you pass them as an array.

Syntax:

func.apply(thisArg, [argsArray])

• thisArg: The value of this inside the function.
• argsArray: An array of arguments passed to the function.

Real-World Example: Math.max with Arrays

Let’s say you want to find the maximum number from an array. JavaScript’s Math.max() doesn’t work directly with arrays, but you can use apply() to make it work.

const numbers = [1, 5, 10, 15];

// Use apply to pass array elements as individual arguments
const maxNumber = Math.max.apply(null, numbers);
console.log(maxNumber); // Output: 15

Use Case:

apply() is ideal when you need to pass a list of arguments stored in an array. It’s often used with functions like Math.max() or when you have an unknown number of parameters.

3. The bind() Method

The bind() method doesn’t immediately invoke the function like call() and apply(). Instead, it returns a new function with a fixed this value and predefined arguments.

Syntax:

const newFunc = func.bind(thisArg, arg1, arg2, ...)

• thisArg: The value of this inside the function.
• arg1, arg2, ...: Arguments that are permanently set for the new function.

Real-World Example: Pre-setting Arguments

Let’s say you have a button that, when clicked, should greet someone by their name. You can use bind() to create a new function with the name already pre-set.

const person = {
  name: "Bob",
  greet: function(greeting) {
    console.log(`${greeting}, my name is ${this.name}.`);
  }
};

// Pre-setting the name and greeting
const greetBob = person.greet.bind(person, "Hello");
greetBob(); // Output: Hello, my name is Bob.

Use Case:

bind() is particularly useful when you need to set up functions to be called later with a specific context, like when dealing with event handlers or callbacks.

Differences Between call, apply and bind

Here’s a quick breakdown to highlight the main differences:

When to Use Each Method:

• Use call() when you need to immediately invoke a function with a specific this value.
• Use apply() when you need to pass arguments as an array.
• Use bind() when you want to create a new function with a fixed this value and possibly preset arguments, especially in event-driven code.

Real-World Scenario: Event Handling with bind()

Let’s say you’re building a web application and need to handle user interactions with buttons. You can use bind() to create a more efficient event handler that preserves the correct context.

function Button(label) {
  this.label = label;
}

Button.prototype.click = function() {
  console.log(`Button ${this.label} clicked!`);
};

const btn1 = new Button("Submit");

// Use bind to ensure the correct `this` is used inside the click handler
document.querySelector("#submitBtn").addEventListener("click", btn1.click.bind(btn1));

Explanation:

Without bind(), the this inside click() would refer to the button element itself, not the Button object. By binding the method, you ensure it references the correct context (btn1).

Conclusion

The call(), apply() and bind() methods in javascript are powerful tools that allow you to control the this context in functions. Whether you're borrowing methods from one object to another, passing arguments dynamically, or setting up event handlers, mastering these methods can make your code more flexible and reusable.

Understanding when and how to use call, apply, and bind can significantly improve your ability to write efficient, clean, and scalable JavaScript code.

FAQs

• What is the difference between call, apply, and bind in JavaScript?
  The main difference lies in how they handle arguments. call() passes arguments individually, while apply() passes arguments as an array. bind() returns a new function with a fixed this value and optional preset arguments, without invoking the function immediately.
• When should I use call, apply, and bind in JavaScript?
  Use call() when you need to invoke a function immediately with a specific this value. Use apply() when passing an array of arguments to a function. Use bind() when you need to create a new function with a fixed this value and preset arguments, especially in event handling or callbacks.
• Can call, apply, and bind in JavaScript be used with arrow functions?
  No, call(), apply(), and bind() don’t affect arrow functions because they inherit this from their surrounding lexical context, making the use of these methods irrelevant.
• Why is controlling this important in JavaScript with call, apply, and bind?
  The value of this can be unpredictable in JavaScript depending on how a function is called. Using call(), apply(), and bind() allows you to explicitly set the value of this, which helps prevent common scoping errors and ensures your code behaves as expected.
• Can I use call, apply, and bind in JavaScript with built-in functions like Math.max()?
  Yes, you can use apply() to pass an array to functions like Math.max(), which don't natively accept arrays. Similarly, call() can be used to pass arguments individually to built-in functions.