Open In App

Explain call() and apply() methods in JavaScript

Last Updated : 28 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Call() Method: The call method is basically used to invoke the function with different this object. In JavaScript, this refers to an object. It depends on how we are calling a particular function. In the global scope, this refers to the global object window. Inside function also this refers to the global object window.

In strict mode, when we use any function then this refers to undefined. In functions like call, this could refer to a different object. With the help of the call method, we can invoke a particular function with different objects.

Syntax:

object.objectMethod.call( objectInstance, arguments )

Parameters: It takes two parameters:

  • ObjectInstance: It is an object which we want to use explicitly
  • Arguments: It is arguments that we want to pass to the calling function

Example 1:

Javascript




<script>
    const obj = {
        firstName: "First_name",
        lastName: "Last_name",
        printName: function () {
            console.log(this.firstName 
                + " " + this.lastName);
        }
    };
    obj.printName();
</script>


Output:

First_name Last_name

It’s obvious since we are calling the printName( ) function with the object obj so this should refer to object obj. And inside object obj we have firstName = “First_name” and lastName = “Last_name” so output is “First_name Last_name”.

Example 2: As we know, we can make invoke a particular function with different objects. So we can invoke a function the printName with different objects also.

Javascript




<script>
    const obj1 = {
        firstName: "First_name",
        lastName: "Last_name"
    };
    const obj2 = {
        firstName: "Sachin",
        lastName: "Tendulkar"
    };
    function printName() {
        console.log(this.firstName + " " + this.lastName);
    }
    printName.call(obj2);
  
</script>


Output:

Sachin Tendulkar

In this case, we are using the call method to invoke the function with the object obj2. So in this case this would be referring to object obj2. Because this depends upon how we are actually invoking the function. In this case, this will not refer to the global object window but refer to object obj2.

Passing parameter with the call method: We can also pass the parameter to the call function.

Example 3:

Javascript




<script>
    const obj1 = {
        firstName: "First_name",
        lastName: "Last_name"
    };
    const obj2 = {
        firstName: "Sachin",
        lastName: "Tendulkar"
    };
    function printName(profession, country) {
        console.log(this.firstName + " " 
            + this.lastName + " " +
            profession + " " + country);
    }
    printName.call(obj2, "Cricketer", "India");
</script>


Output:

Sachin Tendulkar Cricketer India

When we pass parameters using the call method then we pass parameters separated by commas( , ).

Apply() method: Just like the call method we can also bind the function to any object. Using apply( ) method also we can invoke a given function with different objects.

Syntax:

object.objectMethod.apply(objectInstance, arrayOfArguments)

Parameters: It takes two parameters:

  • ObjectInstance: It is an object which we want to use explicitly
  • Arguments: It is arguments that we want to pass to the calling function

Javascript




<script>
    const obj1 = {
        firstName: "First_name",
        lastName: "Last_name"
    };
    const obj2 = {
        firstName: "Sachin",
        lastName: "Tendulkar"
    };
    function printName() {
        console.log(this.firstName + " " + this.lastName);
    }
    printName.apply(obj2);
</script>


Output:

Sachin Tendulkar

Passing parameter with the apply method: We can also pass parameters with apply function.

Javascript




<script>
    const obj1 = {
        firstName: "First_name",
        lastName: "Last_name"
    };
    const obj2 = {
        firstName: "Sachin",
        lastName: "Tendulkar"
    };
    function printName(profession, country) {
        console.log(this.firstName + " "
            + this.lastName + " " +
            profession + " " + country);
    }
    printName.apply(obj2, ["Cricketer", "India"]);
</script>


Output:

Sachin Tendulkar Cricketer India


Similar Reads

Explain call(), apply(), and bind() methods in JavaScript
Before implementing bind(), apply(), and call() polyfills, let us know what is a polyfill in JavaScript: Polyfill: Polyfills are the implementation of the features that are given by our browsers, but may not be present in the previous versions of it. 1. Bind() Method: The bind() method creates a new function and when that new function is called it
7 min read
What is the difference between call and apply in JavaScript ?
JavaScript call() Method: It calls the method, taking the owner object as an argument. The keyword this refers to the 'owner' of the function or the object it belongs to. We can call a method that can be used on different objects. Syntax: object.objectMethod.call( objectInstance, arguments ) JavaScript apply() Method: The apply() method is used to
2 min read
Call by Value Vs Call by Reference in JavaScript
Call by Value: In this method, values of actual parameters are copied to the function’s formal parameters, and the two types of parameters are stored in different memory locations. So any changes made inside functions are not reflected in the actual parameters of the caller. Suppose there is a variable named “a”. Now, we store a primitive value(boo
3 min read
Difference between Function.prototype.apply and Function.prototype.call
JavaScript treats everything as an object, even functions, and every object has its own properties and methods. Function objects have both apply() and call() methods on them. However, there is confusion about the two functions in JavaScript. The main difference between them is how they handle function arguments. There is no difference between these
2 min read
Program to swap two integer parameters using call by value & call by address in PHP ?
Call by value: In call by value, we will send the value from the calling function to the called function. The values of the calling function arguments are directly copied to the corresponding arguments of the called function. If any modification is done on the arguments of the called function, it will not be effected on the arguments of the calling
3 min read
Explain lifecycle of ReactJS due to all call to this.setState() function
In React, the states are used to store data for specific components. These states can be updated accordingly using this.setState function. Updating of state leads to the rendering of UI. Different lifecycle methods are called during these renderings. Lifecycle methods called when the app is loaded first: Constructor()render()componentDidMount()Life
2 min read
Explain the differences between empty() remove() and detach() methods in jQuery
If you are building something and want to remove some HTML elements on click, hover, or on any event then you should know that jQuery can do it easily for us. There are three jQuery methods that help us to remove HTML elements with some slight differences. These methods are: remove() Method: It completely removes the selected elements from DOM. It
3 min read
How to Delay a JavaScript Function Call using JavaScript ?
When we want to call a function after a described amount of time, we use a delay function in JavaScript. There are several ways to delay the execution of a function. This can be useful for various purposes, such as creating animations, implementing debounce in search inputs, or simply delaying an action until a certain condition is met. Table of Co
2 min read
Explain the common methods of sending request to a server in jQuery
In this article, we will see the common methods of sending requests to a server by using the jQuery library. jQuery is an open-source JavaScript library jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animation, Ajax interactions cross-browser JavaScript development. Common methods of Sending Requests to the
3 min read
Explain various type of HTML DOM methods
There are some instances in which the HTML markup needs to be dynamically manipulated without actually changing the HTML source code. To achieve this, users can make use of a variety of HTML DOM methods present in JavaScript at their disposal. First, it is important to understand what the HTML Document Object Model (DOM) is. In simple words, it can
6 min read