Callback Function In JavaScript

Callback Function In JavaScript

Understanding and Using Callback Functions in JavaScript: A Beginner's Guide

ยท

3 min read

A callback function is a function that is passed as an argument to another function and is executed after the outer function has been completed.

Why do we use the callback function?

we use the callback function because it allows for the execution of another function after the result of a previous function call has been received.

For example, consider a simple function that takes two arguments, a number and a callback function. The function calculates the square of the number, and then calls the callback function, passing the result as an argument.

// normal function
function square(num, callback) {
  var result = num * num;
  callback(result);
}

// callback function
function iAmCallback(result) {
  console.log(result); // 25
}

// passing function as an argument
square(5, iAmCallback);

In the above example, there are two functions first one is square and the second is iAmCallback The square functions accept two arguments a number and a callback function, it calculates the square of the number and stores it in the result variable after that it calls another function and passes the result as an argument.

next, we have defined another function iAmCallback it accepts one argument and displays it in the console. and at last, we are calling the square function and passing number and iAmCallback function as an argument, here iAmCallback is a callback function that is being passed as an argument to another function that is square once the square finishes its execution it calls the callback function i.e iAmCallback. and the result gets displayed in the console.

Example:

function displayMessage() {
  console.log("How are You?");
}

function sayHello(name) {
  console.log(`Hello ${name}`);
}

setTimeout(displayMessage, 2000);
sayHello("Ankit");

In the above example, we have two function displayMessage and sayHello and later we are calling both the function, but we are delaying the execution of displayMessage function with 2sec using setTimeout. so normally displayMessage should be executed first and then the sayHello should be executed, but here displayMessage is called after 2sec and in this meantime sayHello is executed, so Hello Ankit is displayed first in the console and after that How are You the message is displayed in the console. The sayHello the function does not wait for the displayMessage function to execute, but we can make sayHello to wait for displayMessage to execute using the callback function, let's look at the example below.

 function displayMessage(name, callbackFunction) {
  console.log("How are You?");
  callbackFunction(name);
}

function sayHello(name) {
  console.log(`Hello ${name}`);
}

setTimeout(displayMessage, 2000, "Ankit", sayHello);

Now in the above example the sayHello function waits for the displayMessage function to finish its execution. So the message is displayed first in the console and then the Hello Ankit is displayed in the console.

Conclusion ๐Ÿ™‹โ€โ™€๏ธ๐Ÿ™‹โ€โ™‚๏ธ

Callback functions are also often used in asynchronous programming, where a function is called, and the program continues to execute other code before the function has been completed. The callback function is then called when the function has finished executing, to handle the results.

Here are a few examples where the callback function is used.

  • In JavaScript, callbacks are commonly used in event handling, such as when a button is clicked or a page finishes loading.

  • They can also be used in AJAX (Asynchronous JavaScript and XML) requests to handle the response from the server.

  • In database operations such as MongoDB driver for nodejs uses callback for handling the query results.

Did you find this article valuable?

Support Ankit Kumar by becoming a sponsor. Any amount is appreciated!