In-depth understanding of JavaScript callback functions

Preface

JavaScript callback functions are an important concept that you must understand to become a successful JavaScript developer. But I am sure that after reading this article, you will be able to overcome all the obstacles you previously faced using callback methods.

Before we get started, let's first make sure our understanding of functions is solid.

Quick Review: JavaScript Functions

What is a function?

A function is a logical building block that has a group of codes inside it to perform a specific task. Functions actually allow writing code in a more organized way for easier debugging and maintenance. Functions also allow code reuse.

You define the function once and call it when needed, instead of writing the same code over and over again.

Declare a function

Now, let's see how to declare a function in javascript.

1. Using the Function’s Constructor: In this method, the function is created with the help of the ‘Function’s’ constructor. Technically, this method is less efficient than declaring functions using the function expression syntax and the function declaration statement syntax.
2. Using a function expression: Generally this approach is the same as variable assignment. In short, the function body is treated as an expression, and that expression is assigned to a variable. Functions defined using this syntax can be named functions or anonymous functions.
   A function without a name is called an anonymous function. An anonymous function is self-invoking, which means it automatically calls itself. This behavior is also called an Immediately Invoked Function Expression (IIFE).
3. Using function declaration: This method is the old school method commonly used in JavaScript. After the keyword "function" you have to specify the name of the function. After that, if the function accepts multiple parameters or arguments, you need to mention them as well. Although this part is completely optional.

Within the function body, the function must return a value to the caller. After encountering a return statement, the function will stop executing. Inside the function, the parameters will act as local variables.

Likewise, variables declared inside a function are local to that function. Local variables are accessible only within that function, so variables with the same name can easily be used in different functions.

Calling a function

In any of the following cases, the previously declared function will be called:

• When an event occurs, for example, the user clicks a button, or the user selects some option from a drop-down list, and so on.
• When the function is called from javascript code.
• This function can be called automatically, which we have already discussed in anonymous function expressions.

The () operator calls the function.

What is a callback function?

According to MDN: A callback function is a function that is passed as a parameter to another function, and then the callback function is called inside the outer function to complete some operation.

Let me explain in human terms, a callback is a function that will be executed immediately after another function has finished executing. A callback function is a function that is passed as an argument to another JavaScript function. This callback function will be executed inside the function passed to it.

Functions are considered first-class objects in JavaScript. By first-class object, we mean a number, function, or variable that can be treated the same as any other entity in the language. As first-class objects, functions can be passed as variables to other functions and can also be returned from other functions.

Functions that can perform this kind of operation are called higher-order functions. The callback function is actually a pattern. The word "pattern" refers to a proven approach to solving common problems in software development. It is best to use callback functions as callback patterns.

Why do we need callbacks?

Client-side JavaScript runs in the browser, and the browser's main process is a single-threaded event loop. If we try to perform a long-running operation in a single-threaded event loop, the process will be blocked. This is technically bad because the process stops processing other events while it waits for the operation to complete.

For example, the alert statement is considered one of the blocking codes in javascript in the browser. If you run the alert, you will not be able to do any interaction in the browser until you close the alert dialog window. To prevent blocking of long running operations, we use callbacks.

Let’s take a deeper look so you understand exactly in which situations callbacks are used.

Function to get and display messages

In the above code snippet, getMessage() function is executed first and then displayMessage() is executed. Both display a message in the browser's console window, and both execute immediately.

In some cases, some code will not execute immediately. For example, if we assume that the getMessage() function performs an API call, it must send a request to the server and wait for a response. What should we do at this time?

How to use callback functions

Rather than telling you the syntax of JavaScript callback functions, I thought it would be better to implement callback functions in the previous example. The modified code snippet is shown in the screenshot below.

Displaying messages with callback functions

In order to use a callback function, we need to perform some kind of task that does not show the result immediately. To simulate this behavior, we use JavaScript's setTimeout() function. The function pauses for two seconds and then displays the message "Hi, there" in the console window.

The "displayed messages" will be displayed in the browser's console window. In this case, first, we need to wait for the getMessage() function. After successfully executing this function, execute the displayMessage() function.

How callbacks work

Let me explain what happened behind the scenes in the previous example.

As you can see from the previous example, in the getMessage() function, we passed two parameters. The first argument is the msg variable, which is displayed in the browser's console window, and the second argument is the callback function.

Now, you might be wondering why we are passing the callback function as a parameter - to implement a callback function, we have to pass a function as a parameter to another function.

After getMessage() has completed its task, we will call the callback function. Later, when the getMessage() function is called, the reference is passed to the displayMessage() function, which is the callback function.

Note that when the getMessage() function is called, we only pass its reference to the displayMessage() function. That’s why you don’t see the function call operator, aka the () symbol, next to it.

Are Javascript callbacks asynchronous?

JavaScript is considered a single-threaded scripting language. Single-threaded means that JavaScript executes one block of code at a time. While JavaScript is busy executing one block, it is not possible for it to move on to the next block.

In other words, we can think of JavaScript code as always blocking in nature. But this blocking nature prevents us from writing code in some cases where we have no way to get the result immediately after performing some specific task.

The tasks I'm talking about include situations where:

• The data is obtained by making API calls to certain endpoints.
• Get some resources (e.g., text files, image files, binary files, etc.) from a remote server by sending network requests.
  

To handle these situations, you have to write asynchronous code, and callback functions are one way to handle these situations. So essentially, callback functions are asynchronous.

Javascript callback hell

Callback hell occurs when multiple asynchronous functions are executed one after another. It is also known as the Pyramid of Doom.

Suppose you want to get a list of all Github users. Then search among users for top contributors to the JavaScript library. Then, you want to get the details of the person named John in Users.

To implement this functionality with the help of callbacks, the code should look like this:

http.get('https://api.github.com/users', function(users) {
  /* Display all users */
  console.log(users);
  http.get('https://api.github.com/repos/javascript/contributors?q=contributions&order=desc', function(contributors) {
  /* Display all top contributors */
    console.log(contributors);
    http.get('https://api.github.com/users/Jhon', function(userData) {
    /* Display user with username 'Jhon' */
      console.log(userData);
    });
  });
});

From the above code snippet, you can see that the code becomes more difficult to understand, maintain, and modify. This is caused by nesting of callback functions.

How to avoid callback hell?

There are several techniques you can use to avoid callback hell, as shown below.

1. Using promises
2. With async-await
3. Using the async.js library
   

Using the Async.js library

Let's talk about how to avoid callback hell using the async.js library.

According to the description on the async.js official website: Async is a tool module that provides direct and powerful functions for using asynchronous JavaScript.

Async.js provides about 70 functions in total. For now, we will discuss only two of them, namely async.waterfall() and async.series().

async.waterfall()

This function is useful when you want to run some tasks one after another and then pass the results from the previous task to the next one. It takes an array of functions "tasks" and a final "callback" function which will be called after all functions in the "tasks" array have completed, or after "callback" has been called with an error object.

var async = require('async');
async.waterfall([
    function(callback) {
      /*  
        Here, the first argument value is null, it indicates that
        the next function will be executed from the array of functions.
        If the value was true or any string then final callback function
        will be executed, other remaining functions in the array 
        will not be executed.
      */
        callback(null, 'one', 'two');
    },
    function(param1, param2, callback) {
        // param1 now equals 'one' and param2 now equals 'two'
        callback(null, 'three');
    },
    function(param1, callback) {
        // param1 now equals 'three'
        callback(null, 'done');
    }
], function (err, result) {
    /*
      This is the final callback function.
      result now equals 'done'
    */
});

async.series()

It is useful when you want to run a function and then need to get the result after all functions have executed successfully. The main difference between async.waterfall() and async.series() is that async.series() does not pass data from one function to another.

async.series([
    function(callback) {
        // do some stuff ...
        callback(null, 'one');
    },
    function(callback) {
        // do some more stuff ...
        callback(null, 'two');
    }
],
// optional callback
function(err, results) {
    // results is now equal to ['one', 'two']
});

Javascript Callbacks and Closures

Closures

In technical terms, a closure is a grouping of functions bundled together that references its surrounding state.

In short, closures allow access to the outer function's scope from the inner function.

To use closures, we need to define a function inside another function. We then need to return or pass it to another function.

Callbacks

Conceptually, callbacks are similar to closures. A callback is basically using a function as another function.

Final Words

Hopefully, this article clears all your doubts regarding javascript callback functions. If you found this article helpful, please share it with others.

This is the end of this article about JavaScript callback functions. For more relevant JavaScript callback function content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!