Tips and Tricks on JavaScript call Function With Examples

Developers use JavaScript call function to apply the same function to more than one object. In other words, you can make a method or a function, already assigned to a specific object, be invoked for another object as well.

In this tutorial, you will learn about JavaScript call function options. You will understand how to call a function in JavaScript as a function and as a method. We will also explain JavaScript call function options, such as function constructor and function method. Moreover, you will get acquainted with the this keyword.

JavaScript Call Function: Main Tips

• Function invocation is more often named simply calling a function.
• A block of code in a function is executed when the function is invoked.
• There are a few JavaScript call function options.
• this keyword in JavaScript represents an object containing current code.

Using this Keyword

When a function does not have an owner object, the global object becomes the value of this keyword. The global object in a webpage is the browser window.

In the example below, the value of this keyword is the window object:

function simpleFunction() {        
   return this;  
}  

simpleFunction();

Invoking a Function

So, how to call a function in JavaScript? The call function can be invoked as either a function or a method. What is more, it can be performed by using function methods and constructors.

We will now review all options one by one, so you could understand the differences and cases in which they should be used. As usual, code examples will be used to illustrate the concepts better.

As a Function

The example below displays a function that does not belong to any object. Actually, by default, it belongs to a global object window. You can use it with the window prefix (window.simpleFunction()) but it is not necessary.

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

simpleFunction(10, 6); // will return 60

Note: This example executes a global function. While it is a common way to invoke a function in JavaScript, it is not considered as good practice in computer programming. Global variables can conflict with local ones and create bugs.

As a Method

Functions can be defined as object methods in JavaScript.

The example below creates a new object simpleObject with two properties (numberX and numberY) and one method (sumNumbers):

var simpleObject = {
  numberX: 58,
  numberY: 11,
  sumNumbers: function () {
    return this.numberX + this.numberY;
  }
}
simpleObject.sumNumbers(); // Will return 69

The sumNumbers function is inside of the simpleObject object and is owned by it. Therefore, if we call sumNumbers function, it will return the value of this. The value will turn out to be object: sumNumbers function is owned by an object, which is simpleObject:

var simpleObject = {
    numberX: 58,
    numberY: 11,
    sumNumbers: function () {
        return this;
    }
}
simpleObject.sumNumbers(); // returns [object Object]  (the simpleObject)

Using a Function Constructor

Constructor invocation is achieved if the function declaration starts with new keyword. It works like creating a new function, but as functions are objects in JavaScript, you create an object.

When an object is created using the constructor, it inherits all its properties and methods:

// This is the constructor
function simpleConstructor(num1, num2) {
    this.number1 = num1;
    this.number2  = num2;
}

// Creating a new object
var xyz = new simpleConstructor(14, 8);
xyz.number2;  // would return 8

Using a Function Method

JavaScript has predefined call() and apply() methods. Both of them can invoke other functions, and have to take their owner as the first argument.

The only difference between these methods is that while call() method takes arguments one by one separately, apply() method takes arguments as an array:

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

simpleObject = simpleFunction.call(simpleObject, 22, 2); // Will return 44

function simpleFunction(x, y) {        
   return x * y;  
}
newArray = [22, 2];
// Will also return 44
simpleObject = simpleFunction.apply(simpleObject, newArray);

JavaScript Call Function: Summary

• Knowing how to call a function in JavaScript means understanding all possible options: function, method, function constructor, and function method. How a function should be invoked, depends on the context.
• When working with functions, you should know always be aware of what this keyword references in a particular case.