# Callback Function In JavaScript

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.

```javascript
// 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:

```javascript
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.

```javascript
 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.