JavaScript

Invoking a Function with a Function Constructor in JavaScript

In JavaScript, Invoking a function with a function “constructor” is different from invoking a function as a “method” and invoking it as a “function” because it creates a new object that inherits its constructor function’s properties and methods, and the other two methods do not include inheritance. So make sure you are using the right method to invoke the function to execute JavaScript code efficiently.

This tutorial presents syntax and examples of calling a function using a function constructor. It will also differentiate how the function constructor invoking method is different from the other two methods. So, let’s start!

Invoking a Function as a Function Constructor

In the following example, we will create a “x” object by invoking the “myArg()” function constructor:

    function myArg(arg1, arg2) {
        this.radius = arg1;
        this.height = arg2;
    }
    var x = new myArg(1,2)
      console.log(x);

The output of this program is given below:

The above example first defined a function “myArg()”. After that, we have created an “x” object by invoking the “myArg()” function as a function constructor. The function constructor will then inherits the properties from the original function. We can see that only the values were passed as arguments to the “myArg()” function, but the output also shows the properties associated with them.

Now, let’s check out the other methods for invoking a function in JavaScript.

Invoking a Function as a Function

It is straightforward to invoke a function as a function in JavaScript. The function does not create a new object, but JavaScript will globally create an object. The function will always belong to the HTML page, which is the default object of the function. We can invoke a function by simply using its name and passing the arguments according to the specified parameters.

Example: Invoking a Function as a Function

In this example, we will create a “myFunction()” with two parameters “a” and “b”, and it will return the product of the values of the passed arguments:

function myFunction(a, b) {
  return a * b;
}
myFunction(10, 2);           // Will return 20

Invoking a Function as a Method

JavaScript also allows us to invoke a function as a method. In the below example, we can see that the fullName method is a function that belongs to an object, and “myObject” is the function owner. Here the “this” keyword is also used in the code. The value of “this” in this method is what myObject returns.

Example: Invoking a Function as a Method

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

To invoke “fullName()” method, we will simply invoke it with the help of “myObject” in the following way:

const myObject = {
  firstName:"Alcei",
  lastName: "Jhon",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}
myObject.fullName();         // Will return "Alice  John"

As you can see from the output, the fullName method has returned values of “firstName” and “lastName” properties:

Why Use a Function Constructor to Invoke a Function?

Using other invoking methods rather than function constructors can cause security and performance related issues as other methods create dynamic functions. Function constructor helps to create a function that can be executed in global scope only.

Invoking a Function with a New Function Constructor

A function constructor requires one or more string arguments. In contrast, the last argument will show the function’s body, which consists of the added JavaScript statements separated with semicolons.

Example: Invoking a Function with a New Function Constructor

The following example shows how to invoke a function with a new function constructor:

<html>
   <head>
    <script>
        var func = new Function("a", "b", "return a*b;");
        function multiplyFunction() {
            var result;
            result = func(111,135);
            document.write ( result );
        }
    </script>
   </head>
   <body>
    <p>Click the following button to call the function</p>
    <form>
        <input type="button" onclick = "multiplyFunction()" value="Call Function">
    </form>
   </body>
</html>

Note

A function constructor will never pass an argument that specifies the function name created in the code. It will automatically declare a function as an anonymous function.

Conclusion

In JavaScript, Invoking a function with a function constructor is uncharacteristic and it is based on inheritance. Still, this method of invoking functions has its benefits and can come in handy in certain situations. This tutorial discussed the procedure of invoking a function with the help of function constructor. We also explained the difference between invoking function as a function constructor, invoking function as a method, and invoking function as a function with the help of examples.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.