JavaScript

Invoking a Function as a Method in JavaScript

In JavaScript, functions can be called in a variety of ways. This statement may seem unusual to you if you are a JavaScript beginner, and you may think how a function can be called in multiple ways? Do not we just call it? Well, dear readers, there exist four different ways to call a function in JavaScript, and in this write-up, we will specifically talk about invoking function as a method in JavaScript.

Before jumping towards the procedure of invoking function as a method in JavaScript, firstly, let’s show you how to invoke a function as a function in JavaScript. Following this approach, you can easily find the difference between the mentioned function calling practices. So, let’s start!

Invoking Function as a Function in JavaScript

In JavaScript, most of the functions are invoked or called “as a function”. To show you how to invoke a JavaScript function as a function, we will create a “multiplyFunc()” that will have two parameters, “x” and “y”. In the function body, we will multiply the values stored in the parameters:

function multiplyFunc(x, y) {
  return x * y;
}

Now to invoke the “mutliplyFunc()” as a function, we will execute the below-given line and pass “2” and “6” as function arguments:

multiplyFunc(2, 6);   

The output of the above-given code is shown below:


Because the HTML page is the default global object, the “multiplyFunc()” function belongs to the HTML page. The browser window is the page object in a browser. So, the function “multiplyFunc()” will automatically be converted to a window function.

The previously given multiplyFunc() function and the window.multipleFunc() will show you the same output:

function multiplyFunc(x, y) {
  return x * y;
}
window.multiplyFunc(2, 6);   

As you can see that after calling the window.multiplyFunc() and passing “2” and “6” as arguments, the function has returned “12” as output:

Invoking Function as Method in JavaScript

In JavaScript, a function must be specified as an object property to invoke it as a method. In such a case, a JavaScript function comprises two parameters: A “function” that belongs to a specific object and a “this” parameter that owns the JavaScript program; however, in this situation, it will store the declared object.

In the below-given example, we have created an “employee” object having two properties, “firstName” and “lastName”, and a “FullName” object method. The “FullName” method belongs to the “employee” object and is a function:

const employee = {
  firstName:"Jack",
  lastName: "Smith",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}

Now, to invoke the “fullName()” as a method, we will execute the following code:

employee.fullName(); 

The fullName() method will return the firstName and lastName of the “employee” object, which was specified in the function body:

Now, we will change the function body to “return this” so that it outputs the owner object:

const employee = {
  firstName:"Jack",
  lastName: "Smith",
  fullName: function () {
    return this;  }
}

Invoke the fullName() function as an “employee” object method in the following way:

employee.fullName(); 

The output will let you know about the employee object properties such as firstName, lastName, and their values. Note that for fullName object property value, “f” is returned, which indicates that fullName is a function:

Conclusion

By creating a function as an object property, we can invoke a function as a method in JavaScript. When you define a JavaScript function as the property of an object, it comprises two parameters: A function that belongs to a specific object and this parameter that will store the declared object. This write-up discussed invoking function as a method in JavaScript. Moreover, the difference between invoking function as a normal function and invoking function as a method is also demonstrated with the help of examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.