call(), bind() and apply() Methods in JavaScript

JavaScript call, bind and apply functions

call, bind and apply are methods of functions in JavaScript. As JavaScript Functions are First Class Objects, functions can have properties and methods. length and name are function properties (readonly properties), while call, bind, and apply are function methods that allow you to control the context (this) and pass arguments to functions.

These methods are essential for mastering JavaScript Functions and understanding how to manipulate function execution. They enable you to reuse functions across different objects and provide powerful patterns for functional programming.

Why Use call(), bind(), and apply()?

These methods are particularly useful when you need to:

• Invoke a function with a specific this context
• Borrow methods from other objects (method borrowing)
• Create partially applied functions (currying)
• Pass arguments dynamically from arrays
• Set permanent context for callback functions

call() Method

The call() method invokes a function with a specified this value and passes arguments individually. This allows you to execute a function as if it belonged to a different object. The this keyword will refer to the object passed as the first argument.

Syntax: functionName.call(thisArg, arg1, arg2, ...)

call() Method with this Context

    function sayHi(){
        console.log(`greetings from ${this.name}.`);
    }    
    
    const user={name:"avi"};

    sayHi.call(user);

call() Method with this and Arguments

    function sayHi(time){
        console.log(`${this.name} will reach at ${time}.`);
    }    
    
    const user={name:"avi"};

    sayHi.call(user,10);

Key Point: call() executes the function immediately. If you need multiple arguments, you can pass them separated by commas: sayHi.call(user, arg1, arg2, arg3)

bind() Method

The bind() method returns a new function instead of executing it immediately. This new function has a permanently bound this value and optionally pre-filled arguments. bind() is particularly useful for event handlers and callbacks where you need to maintain the correct context.

Syntax: const boundFunction = functionName.bind(thisArg, arg1, arg2, ...)

bind() Method with Context

    function sayHi(){
        console.log(`greetings from ${this.name}.`);
    }    
        
    const user={name:"avi"};
    
    let greets=sayHi.bind(user);
    greets();

bind() with Partial Application (Currying)

    function sayHi(time){
        console.log(`${this.name} will reach at ${time}.`);
    }    
        
    const user={name:"avi"};
    
    let greets=sayHi.bind(user, 10);
    greets(); // time is already bound

Key Point: bind() is ideal for event listeners, setTimeout callbacks, and any scenario where you need to preserve the this context. Unlike call() and apply(), bind() does not execute immediately.

apply() Method

The apply() method works similarly to call(), but accepts arguments as an array instead of individual parameters. This method is particularly useful when you have arguments stored in an array or need to spread values dynamically.

Syntax: functionName.apply(thisArg, [arg1, arg2, ...])

Key Difference: The primary difference between call() and apply() is how arguments are passed: call() takes arguments individually, while apply() takes an array of arguments.

function sayHi(x,y,z){
console.log(`${this.name} (${this.year}) has ${x}, ${y}, ${z} variants.`);
}    
        
const car={name:"swift",year:2011};
const variants=["lxi","vxi","zxi"];
    
sayHi.apply(car,variants);

Comparison: call() vs bind() vs apply()