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:
function bob() {
...
}
bob();
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();
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 are all of the pros and cons I can think of:
| Named
| Anonymous
|
| Debugging: We see the name of functions in the stack trace. If all we’re seeing is “anonymous” up and down the stack, that’s not too useful. | Scope: When creating a fake “block” scope using an immediately executing function, we don’t really need a name. |
| Recursion: A function can call itself when it has a name. If it’s only assigned to a variable, then that variable is outside the function’s scope. | Brevity: If it’s a very short function or callback, or an immediately-executing function, it’s nice to keep the function declaration short by omitting a name. |
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
