PHP-Fusion Powered Website

Javascript Anonymous Function

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:

Javascript Anonymous Function eg1.1

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:

Javascript Anonymous Function eg2

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:

eg3

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.

eg3.1

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:

eg4

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.