Jonathan Cardy, June 10th, 2011

Up until now I have found the term “anonymous” pretty confusing in the context of JavaScript.   In this post I’ll explain how to define anonymous functions, what “anonymous” means, and what uses these functions have.

The ECMAScript specification does not have any mention of the term anonymous, so in a sense it is open to interpretation.   However, there is a clear consensus from the JavaScript community on the following definition (Crockford, Mozilla, Chrome debugger, Firebug):

“An anonymous function is a function without a name.”

This may seem obvious but it could be confused with the more general definition of anonymous functions which would say that a function is anonymous when it has no identifier, which could be a variable.  For example, consider the following ways of declaring a function:

	//Example 1
	function bob() {
		...
	}
	bob();
 
	//Example 2
	var bob = function(){
		...
	};
	bob();

Example 1 creates a function with name “bob”.  Additionally, a variable named “bob” is created in the current scope and is assigned to the function.

Example 2 declares an unnamed function and assigns it to a new variable named “bob”.

We can see that these two ways of defining a function are essentially the same – both result in a function being created, and a new variable named “bob” assigned to the current scope. However, the second function is anonymous.

In this next example, a function is given both a name “anna” and is explicitly assigned to a variable “bob”:

	var bob = function anna(){
		...
	};
	bob();
	anna(); //Exception: 'anna' is not defined

When we use this format, the function name is not used to create a variable since the variable “bob” is created instead.  However, the function has its name property set to “anna”.

Now, what is the significance of this “name” property?  And why are named functions better than anonymous functions?  Why use anonymous functions at all?  Here is all of the pro’s and con’s I can think of:

As an aside, the above link to the Mozilla Developer Network mentions the term “named anonymous functions”.  I think this is a bit of an unfortunate, paradoxical term and shouldn’t be used, since if a function is named then it clearly isn’t anonymous:

	var result = (function bob(){
		...
	}());

Instead of labelling this piece of code with the term “named anonymous function” it would probably be more useful to understand that the function isn’t kept in scope after it is executed.CodeProject

This entry was posted on Friday, June 10th, 2011 and is filed under Blog.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site .

2 Responses to “JavaScript Anonymous Functions”

1. Peter van der Zee says:

   June 12, 2011 at 11:38 am

   You’re missing two important disctinctions on top of what’s already been said about creating functions…

   1: the named of a function EXPRESSION is bound locally inside the function, but not outside function.
   2: whenever a “would-be-statement” starts with function, the name is mandatory and we’re talking about a function DECLARATION. Which, as a side effect, also has hoisting applied.

   This is why it’s very different to declare a function like this:
   function a(){}
   or
   var b = function(){};
   and…
   var c = function d(){};

   Because in the end, a will be created and initialized before the scope or function starts. On top of that you can’t immediately call it, and some other language brainfarts apply as well.

   On the other hand, the variable b is created at start, but not initialized. And they are an expression, which means they can occur in places where statements are allowed (function declarations are not..). The only restriction applies is that the statement may not start with “function” keyword.

   Then coming to c and d, c is created up front, just like a and b, and also not initialized, just like b. However, c is not. It will not exist until the code reaches that point. And when it does, it will only create c inside that function, not outside. So at any time in the “global” scope, you’ll only have access to a and b. Never c.

   So.. yeah

   Reply
   • Mark Rhodes says:

     November 23, 2011 at 2:31 pm

     I think there are a few places where c should be swapped for d in that final paragraph..

     d is only available inside the function e.g. var c = function d(i){ if(i == 0) alert(i); else d(i-1); }, this works when you call c(4), but you can not call d(4).

     Reply