JavaScript Callback, the real deal!

Let’s begin with an Example

If you claim to know basic JavaScript, even client-side, you must have at some point used callback. Surprised? Well, recollect the setTimeout and setInterval functions.

setTimeout(function(){ alert("Hey there!") }, 1000);

In the above code, you will find that the alert statement is passed as a function that gets executed after 1000 milliseconds. This is callback!

Explanation

What occurred in the example above is your piece of code that is passed as a function definition is actually executed by the setTimeout function at some point in its sequence of operations. In other words, your function is called back from within the setTimeout function.

You may typically find that the callback is usually executed as the last statement, but it does not have to be that way. So, do not misunderstand callback to be some fancy equivalent or replacement of return statement within a function. Let’s take that with another example.


var double = function(n) {
return (n + n);
};
function someCalculation(a) {
// ... some calculations
var ans = (a * a) / double(a);
return ans;
}
// call these 2 functions:
var result = someCalculation(5);
console.log(result);

This is a classic example where each function returns a value that is used in subsequent computation or programing logic. Let’s re-implement the same functions as callback and see the difference.


function someCalculation(a, callback) {
// ... some calculations
var calc = (a * a);
callback(calc);
}
var double = function(n) {
var result = n / (n + n);
console.log(result);
};
// call the function with callback function definition
someCalculation(5, double);

// .. this could also be implemented as:
someCalculation(5, function(n){
var result = n / (n + n);
console.log(result);
});

In this implementation, the function double is passed as an argument directly into the someCalculation function.

The former example makes code modular, while the later example with callbacks makes it functional where the result of a certain function is passed to the subsequent control structure (function). If someCalculation in the function above was an API provided via some library, you as the developer of your code, can pass your function as another parameter to the API function and control the execution of your logic.

When should you use Callback

Javascript provides many Asynchronous APIs. The most common one that is used in developing modern web applications is XHR or AJAX. Other providers such as MongoDB, NodeJS, JQuery, Angular, etc. provide Asynchronous APIs. While the asynchronous APIs allow browsers to build different parts of a page in parallel, a developer often needs to control or work on the results of the APIs. This is where callback comes in very handy. Callback allows developer functions to be passed as parameters to APIs (which, actually most JavaScript APIs expect anyways!) and control the application logic. Let’s take that with a JQuery example.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.”
https://jquery.com


var hidden = false;
$("#divElement").slideDown( "slow", function() {
// your code when animation completes, such as:
$("#divElement).hide(function(){
hidden = true;
}
);
}
);

In this example, the JQuery-provided slideDown function takes callback function that allows execution additional logic. Even the further logic could call additional APIs where further callback functions can be passed.

Conclusion

JavaScript callbacks is a great capability that allows more asynchronous functions / APIs to be used without jeopardizing developers control over the execution logic. There is a lot of material and instruction videos to dive deep into this topic, so the goal of this blog was to introduce this concept without a lot of technical jargons and allowing you to learn by observation from the examples provided.

Please comment or provide feedback if anything obvious was missed or any additional perspective needs to be covered.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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