How To Call A Function In JavaScript

Call method In JavaScript, a process calls a function with a given value and arguments provided individually. On the other hand, when we require features of another object, then we use a method, which is called a call method.

The call() method is a predefined javascript method. With the call(), an object can use a method belonging to another object.

We will learn about “How To Call A Function In JavaScript,” and we will also learn about the apply and bind method. Because if you know about this keyword, it is very helpful to understand the call () method, and you’ll also be able to use this method in place of the call method.  Below are 

How To Call A Function In JavaScript: 3 Methods You Should Know

1. Call
2. Apply
3. Bind

Call Method

In JavaScript, the call() method is used to call a function with a specified this value and arguments provided individually. The call() method is a part of the Function object in JavaScript and can be used on any function.

“ Call ” is a method of an object substituting another object for the current object.

The call() method takes two arguments:

thisArg: The first argument of the call() method is the object that should be treated as this inside the function being called.

arg1, arg2, …: The remaining arguments are passed to the function as parameters in the order in which they are provided.

Here is an example of using the call() method:

Call A Function In JavaScript

Example no 1

const Programmer = {

  Name: "Lucas Hernandez",

  Content: " JavaScript programmer",

  feature: function () {

      console.log (`My name is ${this.Name}. I am working as a  ${this.Content} . 

      It's a perfect opportunity for ${this.Name}. ${this.Name} is a very good person.`);

  }

}

Programmer.feature();

Output

My name is Lucas Hernandez. I am working as a   JavaScript programmer . It’s a perfect opportunity for Lucas Hernandez. Lucas Hernandez is a very good 

person.

Explanation in brief

We’ve created an object called Programmer, with the properties Name and Content. We have used a method the name is a feature. This method outputs the entire value to the console.

Every function in Javascript has access to this keyword. Here, in this function, this keyword will point to the name object. In the console, this.Name, and this.Content both represent the programmer of the object’s properties. When we define a method in an object, this keyword represents the object’s owner.

Also read: JavaScript Exit Function

How to invoke this 

First of all, we use an object name that is a programmer. After that, use ‘.’ (dot) Then the method name and parentheses, and finally, the last semicolon.

Programmer.feature();

Output:

How to use the call() method 

We’ve now created a new object called “Programmer 2,” with the properties “Name” and “Content.”We have not used any new methods; instead, we have called the previous method (Feature) in this function.

How to use the call() method 

First, we use an object name that is programmer, and after that, we use “.” (dot) Then comes the method name, which is “feature,” followed by. “.” and call with parentheses, followed by the name of the 2nd object that is Programmer2, in parentheses, and finally, the final semicolon. 

Example no 2

const Programmer = {
  Name: "Lucas Hernandez",
  Content: " JavaScript programmer",
  feature: function () {
      console.log (`My name is ${this.Name}. I am working as a  ${this.Content} . It's a perfect opportunity for ${this.Name}. ${this.Name} is a very good person.`);
  }
 
}
Programmer.feature();
 
const Programmer2 = {
   Name: "Emiliano Martinez ",
   Content: "C++ Programmer"
 
} 
Programmer.feature.call(Programmer2);

Output

My name is Lucas Hernandez. I am working as a   JavaScript programmer . It’s a perfect opportunity for Lucas Hernandez. Lucas Hernandez is a very good 

person.

My name is Emiliano Martinez . I am working as a  C++ Programmer . It’s a perfect opportunity for Emiliano Martinez . Emiliano Martinez  is a very good person.

Output

The call() Method with Arguments

In this case, we have to define arguments once and use them anywhere with the help of the call () method. We can explain with the help of examples.

Example No 3

const information = {
    FirstName: "Adam  ",
    LastName: "Rodriguez",
   Completedetails: function (district,state,country,) {
        console.log (`Question : What is your name.  Answer : My name is  ${this.FirstName} ${this.LastName}. 
        Question : Where are you from.    Answer: I am from ${district} district , ${state} state  and ${country}  country .`);
    }
 
}
 
 information.Completedetails('Huntsville','Alabama',' United States of America');
 
 const information2 = {
    FirstName: "Josh",
    LastName: "Wilson-Esbrand",
 
 } 
 information.Completedetails.call(information2,'Ontario','Toronto','Canada');

Output

Question : What is your name.  Answer : My name is  Adam   Rodriguez.

        Question : Where are you from.    Answer: I am from Huntsville district , Alabama state  and  United States of America  country .

Question : What is your name.  Answer : My name is  Josh Wilson-Esbrand.

        Question : Where are you from.    Answer: I am from Ontario district , Toronto state  and Canada  country .

Explanation in brief

The call() method with arguments.

We have already discussed and know how we can use the call () method. Now we will discuss using the call () method with arguments. Let’s start!

We’ve created an object called information with the properties FirstName and LastName. CompleteDetails is a method in our library. This method outputs the entire value to the console.

Every function in Javascript has access to this keyword. So over here, in this function, this keyword will point to the information object. So over here, in the console, this FirstName, and this.LastName represents the object’s property information. When we define a method in an object, this keyword represents the object’s owner.

First of all, we use an object name that is information after that use of “.” The method name CompleteDetails is followed by parentheses, followed by the final semicolon.

We’ve now created a new object called “information 2,” with the properties “name” and “content.”We have not used any new methods; instead, we have called the previous method (Feature) in this function.

First, we use an object name that is information; after that, we use “.” Then the method name is “CompleteDetails,” then again “.” after that call with parentheses, and you put the second object name, “Inforamtion2,” in parentheses after that, and finally, the last semicolon.

Now we have assigned new parameters to the CompleteDetails method function, which is

(district,state,country). Use in consoles as well.

Now, whenever we call a function, we enter the values of these parameters. And we get results quickly.

We call a function with arguments that is

First, we use an object name that is information after that use of “.” Then the method name that is CompleteDetails, again “.” after that call with parentheses, and put the second object name, inforamtion2, in parentheses after that use of “,”  and inverted  commas ” “Provide the argument values after that, and finally, the last semicolon.

 information.Completedetails.call(information2,’Ontario’,’Toronto’,’Canada’);

Apply Method

Apply and the call function are extremely similar. The main distinction is that you may supply an array as an argument list when using apply.

The syntax of Apply method 

information.Completedetails.apply(information3,[‘NewOrleans’,’Louisiana’,’United States of America’]);

Program for Apply method

 const information = {
    FirstName: "Adam  ",
    LastName: "Rodriguez",
   Completedetails: function (district,state,country,) {
        console.log (`Question : What is your name.  Answer : My name is  ${this.FirstName} ${this.LastName}. 
        Question : Where are you from.    Answer: I am from ${district} district , ${state} state  and ${country}  country .`);
    }
 
}
 
 
 const information3 = {
    FirstName: "Josh",
    LastName: "Wilson-Esbrand",
 }
 
 information.Completedetails.apply(information3,['New Orleans','Louisiana','United States of America']);

Output

Question : What is your name.  Answer : My name is  Josh Wilson-Esbrand.

        Question : Where are you from.    Answer: I am from New Orleans district , Louisiana state  and United States of America  country 

Explaination in brief

First, we use an object name that is information after that use of “.” Then the method name, CompleteDetails, again “.” after that, apply with parentheses, and put the second object name, information3, in parentheses after that use of “,” then use [] square brackets with “,”  and inverted  commas ” “after that, and finally the last semicolon. 

Output

Bind Method

Bind is a function that aids in the creation of another function that can be executed later with the newly provided context of this.

Program for Bind Method

const information = {
    FirstName: "Adam  ",
    LastName: "Rodriguez",
   Completedetails: function (district,state,country,) {
        console.log (`Question : What is your name.  Answer : My name is  ${this.FirstName} ${this.LastName}. 
        Question : Where are you from.    Answer: I am from ${district} district , ${state} state  and ${country}  country .`);
    }
 
}
 
 const information3 = {
    FirstName: "Josh",
    LastName: "Wilson-Esbrand",
 }
 
//  information.Completedetails.apply(information3,['New Orleans','Louisiana','United States of America']);
 
const getinformation = information.Completedetails.bind(information3,'New Orleans','Louisiana','United States of America');
console.log(getinformation);
 
getinformation();

Output

Question : What is your name.  Answer : My name is  Josh Wilson-Esbrand.

        Question : Where are you from.    Answer: I am from New Orleans district , Louisiana state  and United States of America  country .

Explanation in brief 

In the bind method, we first create a new object and then pass the values of the functions we want to bind to it.

In this example, first we can create a new object called “getinformation.” After that, provide the value of the information object, then use “.” After that, provide the value of “completedetails” and then again use “.” After that, use bind with parentheses, followed by the second object name, information3, in parentheses, followed by the argument values with “,” and inverted commas ” “, and finally the final semicolon.

Output

Difference between Call, Apply, and Bind method

Conclusion

In this article  “Call A Function In JavaScript” we have discussed three methods of calling a function: call, apply, and bind with examples. The call(), apply(), and bind() methods in JavaScript can be used to associate a function with an object.

In this manner, you may use the object to invoke the function as if it belonged to it. These three methods will be extremely beneficial to you. I hope our article helps you understand the differences between these three methods and how to use them in your programming.

We hope the above given information regarding how to call a function in JavaScript was helpful for you.

Thank you for reading!

FAQ (Frequently Asked Questions)