Unlocking the mystery of JavaScript anonymous functions

Have you ever felt brain freeze when you suddenly encounter an anonymous function on your JavaScript code?

You don’t have to freeze at all after you read the next few lines. You see, an anonymous function is not anonymous at all. We can actually name it. However, before we get there let’s review the purpose of functions.

Suppose you have a robot and you assign it three tasks every morning:
At 9 am prepare my breakfast
Fetch the Newspaper
Bring the paper and breakfast to my bed

You don’t really have to program these three instructions the night before every time! What you need to do is to create a function, give it a name and assign the three steps to it. Then, every night you activate the function and everything else will take care of itself:

var wakeUp = function (){
  // three line code goes here;

The purpose of a function is to gather code that is supposed to work together, and save it under a specific name. Then we just call that name, wakeUp(), and the code runs from start to finish. In the end, the function clears itself out of memory so functions are actually a good healthy thing for memory management.

So what about anonymous functions?

Let’s look at the following code:

window.onload = function () {
    alert("Your webpage has been loaded. Enjoy!!");

Ok, here we have an anonymous function and this code is a bit more complex, right?
Is it? Look at the first script, wakeUp and then look at the second script, window.onload. Is there any difference between the two? Not at all.

On the first example we declared a variable named wakeUp and assigned a function to it, then closed the assignment with a curly brace and a semicolon.

On the second example, we declared a variable named window.onload and assigned a function to it, then closed the assignment with a curly brace and a semicolon. Exactly the same thing as the first example, right?

Ok, I admit that we had to create the variable wakeUp with var as prefix because wakeUp did not exist yet. On the second example we didn’t have to create a new variable because both window and onload already existed on the JavaScript library but the idea is still the same.

Here’s where anonymous functions and regular assigned functions differ. The first example can be called several times by just calling wakeUp(); The second example does not need to be called, it is used only once when the event window.onload happens. This happening is still a function call just like the first example.

In the end, named functions or anonymous functions serve the same purpose: to store code that can be called on demand. On the second example, the reason why a function was used was to store the code that followed.

So every time we need to gather code we can wrap it in a function whether we name it or not. And every time you see an anonymous function, follow the curly braces to see what the function is storing in its bag of tricks.

As a litmus test for the understanding of what I’ve just wrote, analyze the following tiny script and look at the purpose of the anonymous function. Even if you don’t understand the code, you should now understand the reason for the function, right?

myButton.addEventListener('click', function(){alert('Hello cyber world');}, false);

addEventListener is a function that takes three arguments: a string, an anonymous function, and a Boolean. We now know what the code does. From here to understand why the code is written is a matter of searching for the term addEventListener.


Author: tarau

technical writer, web technologies

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s