Voice of a Developer: JavaScript Anonymous Functions

Introduction

JavaScript is a language of the Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript.

Before moving further let us look at the previous articles of the series:

In the last article I covered functions in depth. Now, I will cover Anonymous Function in detail covering its advantages, disadvantages & differences.

Anonymous Function

We know what a function is and we need to understand what anonymous function is. Anonymous means,

A function without a name is an anonymous function. We store these inside a variable name. So, the invocation happens using the variable name.

Below is an example

var sum = function(a,b){return a+b;};
sum();

Advantages of an anonymous function

The first advantage is that JavaScript allows you to pass an anonymous functions as an object to other functions. You don’t need to explicitly define the function before passing it as a parameter to another function. Example: below is a distance calculator between two points. In method calculateDistanceMetres we’re passing an anonymous function.

function calculateDistanceMetres(pointA, pointB, method) {
var value = method();
return(pointB - pointA) * value;
}
console.log(calculateDistanceMetres(10, 20, function() {
return 1000;
}));

Now, what if we don’t pass anonymous function then what will happen?

console.log(calculateDistanceMetres(10, 20));

Then it will throw below error because method() cannot execute any code,

In order to solve the above case, let us adjust our code which will cover both scenarios

function calculateDistanceMetres(pointA, pointB, method) {
if(method) {
var value = method();
return(pointB - pointA) * value;
} else {
return(pointB - pointA);
}
}
console.log(calculateDistanceMetres(10, 20)); //output 10
console.log(calculateDistanceMetres(10, 20, function() {
return 1000;
}));
//output 10000

Other popular implementation of anonymous function is in popular frameworks & libraries. In Node.js http module createServer method accepts a function which is executed at each HTTP request.

var http = require("http");
var server = http.createServer(function(request, response) {
response.write("Hello World");
response.end();
});
server.listen(1234);

The second advantage is that it’s hidden from the outside world and only accessible to only programmer objects.

Example

var programmer = {
lang: 'Javascript',
browser: 'Chrome',
getFullSpecs: function() {
console.log(this.lang + ' running inside ' + this.browser);
}
}
programmer.getFullSpecs(); //only programmer object could access it

Third advantage it is widely used where you can pass like a callback. For example:

$('#div1').click = function() {
alert('clicked')
};
Or: function CallMe(callback) {
console.log('callback is called after');
callback && callback(); //check whether there is data for callback or not
}
CallMe(function() {
alert('call me')
});

Disadvantages of an anonymous function

If you have a large program then debugging is tough because you don’t know the name of the function in the call stack. The call stack will show it as an anonymous function.

Debug above program in Chrome & see Call Stack. You can notice anonymous function when the execution is at code function () { return 1000; }
These functions cannot be reused.
These functions cannot be unit tested easily. Therefore, you may need to refactor the code.

Differences

Anonymous function	Named function
This function gets created only after its declaration. Javascript doesn’t do hoisting like in the case of normal function.	This function is loaded before any code executes, so the JavaScript engine does what is called hoisting [we will cover this concept in later articles].
You will get an error if you try calling it before then its declaration.	You can call the function before or after declaration anywhere in the code.

Summary

We need to balance between usage of anonymous & named function as it depends upon the use case. Please share comments/feedback.

Read more articles on JavaScript