What Is JavaScript Callback And How Does It Work?
Photo: Google

What Is JavaScript Callback And How Does It Work?

In this blog, we will learn about what is JavaScript callback and how does it work. I will provide some examples of JavaScript callback functions as well.

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

Reference

developer.mozilla.org

Adesh

Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu
%d bloggers like this: