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.

1
2
3
4
5
6

const btn = document.querySelector(‘button’);
function callback() {
  console.log(‘This is callback function’);
}

btn.addEventListener(‘click’, callback);

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function func1() {
  console.log(‘This is function 1’);
}

function func2() {
 console.log(‘This is function 2’);
}

func1();
func2();

Both functions will execute in the same calling order. Their output is:

1
2

//This is function 1
//This is function 2

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.

1
2

// It will call callback function after 5000 ms.
setTimeout(callback, 5000);

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

function fun1() {
//Delay this function
setTimeout(function(){
  console.log(‘This is function 1’);
}, 1000);
}

function fun2() {
 console.log(‘This is function 2’);
}

Let’s call them again and see what happens.

1
2

func1();
func2();

Guess what? They are not going to execute by their calling order due to delays in func1. Hence the output will be like below:

1
2

//This is function 2
//This is function 1

Example 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function multiply(a, b, callback){
  console.log(`multiply of ${a} & ${b} is ${a*b}`);

  callback();
}

function disp() {
  console.log('I am a callback function');
}

multiply(10,2,disp);

Output:

1
2

multiply of 10 & 2 is 20
I am a callback function

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.

1
2
3
4
5
6
7
8
9

function multiply(a, b, callback){
 console.log(`multiply of ${a} & ${b} is ${a*b}`);

callback();
}

multiply(10, 2, function disp(){ 
 console.log('I am a callback function');
}); 

Output:

1
2

multiply of 10 & 2 is 20
I am a callback function

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

Reference

developer.mozilla.org