Explain Call and Bind function in JavaScript

Call() & Bind() explanation


Let’s explain call() in JavaScript the right way — starting from the
real problem, why it happens, and how call() & Bind() solves it. This
approach is best for interviews and real-world understanding.


    var employee = {
        name: 'Biswajit Jana',
        org: 'Capgemini',
        displayInfo: function() {
            console.log('Employee: '+ this.name + ' works at '+ this.org);
        }
    };
    // O/P: Employee: Biswajit Jana works at Capgemini
    employee.displayInfo(); 
    /** 
    * The above example and function call works perfectly without issues
    * Now what happens if we store displayInfo attribute value into a variable and call after that ?
    */
    var displayInfo = employee.displayInfo;
    displayInfo();
    // O/P: Employee:  works at undefined
    
        
    // O/P: Employee:  works at undefined

    // Observation:
    // When displayInfo is assigned to a standalone variable and invoked,
    // the function loses its original object context.

    // In JavaScript, `this` is determined by HOW a function is called,
    // not WHERE it is defined.

    // Since `displayInfo()` is called as a normal function (not as employee.displayInfo()),
    // `this` refers to the global object (window in browsers, global in Node.js).

    // The global object does not have `name` and `org` properties,
    // hence both values are undefined.

    

💡 One-Line Summary:

When a method is extracted from an object and invoked independently, it loses its this binding, causing this to point to the global object.

Solution:

    
    displayInfo.call(employee);

    // Explanation:
    // The call() method invokes the function immediately and explicitly sets
    // the value of `this` to the provided object (`employee`).
    // As a result, the function reads `name` and `org` from the `employee` object.   
    
  

Also we can pass extra arguments while calling function like example bellow


    var employee = {
    name: 'Biswajit Jana',
    org: 'Capgemini',
    displayInfo: function(position, address) {
        console.log('Employee: '+ this.name + ' works at '+ this.org + ' with position holding ' + position + ' located at '+ address);
    }
    };
    var displayInfo = employee.displayInfo;
    // O/P: Employee: Biswajit Jana works at Capgemini with position holding Manager located at Bengalore, Whitefield
    displayInfo.call(employee, 'Manager', 'Bengalore, Whitefield');

How call() Works Here

    displayInfo.call(thisArg, arg1, arg2, arg3, ...)
  • thisArg →value of this inside the function
  • Remaining arguments → passed one by one

Apply() works same as Call() but only difference is argument acceptance, we can pass arguments as an array format, see code example bellow


    var employee = {
    name: 'Biswajit Jana',
    org: 'Capgemini',
    displayInfo: function(position, address) {
        console.log('Employee: '+ this.name + ' works at '+ this.org + ' with position holding ' + position + ' located at '+ address);
    }
    };
    var displayInfo = employee.displayInfo;
    // O/P: Employee: Biswajit Jana works at Capgemini with position holding Manager located at Bengalore, Whitefield
    displayInfo.apply(employee, ['Manager', 'Bengalore, Whitefield']);

Related Posts

What are the HTML5 APIs you know

Here are the major features introduced in ES6 (ECMAScript 2015) Geolocation API – Where…

Read
What are the new features came with ES6 standards

Here are the major features introduced in ES6 (ECMAScript 2015) Variables and Scope let…

Read