Anonymous functions in javascript

In javascript the term anonymous function is very famous. Developers from other programming language may wonder with the wide usage of anonymous function in javascript. They are widely accepted as they can contribute a large amount to make large scale javascript applications cleaner, structured and readable.

What is an anonymous function

Simply saying an anonymous function is a function without a name. In javascript there are two ways a function can be defined. First way is more common and you may have already seen this approach in other programming languages. This style of creating functions is also called function declaration.

Quiet simple ha!. The other way is what we are going to understand in detail. Look at the code snippet below.

You can see that there are two parts in the above code. One is variable declaring section (var myFunction) and other is function definition section (function(){alert('Hello world');}). You may have noticed that there is no function name in the function definition section. So the total code snippet just creates a function to alert a string (Hello world) and then assigns the entire function to a variable named myFunction. So the function still remains anonymous (But of course, we can access that function with variable to which the function is assigned to).

Again in the above example, the second section (Starting with function () {..) the key word function() is called the function operator. So we can say that the anonymous functions are created with function operators. The assignment to the variable myFunction works in the same way as it was assigned with a number or a string. The difference here is that the variable is assigned with a function object instead of a number or a string or a date.

This feature is basically a resulant of how javascript treats functions. In javascript functions are just a type of object and so that they can be passed to other functions (see callbacks for more details) or assigned to variables. To invoke the above function we can use variable to which it is assigned to; as follows.

It should be noted that a function declaration can also be assigned to a variable as follows.

which is again can be invoked as

More over the above method is useful when we need recursive functions(functions calling itself). See the example below.

Using anonymous functions

Lets think about a scenario and try to implement that with anonymous function. The scenario is to alert a string when user clicks on a button.

Ok lets start writing code.

First I will create a function which will alert a string. You already know how to do that as we have seen it just before.

Now all we need to do is use this function on a button clicks element.

Well lets rethink about the code we wrote. Do we really need the variable myFunction above to use that in the ‘on click’ method? Why cant we use just the function itself and avoid the use of variable myFunction? Yes, that is possible in the following way.

You may have seen this way of codes in many javascript application and libraries. In fact this style of using anonymous functions are mostly accepted as this will not create unwanted variables in the context (means functions names).

Note: The scope of the anonymous function varies when we use anonymous functions in this way. To know in detail visit “this keyword in javascript“.

Ok; so we have seen how to use anonymous functions. Lets take a look at advantages and disadvantages.

Anonymous functions- The good part

Well!! anonymous functions are very handy because of the following reasons.

  • They make code more structured and reduce the posiibility of unwanted elements added to context(function names).
  • They can create a temporary(or private) scope.
  • Useful in closures

Anonymous functions- The bad part

  • anonymous function can make things more complex in debugging
  • They cannot be reused for later needs
  • unlike normal functions anonymous functions cannot be called from everywhere within the context. (see the example below)

But the same functionality can be achieved with named function and can be accessed from anywhere.

This behavior is due to hoisting in javascript. To know in more detail visit hoisting in javascript.

Leave a Comment

Your email address will not be published. Required fields are marked *