A Deep Dive into bind, apply, and call in JavaScript

In JavaScript, functions are first-class objects, which means they can be treated like any other value. This makes it possible to pass them around, assign them to variables, and invoke them in various contexts. However, one of the most powerful features of JavaScript functions is their ability to dynamically alter the value of this—the object on which a function operates. This is where bind, call, and apply methods come into play. These three methods allow you to explicitly control the value of this inside a function, offering flexibility in how functions are executed and what context they operate on.

Key Concepts:

1. this Keyword: Refers to the object that is executing the current function. In JavaScript, the value of this can vary depending on how a function is invoked.
2. Method Borrowing: These functions enable reusing methods of one object in the context of another, making your code more modular and reusable.
3. Explicit Binding: With call, apply, and bind, you can explicitly set what this will refer to, overriding JavaScript’s default behavior.

While bind, call, and apply share similarities, they serve different purposes and behave in unique ways. This deep dive will explore their differences, usage, and practical examples.

1. Understanding this in JavaScript

The this keyword in JavaScript refers to the object from which a function is called or invoked. Its value is not fixed and depends on how the function is called. In different contexts, the value of this can change dynamically, which is one of the unique aspects of JavaScript. For example, inside a method, this refers to the object that owns the method, but inside a standalone function, this can refer to the global object (in non-strict mode) or be undefined (in strict mode).

This flexibility can be both powerful and confusing. Developers often encounter issues when this doesn’t behave as expected, particularly when passing functions as callbacks or in event handling. The need to control the value of this is what led to the creation of the call, apply, and bind methods, which allow explicit binding of this to ensure consistent behavior.

2. The call Method

The call method is one of the ways in JavaScript to explicitly set the value of this when invoking a function. It allows you to immediately call a function and specify the context in which the function should run, as well as any arguments that the function should receive. This method is particularly useful when you want to reuse functions between different objects or contexts.

Syntax:

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

• thisArg: The object to be used as the this context inside the function.
• arg1, arg2, ..., argN: Arguments passed to the function, separated by commas.

How call Works:

When you invoke a function using call, JavaScript executes the function in the context of the object passed as the thisArg. This overrides the default binding of this and forces the function to operate in the provided context.

For example:

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };

greet.call(person1); // Output: "Hello, my name is Alice"
greet.call(person2); // Output: "Hello, my name is Bob"

3. The call Method

The call method is one of the ways in JavaScript to explicitly set the value of this when invoking a function. It allows you to immediately call a function and specify the context in which the function should run, as well as any arguments that the function should receive. This method is particularly useful when you want to reuse functions between different objects or contexts.

Syntax:

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

Where:

• functionName is the function you’re calling.
• thisArg is the value of this that you want to bind inside the function.
• arg1, arg2, ..., argN are the arguments passed to the function, if needed.

How call Works:

When you invoke a function using call, JavaScript executes the function in the context of the object passed as the thisArg. This overrides the default binding of this and forces the function to operate in the provided context.

For example:

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };

greet.call(person1); // Output: "Hello, my name is Alice"
greet.call(person2); // Output: "Hello, my name is Bob"

In this example, the greet function doesn’t belong to either person1 or person2 objects, but by using call, the function can be invoked with this bound to either object, dynamically adapting to the context.

Practical Example of call

One of the most common use cases for call is method borrowing. This is when one object borrows a method from another object, making it possible to reuse functionality without repeating code.

const person = {
  fullName: function() {
    return `${this.firstName} ${this.lastName}`;
  }
};

const person3 = {
  firstName: 'John',
  lastName: 'Doe'
};

console.log(person.fullName.call(person3)); // Output: "John Doe"

In this example, person3 does not have a fullName method. However, by using call, the fullName method from person is borrowed and executed in the context of person3, allowing us to generate the full name dynamically.

When to Use call

• Reusing Functions: When you want to execute a function in a different context, especially if the function is not directly tied to a specific object.
• Passing Arguments Individually: When a function requires arguments to be passed individually, call is useful since it allows arguments to be passed one by one.

call provides a clean and concise way to invoke functions in dynamic contexts, helping to keep your code modular and reusable. It’s particularly beneficial in scenarios where you need to swap contexts or borrow functionality across objects.

3. The apply Method

The apply method is similar to call in that it allows you to invoke a function and explicitly set the value of this. However, the key difference between apply and call lies in how arguments are passed to the function. While call requires arguments to be passed individually, apply allows arguments to be passed as an array or an array-like object.

Syntax:

functionName.apply(thisArg, [argsArray]);

• thisArg: The object that will be used as this inside the function.
• argsArray: An array or array-like object containing the arguments that will be passed to the function.

How apply Works:

When you use apply, JavaScript calls the function with the given this value and the array of arguments. It’s particularly useful in situations where you don’t know how many arguments you need to pass ahead of time or when you have an array of values that you want to apply to a function.

For example:

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];

console.log(sum.apply(null, numbers)); // Output: 6

In this case, the sum function is invoked using apply, and the array numbers is passed as the argument list. The function receives each element of the array as a separate argument (a, b, c), and returns the sum.

Practical Example of apply

A common use case for apply is when you want to invoke a function that expects multiple arguments, but the arguments are stored in an array. For instance, it is often used with the Math object’s methods like Math.max and Math.min, which find the maximum or minimum value from a list of numbers:

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);  // Output: 7
const min = Math.min.apply(null, numbers);  // Output: 2

In this example, Math.max and Math.min are normally called with a list of individual arguments. Using apply, we can pass the entire array of numbers and get the correct result. Here, null is used as the thisArg because this is not relevant in this context (since these functions don’t rely on an object’s state).

When to Use apply

• Working with Arrays: If you have an array of arguments that need to be passed to a function, apply is the ideal choice.
• Variadic Functions: When dealing with functions that accept a variable number of arguments (also called variadic functions), apply simplifies the process of passing arguments.

For example, if a function expects an unknown number of arguments, you can pass an array of arguments with apply instead of manually spreading the array.

function introduce() {
  console.log(`Hello, I am ${this.name} and I love ${this.hobby}.`);
}

const person = { name: 'Sarah', hobby: 'coding' };

introduce.apply(person);  // Output: "Hello, I am Sarah and I love coding."

Key Differences Between call and apply

The primary difference between call and apply is how the arguments are passed:

• call: Arguments are passed individually, separated by commas.
• apply: Arguments are passed as an array or an array-like object.

You can choose one over the other depending on whether you have individual arguments or an array of arguments ready to be passed into a function.

Summary of apply

apply is powerful when dealing with functions that expect a list of arguments, especially when those arguments are already stored in an array. It simplifies the process of invoking a function with dynamic arguments and is often used in mathematical operations or when dealing with arrays of data.

4. The bind Method

The bind method in JavaScript is different from call and apply in that it doesn’t immediately invoke the function. Instead, bind creates a new function that, when called, has its this value permanently set to the first argument passed to bind. This allows for greater flexibility in situations where you need to fix the context of a function but don’t want to call it right away.

Syntax:

functionName.bind(thisArg, arg1, arg2, ..., argN);

• thisArg: The object that should be bound to this when the new function is called.
• arg1, arg2, ..., argN: Optional arguments that will be pre-set when the bound function is invoked later.

How bind Works:

The bind method creates a new function with this bound to the provided thisArg. Unlike call and apply, bind doesn’t execute the function immediately; it returns a new version of the original function with the specified this value. This can be especially useful for event handlers, callback functions, and function currying.

For example:

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const greetPerson = person.greet.bind(person);
greetPerson(); // Output: "Hello, my name is Alice"

In this case, we use bind to create a new version of the greet function, which is permanently bound to the person object. Even when greetPerson is called outside of its original object context, the this inside the function remains bound to person.

Practical Example of bind

One of the most common use cases for bind is in event handling, particularly when you want to ensure that the this value inside the event handler points to the correct object.

For example, in the context of a button click event:

function Button() {
  this.label = 'Click Me';

  this.handleClick = function() {
    console.log(this.label);
  }.bind(this);
}

const button = new Button();
document.querySelector('button').addEventListener('click', button.handleClick);

In this example, without bind, the this inside handleClick would refer to the button element itself, not the Button object, since this in event handlers is typically bound to the DOM element. By using bind, we ensure that the this value in handleClick refers to the Button object, allowing us to access its properties, like label.

Function Currying with bind

Another powerful use case for bind is function currying, which involves creating a new function by pre-setting some arguments. This allows you to create more specific versions of a function that already have some arguments pre-filled, while still leaving room for additional arguments.

function multiply(a, b) {
  return a * b;
}

const double = multiply.bind(null, 2);

console.log(double(5)); // Output: 10

Here, the multiply function is curried using bind. We bind the first argument (a) to 2, effectively creating a new double function that always multiplies its argument by 2. When double(5) is called, it multiplies 5 by 2, returning 10.

When to Use bind

• Event Handling: To ensure that the correct this value is used inside an event handler.
• Function Currying: To create specialized versions of a function with pre-set arguments.
• Delayed Function Invocation: When you need to preserve the this context for a function that will be called later, like in a callback.

For example, when using setTimeout, this can sometimes become undefined because setTimeout executes functions in the global scope. You can use bind to ensure that this refers to the correct object.

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

setTimeout(person.greet.bind(person), 1000);  // Output after 1 second: "Hello, my name is Bob"

Differences Between bind, call, and apply

• Immediate Execution: Both call and apply invoke the function immediately, while bind returns a new function that can be called later.
• Arguments: call and bind pass arguments individually, while apply passes arguments as an array. bind can also pre-set arguments for future invocation.
• Use Cases: Use call or apply when you need to invoke a function right away in a different context. Use bind when you need to create a function that will be invoked later but still needs to retain its context.

Summary of bind

bind provides a powerful way to control the this value in JavaScript functions, allowing you to create a new function that can be called later with the correct this context. It’s especially useful in event handling, function currying, and any scenario where you need delayed execution with a specific context.

5. Comparison: call, apply, and bind

While call, apply, and bind all serve the purpose of controlling the value of this inside a function, their specific use cases, behaviors, and syntax make them distinct from one another. Understanding their differences is crucial to using them effectively in various situations.

Key Differences:

1. Invocation Timing:
   • call: Immediately invokes the function with a specific this value and individual arguments.
   • apply: Immediately invokes the function with a specific this value and arguments passed as an array.
   • bind: Returns a new function with a bound this value that can be invoked later.
2. Argument Handling:
   • call: Passes arguments to the function individually (separated by commas).
   • apply: Passes arguments as an array or an array-like object.
   • bind: Allows arguments to be pre-set (or partially applied) for later invocation.
3. Use Cases:
   • call: Use when you need to immediately call a function in a different context and pass individual arguments.
   • apply: Use when you have an array of arguments you need to pass to a function, particularly when you don’t know how many arguments there will be beforehand.
   • bind: Use when you want to create a new function that can be called later but needs to retain its this context or have certain arguments pre-applied.

Visualizing the Differences:

Here’s a simple example demonstrating how each method behaves in practice:

const person = {
  name: 'Alice',
  introduce: function(city, country) {
    console.log(`Hello, I am ${this.name}. I live in ${city}, ${country}.`);
  }
};

const anotherPerson = { name: 'Bob' };

// Using call
person.introduce.call(anotherPerson, 'New York', 'USA'); 
// Output: "Hello, I am Bob. I live in New York, USA."

// Using apply
person.introduce.apply(anotherPerson, ['Paris', 'France']); 
// Output: "Hello, I am Bob. I live in Paris, France."

// Using bind
const boundIntroduce = person.introduce.bind(anotherPerson, 'Tokyo', 'Japan');
boundIntroduce(); 
// Output: "Hello, I am Bob. I live in Tokyo, Japan."

In this example, all three methods change the this value to refer to anotherPerson (Bob). The difference lies in how arguments are passed and whether the function is invoked immediately (call, apply) or delayed (bind).

Performance Considerations:

In most scenarios, the performance differences between call, apply, and bind are negligible. However, if you are working with performance-critical code or handling a large number of function invocations, it’s worth noting:

• apply can be slower than call when dealing with a large number of arguments, because JavaScript has to internally handle the array and spread the values.
• bind creates a new function every time it is called, which can have a memory overhead, especially when used in loops or event listeners.

When to Choose One Over the Other:

• call: If you know the number of arguments a function will take, and you need to invoke it immediately with a specific this value, call is the best choice.
• apply: When you have an array of arguments and don’t want to manually break it up into individual arguments, apply is the clear winner.
• bind: Use bind when you need to create a new function that preserves the this context for later use or when you want to partially apply some arguments to a function.

Practical Use Cases:

• Borrowing Methods with call:

const car = {
  brand: 'Tesla',
  showBrand: function() {
    console.log(`Car brand is: ${this.brand}`);
  }
};

const bike = { brand: 'Ducati' };

car.showBrand.call(bike);  // Output: "Car brand is: Ducati"

In this case, the showBrand method is borrowed from car and called in the context of bike using call.

Mathematical Calculations with apply:

const numbers = [1, 2, 3, 4, 5];

const max = Math.max.apply(null, numbers);  // Output: 5
const min = Math.min.apply(null, numbers);  // Output: 1

Here, apply allows us to pass an array of numbers to Math.max and Math.min, functions that expect individual arguments.

Currying Functions with bind:

function greet(greeting, name) {
  console.log(`${greeting}, ${name}!`);
}

const sayHello = greet.bind(null, 'Hello');

sayHello('Alice');  // Output: "Hello, Alice!"
sayHello('Bob');    // Output: "Hello, Bob!"

• Using bind, we pre-set the first argument (greeting) to “Hello,” creating a new function that always greets people with “Hello” but still allows the name to be passed later.

Best Practices for Using call, apply, and bind:

1. Use call and apply for Immediate Invocation: If your goal is to invoke a function right away in a specific context, call and apply are generally faster and simpler than bind.
2. Use bind for Event Handlers and Asynchronous Functions: bind is extremely useful when dealing with event handlers, callbacks, and asynchronous code where you need to ensure that this remains consistent.
3. Avoid Using bind in Loops: Since bind creates a new function every time it is called, avoid using it in loops or situations where multiple functions need to be created, as it can result in performance bottlenecks.
4. Understand the Argument Passing: Choose call when you know your arguments beforehand and can pass them individually. Choose apply when your arguments are in the form of an array.

6. Common Use Cases

1. Method Borrowing:

By using call or apply, you can borrow methods from one object to use on another. This is useful when you want to reuse functionality without duplicating code.

2. Function Currying:

With bind, you can partially apply arguments to a function, creating more specialized versions of that function for different scenarios.

3. Event Handling:

bind is invaluable in event handlers where the context (this) may change. Binding the function ensures that the correct object is used as this.

4. Invoking Functions with Arrays:

Use apply when you need to call a function with a set of arguments in an array. This is particularly useful for functions like Math.max or Math.min.

7. Conclusion

In JavaScript, understanding how to control the this context is essential for writing clean, efficient, and reusable code. call, apply, and bind give developers powerful tools to explicitly bind this in different contexts. While they share similarities, knowing when to use each method—whether for immediate invocation, handling arrays, or creating curried functions—is crucial to mastering JavaScript.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....

I agree to the Terms and Privacy Policy

Sign up

Thank you!

We will contact you soon.