Invocation Patterns in JavaScript

In JavaScript you can invoke a function in any of four ways. In this article we will have a look at various invocation patterns. There are four ways a function can be invoked in JavaScript.

The four invocation patterns in JavaScript are as follows:

1. Function Invocation Pattern
2. Method Invocation Pattern
3. Constructor Invocation Pattern
4. Indirect Invocation Pattern

Function Invocation Pattern

When you call a function as an expression then it is known as a Function Invocation Pattern. Let us say you have a function as given below:

function FindSquare(number) {
  return number * number;
}

You can invoke the function above as below:

var result = FindSquare(9);
console.log(result);

This way or pattern of invoking a function is called a Function Invocation Pattern. There are a few important points of the function invocation pattern as follows:

1. First, each parameter is evaluated and then passed as an argument to the function
2. The function returns either a value or undefined to the LHS variable. If called, a function that does not have a return value returns undefined.

Method Invocation Pattern

In JavaScript, any function that is part of an object is known as a method.


Assume we have a JavaScript object studentObject as in the following. In the studentObject object, the findgrade property is a function. So we can say findgrade is a method.

var studentObject =
{
    name: "dj",
    marks: 89,
    findgrade: function (marks) {
        if (marks > 75) {
            return "Grade A ";
        }
        else {
            return "Grade B ";
        }
    }
}

Invocation of a method is known as "Method Invocation Pattern". We can invoke a method using the dot operator on the object. The method can be invoked as in the following:

var grade = studentObject.findgrade(99);
console.log(grade);

A method can access its parent object using the operator "this". Let us proceed to modify the studentobject as in the following. Now you will see that we are accessing the other properties of the object in the method using this operator.

var studentObject =
{
    name: "dj",
    marks: 89,
    grade: null,
    findgrade: function (marks) {
        if (marks > 75) {
            this.grade = "A";
        }
        else {
            this.grade = "B";
        }
    }
}

Now we can set the grade property with the invocation of the findgrade method.

studentObject.findgrade(99);
var grd = studentObject.grade;
console.log(grd)

The binding of a method to an object happens when we execute the method. In this way we can work with methods and the Method Invocation Pattern in JavaScript.

Constructor Invocation Pattern

If you invoke a function with the keyword new, then it is a Constructor Invocation Pattern. For example, in the following we are invoking a constructor:

var obj = new String();
var obj2 = new Object();

Arguments to constructors will be passed in the same way as a Function Invocation Pattern. There could be a scenario when the constructor does not require any parameters. Then in that case the constructor can be called without braces.

var obj2 = new Object;

Constructor invocation creates an empty object that inherits from the prototype property of the constructor.

The constructor function usually does not have a return. This is used to initialize a new object. It always returns a new object. Even if the constructor has a return statement with some primitive values, the return statement will be ignored and a new object will be returned.

Indirect Invocation Pattern

You can execute a JavaScript function indirectly using a function's method as well. There are three function methods used to execute a JavaScript function indirectly. They are as follows:

1. Call() method
2. Apply() method
3. Bind() method

Read more about this function's methods here:

• What is Bind method in JavaScript
• What is call() method in JavaScript
• What is apply() method in JavaScript

These are four invocation patterns in JavaScript. I hope you find this article useful. Thanks for reading.