JavaScript Essentials - Call, Apply, and Bind

Using call, apply, and bind methods

The call, apply, and bind methods in JavaScript are used to set the value of this in functions. This tutorial explores how to use these methods effectively.

The call Method

The call method calls a function with a given this value and arguments provided individually.

function greet(greeting) {
    console.log(greeting + ', ' + this.name);
}
const person = { name: 'Alice' };
greet.call(person, 'Hello'); // Output: Hello, Alice
                

The apply Method

The apply method calls a function with a given this value, and arguments provided as an array.

function greet(greeting) {
    console.log(greeting + ', ' + this.name);
}
const person = { name: 'Bob' };
greet.apply(person, ['Hi']); // Output: Hi, Bob
                

The bind Method

The bind method creates a new function that, when called, has its this value set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

function greet(greeting) {
    console.log(greeting + ', ' + this.name);
}
const person = { name: 'Charlie' };
const greetCharlie = greet.bind(person);
greetCharlie('Hey'); // Output: Hey, Charlie
                

Comparing call, apply, and bind

Here is a quick comparison of call, apply, and bind:

• call - Invokes the function immediately with individual arguments.
• apply - Invokes the function immediately with arguments as an array.
• bind - Returns a new function with the specified this value and arguments, does not invoke the function immediately.

Practical Example

Consider a scenario where you have a function that logs details of a person, and you want to use it for different people without repeating the function definition:

const person1 = { name: 'Dave', age: 25 };
const person2 = { name: 'Eve', age: 30 };

function logDetails(city, country) {
    console.log(this.name + ' is ' + this.age + ' years old and lives in ' + city + ', ' + country);
}

logDetails.call(person1, 'New York', 'USA'); // Output: Dave is 25 years old and lives in New York, USA
logDetails.apply(person2, ['London', 'UK']); // Output: Eve is 30 years old and lives in London, UK

const logDetailsForDave = logDetails.bind(person1);
logDetailsForDave('Toronto', 'Canada'); // Output: Dave is 25 years old and lives in Toronto, Canada
                

Summary

In this tutorial, you learned how to use the call, apply, and bind methods in JavaScript. These methods are powerful tools for controlling the context in which a function is executed, making your code more flexible and reusable.