What Is JavaScript Callback?
In simple terms, a callback
function is a function passed into another function as an argument which is then invoked inside the outer function to complete some kind of routine or action.
Callbacks
in JavaScript are very common. Most of the time you have used it without knowing they’re called callbacks.
One of the common callback examples is using addEventListener
in your code. For instance, let’s say you want to execute the function callback when the user clicks on the button.
So take a look at this callback example.
|
|
In the above example, we passed a function callback
to another function addEventListener
. When addEventListener
runs, it registers a callback with the click
event.
JavaScript callbacks are very important to understand. Many newcomers to JavaScript found callbacks hard to understand too. Don’t worry. I will explain it in simple terms.
How does JavaScript callback work?
Callbacks works in two different ways - 1) synchronously and 2) asynchronously
JavaScript Synchronous Callback function
In a synchronous way –– code executes one by one as in the same order as it is written. Take a look at a simple example.
|
|
Both functions will execute in the same calling order. Their output is:
|
|
All looks good!
This is the simple use-case of synchronous programming. There is no waiting time and code executed immediately one by one.
JavaScript Asynchronous Callback function
In asynchronous way –– program needs to wait for something to complete.
For example, waiting for server data response, uploading files, etc. are asynchronous operations. These kinds of operations involve some wait time and don’t execute immediately.
In the case of synchronous functions, the program doesn’t wait for operation completion. It will execute immediately with unexpected results.
One of the simple examples of the asynchronous callback is using a setTimeout
function. It takes a function to execute it at a later time.
|
|
JavaScript callback function with examples
Let’s take a look at simple example. Hers, I am going to change the above functions to delay their execution.
Example 1
|
|
Let’s call them again and see what happens.
|
|
Guess what? They are not going to execute by their calling order due to delays in func1. Hence the output will be like below:
|
|
Example 2
|
|
Output:
|
|
In the above example, we have two functions - multiply()
and disp()
. In the multiply()
function call, there are two number parameters with disp
function.
As a result, the multiply()
invokes with parameters 10, 2 and the function disp()
, which is the callback. The multiply() prints the multiplication of two numbers and fires the disp()
function.
Example3
There is a another way to write the above code with anonymous function.
|
|
Output:
|
|
Further Reading
Remove An Item From The Array Using JavaScript Splice()
Add An Item To An Array Using JavaScript Splice()
Array.Prototype.Flat() or ES2019 Array Flat() function