JavaScript

JavaScript Call() Method

call()” is a predefined JavaScript method that is used for calling methods of various objects. The JavaScript call() method is invoked while taking the object owner as an argument. In this situation, the “this” keyword refers to the object or owner to which the method belongs. In JavaScript, all functions are considered object methods, and if that’s not the case, then the function will be utilized as a global object.

This write-up will discuss the JavaScript call() method. Moreover, we will also demonstrate how to use the JavaScript call() method for chaining the object constructors and function borrowing with the help of examples. So, let’s start!

JavaScript call() method

A normal function is considered as an instance of the “Function” type. For instance, we have created a sample display() function that will have some code in its body:

function display(){
// body of the function
}

Now, check the association between the display() function and the “Function” by executing the below-given “console.log()” function. It will return “true”, as our defined display() function is an instance of the “Function” type:

console.log(show instanceof Function);

Syntax of the JavaScript call() method

In JavaScript, the “Function” type comprises a method “call()” which has the following syntax:

functionName.call(thisArg, arg1, arg2, ...);

As you can see in the syntax, the “call()” method will invoke the function “functionName”. The first argument, “thisArg” of the call method, represents “this” value, and it also permits to set the value of “this” to a specified object. The remaining arguments, such as “arg1”, “arg2”… can be the normal arguments of the created function.

Example 1: Using JavaScript call() method

After defining a function in JavaScript, we have to invoke it to so that it can perform the added operations. In this situation, when the created function is called, the JavaScript function invokes the call() method for that function.

For instance, we have created a displayFunc() which will display a string “This is linuxhint.com” on the console window:

function displayFunc() {
console.log('This is linuxhint.com');
}

Now, we will invoke our displayFunc() function using the function name:

displayFunc();

It will show you the following output:

Invoking the displayFunc() function or invoking the call() method for the displayFunc() function will show the same output:

displayFunc.call();


Inside a function, “this” value is set to the global object by default, which is “global” on node.js and “window” on web browsers. Executing the below-given function will help you understand this concept:

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

Upon calling the displayFunc(), the value of “this” which is set to the “window” object, will be returned:

displayFunc();

Example 2: Using JavaScript call() method

First of all, we will create a “sum()” function with the parameters “x” and “y”. Inside the body of the “sum()” function, we will add the code to return the addition of the passed arguments:

function sum(x, y) {
return x + y;
}

Now, instead of calling the “sum()” function directly, we have utilized the “call()” method for invoking our created “sum()” function. Here, in this case, the value of “this” will be set to the global object:

let result = sum.call(this, 89, 98);
console.log(result);

Have a look at the provided example and its output:

Example 3: Using the JavaScript call() function

In this example, firstly, we will create a “greeting” variable:

var greeting = 'Hello';

Next, we will define a “message” object having a property named “greeting”:

var message = {
greeting: 'Hi'
}

After doing so, we will create a “welcome()” function. Inside the “welcome()” function, we will refer to the “greeting” variable with “this” value:

function welcome(name){
console.log(this.greeting + ' ' + name);
}

Now, if we invoke the “welcome()” message while passing “this” and ‘Mark’ as arguments, it will show the below-given output:

welcome.call(this,'Mark');

In the other case, you can also invoke the “welcome()” function with the “call()” method while passing the “message” object as the value of “this”:

welcome.call(message,'Mark');

Upon doing so, you will see a string “Hi Mark” as output:

Chaining object constructors using JavaScript call() method

You can also utilize the call() method to chain object constructors. Don’t know how to do that? Check out the following example.

Example: Chaining object constructors using JavaScript call() method

To show you how to chain object constructors using the “call()” method, firstly, we create an object() function having two parameters length and breadth:

function object(length, breadth) {
    this.length = length;
    this.breadth = breadth;
}

Next, we will create another “Widget()” function comprising three parameters: length, breadth, and color. For assigning the value to the “length” and “breadth” variable, we will invoke the object() function with the call() method. For the “color” variable, its value will be assigned within the “Widget()” function:

function Widget(length, breadth, color) {
    object.call(this, length, breadth);
    this.color = color;
}

Now, we will create a new “widget” object having a length “90”, breadth “70”, and color as “blue” values:

let widget = new Widget(90,70,'blue');
console.log(widget);

Check out the output of the above-given example:

Function borrowing using JavaScript call() method

Function borrowing is a concept in which an object utilizes the method of another object. This section will demonstrate the procedure of function borrowing using the JavaScript call() method.

Example: Function borrowing using JavaScript call() method

To explain the function borrowing, the first thing we need to do is create two objects and define some functions for each of them. To do so, we will add a “bike” object, having a “name” property and three simple methods: start(), speedup(), and stop():

const bike = {
    name: 'bike',
    start: function() {
        console.log('Start your ' + this.name);
    },
    speedup: function() {
        console.log('Speed up your ' + this.name)
    },
    stop: function() {
        console.log('Stop your ' + this.name);
    }
};

After doing so, we will create another object, “aeroplane” which contain a “name” property and a “fly” function:

const aeroplane = {
    name: 'aeroplane',
    fly: function(){
        console.log('Fly your Aeroplane');
    }
};

Now, we will use the “call()” method for invoking the “start” method of the “bike” object on the “aeroplane” object:

bike.start.call(aeroplane);

As you can see from the output that we have successfully borrowed the method of the bike object for the aeroplane object:

Conclusion

In JavaScript, call() is a built-in method that can be used to invoke an object’s method or function as its first parameter. You can also utilize the JavaScript call() method with an object for using a method that belongs to another object. This write-up discussed the JavaScript call() method. Moreover, we have also demonstrated the usage of the JavaScript call() method for chaining the object constructors and function borrowing 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.