Introduction to Javascript Anonymous Function
Name Anonymous indicates without a name or unknown name. So, an anonymous function defined as a function without a name whenever a function wants to return other functions than simply used this anonymous function concept.
Syntax:
function print(a){
return function (b)
{
return a*b;
}; //anonymous function
}Anonymous functions also used for arguments to other functions.
functionName(function () {
document.write("Hi Amar");
}, arguments);How does Anonymous Function Work in JavaScript?
Anonymous functions work without a name. Surprised right? We will see with an example.
1. General Function
Code:
function getMyName(){
document.write("I am Paramesh");
}
document.write(getMyName());Output:
2. Anonymous Function
Code:
name=function (){
document.write("I am Paramesh");
}
document.write(name());Output:
Explanation:
- In an example, a defining a function name with getMyName() and within the function required code written. This is a general way of defining a function.
- In other examples, the b function is defined without a name, and that unnamed function assigned to a variable. Now, this variable becomes works as a function name.
- You can see in both cases output is the same as I am Paramesh.
Javascript Anonymous Function Examples with Code
Here are some of the examples of an anonymous function, which are as follows:
1. Anonymous Function without Parameter
Syntax:
var variableName=function ()
{
//code
};
variableName();Code: AnonymousWithoutParam.js
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1 align="center">Anonymous function without parameter</h1>
</font>
<script>
var names=function()
{
document.write("I am Paramesh <br>");
document.write("I am Amar <br>");
document.write("I am Sri");
};
names();
</script>
</body>
</html>Output:
Explanation:
- The anonymous function is declared with the variable name. Now, names will become function, and it is called from anywhere.
- After calling the anonymous function, we will get our output without any error from JavaScript Engine.
2. Anonymous Function with Parameters
Syntax:
var division=function (a,b)
{
//code
};
division(20,10);Code: AnonymousWithParam.js
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1 align="center">Anonymous function with parameters</h1>
</font>
<script>
var division=function(a,b)
{
divisionOutput=a/b;
document.write("Division of "+b+" and "+a+" is :"+divisionOutput);
};
division(20,10);
</script>
</body>
</html>Output:
Explanation:
- The anonymous function is declared with a variable name division and expecting two values from anonymous function calling.
- After passing 2 values from division(20,10) to function call, then we will get 2 as output.
3. Anonymous Function with Return Statement
Syntax:
function functionName(parameters1,parameters2,…)
{
return function(a,b,…..)
{
return //required logic;
};
}
var out= functionName(1,2,…);
document.write(out(1,2,….));Code: Multiplication.js
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1 align="center">Anonymous function with Return Statement</h1>
</font>
<script>
var multiplication=function(x)
{
return function(y)
{
return x*y;
};
}
var out=multiplication(19);
document.write("Muliplication of 2 number is :"+out(18));
</script>
</body>
</html>Output:
Explanation:
- A normal function declared with a name multiplication by defining one variable within it.
- Inside the general function, an anonymous function is declared by one variable and the result return to the multiplication().
- We try to execute write(multiplication(20)), we will not get actual multiplication. Why because multiplication() returns the inner anonymous function directly. So we will get out as below.
- First, we need to call the multiplication function by assigning a result into the variable. Like var out=multiplication(19).
- Then call result out () Now, we will get out actual output.
4. Passing Anonymous Function as Argument
Syntax:
function functionName(parameter)
{
return parameter();
}
document.write(functionName ()
{
return
//code;
}));Code: PassFunctionAsArgument.js
<!DOCTYPE html>
<html>
<body>
<font color="green">
<h1 align="center">Passing Anonymous Function as Argument</h1>
</font>
<script>
function getMyClass(myClass)
{
return myClass(); //calling anonymous function
}
document.write(getMyClass(function (){
return "I am from Class 10th";
}));
</script>
</script>
</body>
</html>Output:
Explanation:
- write() method have anonymous function as argument and return a value from getMyClass() method calling.
- After invoking the getMyclass() method, the processor goes to this method definition and looks for the anonymous method.
- Yes, we have an anonymous method, myClass(), and it calls back to the anonymous return output. Anonymous method detected so, processors executes anonymous return statement from write(getMyClass()) calling.
- It will print the output.
