4 ways of invoking a function in Javascript with Examples

There are 4 ways of invoking a function in Javascript.

• As a Function
• As a Method
• As a Constructor
• call() and apply()

In this section, we will look at each of them in detail with examples.

Calling function as a function

Let us first look at calling a function as a normal function. This is fairly straightforward.

function greet() {
    console.log("Hello");
}

greet(); // Hello

We have a function greet() which logs the message ”Hello” on the browser console.

The above function does not contain arguments, however, it is important to note that functions in Javascript come with two default parameters. One is this parameter and the other is arguments parameter.

function greet() {
    console.log("Hello");
    console.log(this);
    console.log(arguments);  
};

greet();

Output:

Hello
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]

Whenever we call a function like in the above example, the this parameter will return the Window object. As we move on to other methods of calling functions, we will see how the this value changes depending on the way we invoke a function.

Calling function as a method

The next pattern we are going to look at is calling a function as a method. To do this we will first define an object object and then define a function as the property of the object.

var object = {
    name: "Mickey Mouse",
    greet: function() {
        console.log(this);
        console.log(this.name);

    }
};

object.greet();

Here, we have defined greet as a method that is the property of the object.

Output:

{name: 'Mickey Mouse', greet: ƒ}
Mickey Mouse

Notice, unlike the previous example, this parameter does not refer to the global object Window. Here, it returns the invoking object object.

Calling function as a constructor

Constructor is a function that is called using the new keyword. To call a function as a constructor, we have to use the new along with the function name.

function Greet(){
    console.log(this);
}

var msg = new Greet();

Output:

​​Greet {}

Here, we have a Greet function that simply logs this value. To call this function we can use to new keyword along with the function name. The this returns Greet{} object in this case.

Notice, that the first letter of the function name is in uppercase. This is to indicate that the function Greet is going to be invoked as a constructor later in the code.

Calling function using call() and apply()

The call() and apply() methods allow us to invoke a method of a different object. A simple way of calling both methods is as follows:

function greet(){
    console.log("Hello!");
}

greet(); //Hello!
greet.call(); //Hello!
greet.apply(); //Hello!

Both these methods allow us to change the binding of this. Let’s look at both methods in more detail.

call() method

function.call(this, arg1, arg2, …)

The first argument is an object that determines the value of this. It is followed by additional arguments that can be passed to the function.

To illustrate them, let’s create two employee objects employee1 and employee2. For the sake of demonstration, we will define a method show only on employee1 object. Using call() and apply() we will then invoke the show method for employee2.

var employee1 = {
    fName: "Mickey",
    lName: "Mouse",
    show: function(channel, country) {
        console.log(this.fName + " Makes you laugh");
        console.log("On: " + channel + ", " + country);
    }
};

var employee2 = {
    fName: "Donald",
    lName: "Duck"
};

employee1.show("Disney", "USA");

Output:

​​Mickey Makes you laugh
On: Disney, USA

We are calling show method on employee1 object along with two arguments. The output displays this.fName as Mickey which is the fName of object employee1.

Now let’s try calling show method on employee2.

employee2.show();

Output:

Uncaught TypeError: employee2.show is not a function

As you can see, show method is not available for employee2 and we encounter an error.

If we want to call method show on employee2 we can make use of call() method as follows:

var employee1 = {
    fName: "Mickey",
    lName: "Mouse",
    show: function(channel, country) {
        console.log(this.fName + " Makes you laugh");
        console.log("On: " + channel + ", " + country);
    }
};

var employee2 = {
    fName: "Donald",
    lName: "Duck"
};

employee1.show.call(employee2, "Disney", "USA");

Output:

Donald Makes you laugh
On: Disney, USA

Here, we call the show method of employee1 on employee2 using the statement employee1.show.call(employee2).

In this case, this refers to the employee2 object.

apply() method

The apply method is similar to call method expect it requires the arguments to specified as array-like.

var employee1 = {
    fName: "Mickey",
    lName: "Mouse",
    show: function(channel, country) {
        console.log(this.fName + " Makes you laugh");
        console.log("On: " + channel + ", " + country);
    }
};

var employee2 = {
    fName: "Donald",
    lName: "Duck"
};

employee1.show.apply(employee2, ["Disney", "USA"]);

Output:

Donald Makes you laugh
On: Disney, USA