HOME@bhar4tPACKAGES

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

The this keyword in JavaScript is not like other programming language's this, it behaves differently in different scenario.

Let's see this in example:

    const name = {
        firstName: 'John',
        lastName: 'Doe',
        showFullName: function() {
                console.log(this.firstName + ' ' + this.lastName);
        }
    };

Try to execute showFullName() method

    name.showFullName()

The outpout will be

    John Doe

Calling the showFullName() method with the name object, so the this keyword refers to the name object.

Let’s assign the name object's showFullName() method to any identifier to use it without the name object.

    const printName = name.showFullName
    printName()

So if we execute the above-mentioned code, the output:

    undefined undefined

Shocked! Why this happening?

Here, we are storing a reference of name.showFullName() to printName variable. After that, we are calling it without an object reference, so this will now refer to the window (global) object or undefined (in strict mode).

Similarly, other examples are:

    function DemoFunction() {
        console.log(this);
    }
    // Constructor invocation
    new DemoFunction(); // logs an instance of DemoFunction

    const demoObject = {
        demoMethod() {
            console.log(this);
        }
    };
    // Method invocation
    demoObject.demoMethod(); // logs demoObject

    function demoFunction() {
        console.log(this);
    }
    // Simple invocation
    demoFunction(); // logs global object (window)

So, The apply(), bind() and, call() is saviour here. Here the value of this equals to the first argument.

Now we define another name object as name2:

    let name2 = {
        firstName: "Bharat",
        lastName: "Sahu"
    }

and define a separate showFullName() method:

    let showFullName = function (city, state) {
        console.log(this.firstName + " " + this.lastName + " from " + city + ", " + state);
    }

call()

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

and we make call with call() method:

    showFullName.call(name2, 'Raipur', 'Chhattisgarh');
    // output: Bharat Sahu from Raipur, Chhattisgarh

apply()

similar to call(), but expects an array of all of our parameters.

    showFullName.apply(name2, ['Raipur', 'Chhattisgarh']);
    // output: Bharat Sahu from Raipur, Chhattisgarh

bind()

The bind() method creates a new function that, when called, has its this keyword set to the provided value.

    // bind, when we need to call method later
    const showMyName = showFullName.bind(name2, 'Raipur', 'Chhattisgarh');
    showMyName();
    // output: Bharat Sahu from Raipur, Chhattisgarh

The full code snippets will be:

    let name2 = {
        firstName: "Bharat",
        lastName: "Sahu"
    }

    let showFullName = function (city, state) {
        console.log(this.firstName + " " + this.lastName + " from " + city + ", " + state);
    }

    showFullName.call(name2, 'Raipur', 'Chhattisgarh');
    // output: Bharat Sahu from Raipur, Chhattisgarh

    showFullName.apply(name2, ['Raipur', 'Chhattisgarh']);
    // output: Bharat Sahu from Raipur, Chhattisgarh

    const showMyName = showFullName.bind(name2, 'Raipur', 'Chhattisgarh');
    showMyName();
    // output: Bharat Sahu from Raipur, Chhattisgarh

References:

Back to Home