How to invoke a JavaScript Function with 'new' Function Constructor?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to invoke a JavaScript Function with the 'new' Function Constructor.

Functions are a set of reusable codes that perform a specific task and may return a value. In JavaScript, functions are defined by the keyword function. A function may not have any parameters and may also not have any return statement. In JavaScript, we also have functions with no function names, called anonymous functions

Using the 'new' Function Constructor

The Function constructor makes a new Function object. By using the constructor, we can create a function dynamically. It takes parameters, or arguments, and the function body. It can have security concerns because we can use it to declare a function dynamically.

Users can follow the syntax below to invoke a JavaScript Function with a 'new' Function Constructor.

Syntax

const func = new Function(arg1, arg2, ..., function_body)

In the above syntax, "func" is the variable that stores the function which is created by the 'new' function constructor. The function constructor takes arguments and function body.

Parameters

Arguments– It takes the 'n' numbers of arguments of the function.
Function body– It is the function body that holds all the function's logic.

Invoke Function with 'new' Function Constructor without Parameters

Parameters are the sets of information or data that we pass into a function while calling it. A function can have a single parameter, multiple parameters, or no parameters at all. We must write the function name and put opening and closing brackets to invoke a function. For the anonymous function, we need to write the variable that stores the function and then open and close brackets.

Users can follow the syntax below to invoke a JavaScript function without parameters.

Syntax

// function declaration with no arguments
const func = new Function(function_body)

// function call
func()

The "func" is the variable name that stores the function in the above syntax.

Example

In the below example, we have invoked a JavaScript function with a 'new' function constructor. We use two buttons' click events to call the functions. The "Blue" button will change the "root" element's background color to 'blue' using the "changeBlue" function, and the "Green" button will change the "root" element's background color to 'green using the "changeGreen" function.


<html>
<body>
   <p>Invoking a JavaScript Function with 'new' Function Constructor</p>
   <button onclick="changeBlue()">Blue</button>
   <button onclick="changeGreen()">Green</button>
   <div id="root" style="border: 1px solid black; padding: 10px; margin-top: 10px;">Welcome to Tutorialspoint</div>
   <script>
      let root = document.getElementById('root')
      const changeBlue = new Function("root.style.backgroundColor = 'blue'")
      const changeGreen = new Function("root.style.backgroundColor = 'green'")
   </script>
</body>
</html>

Invoke Function with 'new' Function Constructor with Parameters

The function parameters are the inputs in a function, and by using these parameters, the function does its task and may return some values. A function can have multiple parameters, and each parameter name should be unique. The real values of parameters are called arguments.

Users can follow the syntax below to invoke a JavaScript function with parameters.

Syntax

// function declaration with arguments
const func = new Function(arg1, arg2, function_body)

// function call with arguments
func(arg1, arg2)

In the above syntax, the "func" is the variable name that stores the function. "arg1", and "arg2" are the two arguments of the function.

Example

In the below example, we have invoked a JavaScript function as a function. We use two buttons' click events to perform the square and cube of a number. Each function takes one parameter, "num", By clicking on the "Find Square" button, we are executing the square function, which takes the parameter and returns its square value. By clicking on the "Find Cube" button, we execute the cube function, which takes the parameter and returns its value. We are outputting the functions' return values on the web page.


<html>
<body>
   <p>Invoking a JavaScript Function with 'new' Function Constructor</p>
   <p>Calculate the value of Square and Cube of the number 2</p>
   <button onclick="square(2)">Find Square</button>
   <button onclick="cube(2)">Find Cube</button>
   <h4 id="root" style="margin-top: 10px;"></h4>
   <script>
      let root = document.getElementById('root')
      const square = new Function('num', "root.innerHTML = 'Square: ' + num*num")
      const cube = new Function('num', "root.innerHTML = 'Cube: ' + num*num*num")
   </script>
</body>
</html>