Teach with us

What is a JavaScript call() Method?

JavaScript call() method is used to call a function with another object as the first argument.

The call() method in JavaScript is a type of method that is used to write a function that can be used on different objects. The functionality of the call() method is almost similar to the apply() method. The only difference between these two methods is that, the apply() method can be invoked using an array as argument in case of many items, while in call() method, we individually pass every parameter separated instead of a list of all items.

The call() method can be used to call the function inside the JavaScript object using the parameter of another object.

Parameter − The first value passed to the call() method is the object whose property we wan to use inside the function of another object, while all the other parameters passed can either be global or other than the object.

Return Value − The value returned by the call method is the value or the statements written inside the function of the object on which we are using the call() method.

Syntax

The following syntax will show you how to use the call() method in your code −

call( thisArguements, individualArguements);

In the above syntax, thisArguements refers to the object parameter that is passed inside it, while the individualArguements refers to the other parameters passed inside it.

Let us discuss and understand the working of the call() method in details by implementing them practically inside code examples −

Algorithm

Step 1 − In the first step, we will add two input elements in the HTML documents to get the input data from the user.

Step 2 − In the second step, we will add a button element to the HTML document with a onclick event associated with it, which later calls a function once the user clicks the button.

Step 3 − In this step, we will define a JavaScript object with some properties of initially empty values and another JavaScript object with a property contains a JavaScript function as value.

Step 4 − In the last step, we will define a JavaScript function which contains the whole logic from grabbing the input values from the user to display them on user screen using the call method on the object function.

Example

The below example will explain everything about the call() method and the algorithm written above −

<html>
<body>
   <h2> Using JavaScript call() Method </h2>
   <p> Enter your Name and Roll Number: </p>
   <input type = "text" id = "inp1" placeholder = "Name"> <br> <br>
   <input type = "number" id = "inp2" placeholder = "Roll No"> <br> <br>
   <button id = "btn" onclick = "display()"> Click to see the results </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var userData = {name: '', roll: ''};
      var user = {
         data: function () {
            return " Hi <b> " + this.name + ", </b> <br> " + " Your Roll No. is: <b> " + this.roll + " </b> <br> ";
         }
      }
      function display() {
         var enteredName = document.getElementById('inp1').value;
         var enteredRoll = document.getElementById('inp2').value;
         userData.name = enteredName;
         userData.roll = enteredRoll;
         var ans = user.data.call(userData);
         result.innerHTML += ans + " <br> ";
      }
   </script>
</body>
</html>

In the above example, we have used the call() method to call the functional property data of the user object and pass another object userData as an value inside it.

Let us see one more code example in which we will pass more than one parameters to the call() method as the function defined inside the object will accept parameter.

Algorithm − The algorithm of this example and the above example is almost same. There will be some minor changes you need to perform as listed below −

  • Add two more input tags to the HTML document and grab their values inside the display() function.

  • Define the function of the data property of user object with parameters, so that it can accept them later at the call.

  • Pass the value of the newly added input elements entered by the user to the function call inside the call() method.

Example

The below example will illustrates you the use of the call() method with more than one parameters as well as explain the above changes in the algorithm −

<html>
<body>
   <h2> Using JavaScript apply() Method </h2>
   <p> Enter your Name, Roll Number, and Branch: </p>
   <input type = "text" id = "inp1" placeholder = "Name"> <br> <br>
   <input type = "number" id = "inp2" placeholder = "Roll No"> <br> <br>
   <input type = "text" id = "inp3" placeholder = "Branch"> <br> <br>
   <button id = "btn" onclick = "display()"> Click to see the results </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var userData = {name: '', roll: ''}
      var user = {
         data: function (branch) {
            return " Hi <b> " + this.name + ", </b> <br> " + " Your Roll No. is: <b> "
            + this.roll + " </b> <br> " + " You enrolled in <b> " + branch ;
         }
      }
      function display() {
         var enteredName = document.getElementById('inp1').value;
         var enteredRoll = document.getElementById('inp2').value;
         var enteredBranch = document.getElementById('inp3').value;
         userData.name = enteredName;
         userData.roll = enteredRoll;
         var ans = user.data.call(userData, enteredBranch);
         result.innerHTML += ans + " <br> ";
      }
   </script>
</body>
</html>

In the above example, we have passed the parameters other than the object individually that are accepted by the function of the data property of the user object.

In this article, we learned about the call() method in JavaScript in detail with the help of two different code examples. The examples, we discussed above both shows the use case of the call() method in two different scenarios.

Updated on 06-Jan-2023 12:41:39

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements