Callback in JavaScript
Callback is one of the features of JavaScript that helps with writing modular and flexible code. It helps to manage asynchronous operations and events. In this article, we will understand and implement the concept of callback.
Consider two functions func_1 and func_2. The function func_2 is passed as an argument to the function func_1. The function func_1 during its execution, executes the function func_2.
A callback function is a function (func_2) that is passed as an argument to another (outer) function (func_1). This outer function then executes the callback function to complete a task.
This gives a programmer flexibility regarding what should happen during the code execution. This means a programmer can pass another function, func_3, as an argument.
In the following code snippet, although func_1 is calling func_2 from within, it is not a callback function. It (func_2) is not passed as an argument.
The VIP treatment
Programming languages have a concept of first-class objects. An object is considered a first-class object when it supports the following…
Can be passed as a parameter to a function.
Can be returned from a function.
Can be assigned to a variable
Can be tested for equality
In JavaScript, along with the data types, functions also fulfil the above conditions. They are known as “first-class objects”.
A Practical Example
In this example, we will write a function filterNumbers() that filters out the numbers. This function accepts an array of numbers and a callback function that will implement the filter logic.
Why do we need a callback function?
Callback functions provide several advantages, some of these are…
Customizable behavior
In the above example of function filterNumbers(), it is very easy to customize the behaviour of the function by passing a different function as a callback. It can further be customized by adding the functionality of filtering prime numbers, or the numbers that are multiple of both 3 and 5. With these additional functionalities, the implementation of the function filterNumbers() will not change.
Event Handling
Another area where callbacks are very commonly used is in event-driven programming. For example, a callback can be associated with events like mouse click, mouse hover, key press, form submission, etc. When any of these events occur, the event listener triggers a callback function as and when an event occurs.
Event handling helps in creating an interactive and responsive application that responds to various events and user actions. (We will discuss this topic in more detail in a future article)
Asynchronous Operations
Callbacks are one of the main mechanisms in managing the asynchronous operations. In this case, a callback function is passed as an argument and the asynchronous function invokes this callback function when its operation is complete. A very common example is loading an image from a remote server, and editing and displaying the image on a web page. Editing and display are possible once an image loads. Loading operation is asynchronous and this invokes the editing and display operation, passed as a callback function, once the image loads. Following is an example of an asynchronous operation. (We will discuss this topic in more detail in a future article)
Modular code
Callback functions help in achieving modularity by combining different small and reusable functions to achieve a desired functionality. Extending the above example of filterNumbers() following code snippet shows adding new functionality of filtering prime numbers and numbers multiple of both 3 and 5.
No free lunch
Callbacks too come at a cost. And a few of these points must be kept in mind while using callbacks
Callback hell / Pyramid of Doom
Multiple nesting of callback functions makes the code difficult to read, maintain and manage. This is even more evident with asynchronous functions. The following code snippet gives a glimpse of callback hell.
Readability and Maintainability
Callback-based code is not easy to read and maintain. And this challenge increases further for the developers who are not familiar with asynchronous code. Nested callbacks add to a lot of complexity.
Conclusion
Callback functions are very important for both event handling and asynchronous operations. It offers a lot of flexibility and brings modularity to the code. Yet we should be cautious about the challenges of callback hell, scoping and readability, this approach offers.
About asynchronous code, there are alternatives like Promise and async/await that make readability and maintenance of code easier.
References
