Hello guys! evening to you all. I want to welcome you all to my new tutorial post on JavaScript. Just a quick recap of what we discussed in our previous tutorial post, we discussed about how to implement JavaScript nested functions with some examples.
Now we are going to be looking into another interesting topic on JavaScript called The Function Constructor.
The function statement is not the only way to define a function. You can also define your function dynamically using Function() constructor along with the new operator.
Note - Constructor is a terminology from Object Oriented Programming. You may not feel comfortable for the first time, which is OK.
Note - Constructor is a terminology from Object Oriented Programming. You may not feel comfortable for the first time, which is OK.
Syntax
Following is the syntax to create a function using Function() constructor along with the new operator.
<script type="text/javascript">
<!--
var variablename = new Function(Arg1, Arg2...., "Function Body");
//-->
</script>
<!--
var variablename = new Function(Arg1, Arg2...., "Function Body");
//-->
</script>
The Function() constructor expects any number of string arguments. The last argument is the body of the function. It can obtain arbitrary JavaScript statements, separated from each other by semicolons.
You can also read our tutorial post on: What is JavaScript?
In the example below, you will notice that the Function() constructor does not pass any argument that specifies a name for the function it creates. The unnamed functions created by the Function() constructor are called anonymous functions.
Example
Try the following example below for better understanding of what we are actually talking about.
<html>
<head>
<script type="text/javascript">
<!--
var func = new Function("x" , "y" , "return x*y;");
function secondFunction() {
var result;
result = func(10 , 10);
document.write(result);
}
//-->
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="secondFunction()" value="Click">
</form>
</body>
</html>
<head>
<script type="text/javascript">
<!--
var func = new Function("x" , "y" , "return x*y;");
function secondFunction() {
var result;
result = func(10 , 10);
document.write(result);
}
//-->
</script>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type="button" onclick="secondFunction()" value="Click">
</form>
</body>
</html>
You can also read our tutorial post on: JavaScript Syntax
Output
Below is the output of the above example:
Click the following button to call the function
Alright guys we have come to the end of this tutorial on JavaScript Function() constructor, in my next tutorial post we will be discussing about JavaScript Function Literals.
Always feel free to ask your questions via the comment box below, they will be attended to as soon as possible. Thanks for reading and bye for now.
Always feel free to ask your questions via the comment box below, they will be attended to as soon as possible. Thanks for reading and bye for now.