DEV Community

Cover image for Understand call, apply, and bind in JavaScript with Examples | Mbloging
Muhaymin Bin Mehmood
Muhaymin Bin Mehmood

Posted on • Originally published at mbloging.com

Understand call, apply, and bind in JavaScript with Examples | Mbloging

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.

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, ...)

Enter fullscreen mode Exit fullscreen mode
  1. thisArg: The value of this inside the function.
  2. 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.
Enter fullscreen mode Exit fullscreen mode

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])

Enter fullscreen mode Exit fullscreen mode
  1. thisArg: The value of this inside the function.
  2. 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
Enter fullscreen mode Exit fullscreen mode

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, ...)

Enter fullscreen mode Exit fullscreen mode
  1. thisArg: The value of this inside the function.
  2. 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.
Enter fullscreen mode Exit fullscreen mode

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:

1. call() Method

  • Invokes the Function Immediately: Yes
  • Arguments Passed: Individually
  • Returns a New Function: No

2. apply() Method

  • Invokes the Function Immediately: Yes
  • Arguments Passed: As an array
  • Returns a New Function: No

3. bind() Method

  • Invokes the Function Immediately: No
  • Arguments Passed: Individually
  • Returns a New Function: Yes

When to Use Each Method:

  • when you need to immediately invoke a function with a specific this value.
  • Use apply() when you need to pass arguments as an array.
  • 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));
Enter fullscreen mode Exit fullscreen mode

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

  1. What is the difference between call, apply, and bind in JavaScript?
  2. 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.
  3. When should I use call, apply, and bind in JavaScript?
  4. 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.
  5. Can call, apply, and bind in JavaScript be used with arrow functions?
  6. 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.
  7. Why is controlling this important in JavaScript with call, apply, and bind?
  8. 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.
  9. Can I use call, apply, and bind in JavaScript with built-in functions like Math.max()?
  10. 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.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs