Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to invoke a JavaScript Function as a method?
In this tutorial, we will learn how to invoke a JavaScript Function as a method.
In JavaScript, the code inside a function will execute when the function is invoked. We can invoke a function in a variety of ways. One of them is using the method. The method is a property of an object that has a function value. We can define functions as object methods. This function will have a function name, a parameter (optional), and a return type (optional). It will have a "this" keyword which refers to an object.
Users can follow the syntax below to declare a method.
//method declaration
//declaring an Object
var ObjectName= {
keyName : value,
// declaring method
functionName: function () {
return this.KeyName;
}
}
In the above syntax, "ObjectName" is the name of the object. The "keyName" is a property, and the "functionName" is a method of the object. In the method "functionName" we declared a function that returns the value of that object's keyName property.
Invoke Function as a method without Parameters
Parameters are the sets of information or data that we pass into a function while calling it. A function can have a single parameter, multiple parameters, or no parameters at all. To invoke a method, we need to declare a method name as an object property, initialize it with the function name, and then put opening and closing brackets.
Users can follow the syntax below to invoke a JavaScript function as a method without parameters.
Syntax
Var myObject= {
methodName : function(){
//statements of code
}
}
//method call
myObject.methodName();
In the above syntax, the "myObject" is an object name, and the method is "methodName", and we are calling the method using the object, i.e., "myObject.methodName()".
Example
In the below example, we have invoked a JavaScript function as a method. We use the button "Show Greeting", and click event to call the method "welcome" which belongs to the object "myObject". It will return the statement by joining two values of the properties "greet" and "name".
<html> <body> <h3>Invoking a <i> JavaScript Function </i> as a method</h3> <button onclick="showGreeting()">Show Greeting</button> <div id="root" style="border: 1px solid black; padding: 10px; margin-top: 10px; display: none;"></div> </body> <script> const myObject = { //properties of the object greet: "Welcome to", name: "Tutorials Point", Welcome: function () { return this.greet + " " + this.name; } } let root = document.getElementById('root') function showGreeting() { root.innerHTML = myObject.Welcome(); root.style.display = 'block' } </script> </html>
Invoke Function as a method with Parameters
The parameters are the inputs in a function, and by using these parameters, the function does its task and may return some values. A function can have multiple parameters, and each parameter name should be unique. We can use these parameters in a method also. For that, we have to call the method using Object.
Users can follow the syntax below to invoke a JavaScript function as a method with parameters.
Syntax
// calling method ObjectName.methodName (parameter1, parameter2, ...)
In the above syntax, "ObjectName" refers to the object to which the method belongs, "methodName" is the method name, and "parameter1", "parameter2", ... are the parameters of the method.
Example
In the below example, we have invoked a JavaScript function as a method. We use two buttons' click events to call the methods multiplication and division. Each function takes two parameters, "num1" and "num2", By clicking on the "Click to multiply" button, we are executing the multiplication method, which takes the parameters and returns their multiplication value. We are executing the division function by clicking on the "Click to divide" button, which takes the parameters and returns their division value. We are outputting the functions' return values on the web page.
<html> <body> <h3> Invoking a <i> JavaScript Function </i> as a method </h3> <p>Perform calculation on numbers: 10 and 4</p> <button onclick = "myObject.multiplication(10,4)">Click to multiply</button> <button onclick = "myObject.division(10,4)">Click to divide</button> <div id = "root"> </div> <script> let root = document.getElementById('root') // Object declaration const myObject = { //properties of the object sentence1: "The multiplication between 10 and 4 is:", sentence2: "The division between 10 and 4 is:", multiplication: function (num1, num2) { root.innerHTML = this.sentence1 + " " + num1 * num2; }, division: function (num1, num2) { root.innerHTML = this.sentence2 + " " + num1 / num2; } } </script> </body> </html>
In this tutorial, we learn how to invoke a JavaScript function as a method with or without a parameter. We can use the other object properties using the "this" keyword and return the desired statement after executing the function.
1K+ Views
