#3 Anonymous Functions

I have seen interviewers asking a candidate to write down the anonymous function on a paper before them. So, this post is for those candidates. Cheers!

Before we start to understand what is an anonymous function, we need to first understand the different ways of creating a function in JavaScript.

There are two ways to create a function:

1. Function declaration

2. Function operator

So, let's start with function declaration.

When you have a function keyword in the beginning of the statement and the function name following it, it's a function declaration. 

<script>
function callMe()
{
    console.log("I am a function declaration");
}
callMe();
</script>

Output:

I am a function declaration

Now, below is the example demonstrating how the above function can be written using function operator.

<script>
var abc = function()
{
    console.log("I am a function operator");
}
abc();
</script>

Output:

I am a function operator

As you can see, the function() is not the first statement in the statement. This signifies that it's a function operator and not function declaration.

Which one should I use?

You must have heard hoisting in JavaScript. If not then no worries. Hoisting in simple English means to bring something up. Like flag hoisting on an Independence day! JavaScript also does this hoisting while parsing the code. Look at below examples:

<script>

function callMe()
{
    console.log("I am a function declaration");
}
callMe();
</script>

Output:

I am a function declaration

<script>

callMe();

function callMe()
{
    console.log("I am a function declaration");
}
</script>

Output:

I am a function declaration

First example is straightforward where you are calling a function after it has been declared. But what about second one? You are calling the function before it is declared and it's working fine without any error. It's not a magic. It's JavaScript implementing hoisting.

When JavaScript starts to parse your code, it finds all the functions declared and bring them up behind the scenes. For you callMe() is the first statement but for JavaScript after parsing it's the last statement in the second example.

So, all this hoisting is possible only when the functions are declared and not when the functions are created using function operator. Hoisting is not applicable to function operators.

Function operators are created at runtime. This means, whenever the function appears, it is created at that point of time unlike function declaration where the functions are hoisted. See the output of below example:

<script>
a();
var a = function()
{
    console.log("I am a function operator");
}

</script>

Output:

Uncaught TypeError : a is not a function

To remove the above error just bring down the a(); statement.

This means if you declare function inside if, switch, for loops blocks, be cautious because the function will be hoisted during parsing and you might not get expected outputs. So, better use function operator in such scenarios.

So, I hope you have understood the concept of function declaration and function operator. 

When you write a function using a function operator, you are creating anonymous function. It doesn't have a name. This means the anonymous functions are created when they occur in the code. 

Anonymous functions do not always have a name?

No it's not like that. You can have names.

<script>
var a = function callMe()
{
    console.log("I am a function operator");
}
a();
</script>

Output:

I am a function operator

Here the function callMe() is stored in a variable a. So you need to invoke the callMe() using a().

What is the benefit of having a name then? You can see in a below example how you can have recursive function. But remember that though it has a name, it's an anonymous function. It is 

<script>
var flag=1;
var a = function callMe()
{
    console.log("I am a function operator");
    if (flag==1)
    {
        flag=0;
        callMe();
       
    }
}
a();
</script>

Output:

I am a function operator

I am a function operator

Above is not the only case. This also helps while debugging because not all (written by other developers in your team) will have names for their anonymous functions. When you have names it's easy to track the named anonymous function in the logs.

Anonymous functions are widely used in JQuery and AngularJS.