Go to the top

Understanding Javascript Anonymous Function in 10 Minutes

Ronit / Blog, Javascript, Technical / 0 Comments
Anonymous Function Representation

MDN Definition: "A function expression in which the name part is omitted is called an Anonymous Function."

"Hey!!! But what is Function expression?"

Ok, So before I proceed let me explain you the Function Expression.

Function Expression

Function Expression is like any other normal expression but written in the same syntax as a Function Declaration.

function [name]([param[, ... param]]) {
   statements
}

"Seeing something in working while learning makes it easy to learn"

var anonymousFunctionExpression = function(){
  console.log("Hello!!!");
}
var namedFunctionExpression = function sayHello(){
  console.log("Hello!!!");
}

From both the above example we can identify one common thing, that common thing is the biggest identification of Function Expression.

A statement which contains the keyword "Function" but doesn't start with the keyword - "Function" is a Function Expression.

"Yuhuuuu!!! Function Expressions are now clear to mind 🙂 but,

Ronit!!! I still need more clarity on Anonymous Function 🙁"

ANONYMOUS FUNCTION

Anonymous in layman language means " No Name". So when any function expression which doesn't include the name part, it becomes "Anonymous Function".

Anonymous functions are not usable until and unless we capture them in any variable(including function parameter).

"Let me show you what I mean"

function() {
  console.log("I am Mr. X");
}

In above program we can see that we have omitted the name part of the function expression, therefore it's an "Anonymous Function", but we haven't captured it in any variable, therefore we are left with no way to call this function, so this function becomes unreachable.

var MrX = function() {
  console.log("I am Mr. X");
}

MrX();

The above statement also includes an "Anonymous Function" but this time we have captured it in a variable, therefore later we can use the variable name to call the function. So now the anonymous function is reachable and callable.

An important to note here is that - "Anonymous Functions exclude the name part".

So during debugging of any problem, we need to see the Call Stack, where we see the call of functions by there name, but in case of Anonymous Functions, we can't identify them in the call stack, which makes difficult to debug.

Use of Anonymous Function

Anonymous Functions can be used anywhere like a normal function, but the place where Anonymous Functions are more useful is Callback Functions.

Let's me show you a quick use case of Anonymous Function

"Yepieee!!! I now finally understood what Anonymous Function is :D"