Callback function in JavaScript

Callback function in JavaScript is a function that is passed as an argument to another function. Callback allows the function to call another function. Let’s understand callback with the example.

// Normal function in JavaScript
function printName(name){
    console.log(name);
}

printName("Recursive Minds");

//Output: Recursive Minds

In the above program, a string value is passed as an argument to the printName() function. As we discussed above in JavaScript we can pass a function as an argument to another function. Let’s do it with example

// Example of Callback function

function printName(name, callback){
    console.log(name);
    callback();
}

function fun(){
   console.log("Hii I am callback");
}

printName("Recursive Minds", fun);

/*Output: Recursive Minds
          Hii I am callback */

In above example we are passing callback as an argument to the printName() with string “Recursive Minds”.  Here fun() is callback function.

NOTE: When you use function as ans parameter don't use () parenthesis with it.

Example with setTimeout()

//  program that shows the delay in execution

function printMsg() {
    console.log("Recursive Minds");
}

function print() {
    console.log("Let's Learn together");
}

// calling the function
setTimeout(printMsg, 2000); // 2000 means 2sec delay
print();

// Output
Let's Learn together
Recursive Minds

Why we need callback function?

Callback functions are used to handle asynchronous operations in JavaScript, such as fetching data from a server or waiting for a user’s input.

For example, you might use a callback function to retrieve data from an API and then display the data on a page. Instead of waiting for the data to arrive, the function that retrieves the data can take a callback function as an argument. The callback function will be executed only when the data arrives, allowing you to handle the data as soon as it becomes available.

This approach is useful because it allows you to separate the code that initiates an operation from the code that handles the result. This can make your code more modular, easier to read, and easier to test.

Advantages of using callbacks