Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Invoke JavaScript Function with New Function Constructor
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>
731 Views
