What's a Callback??!

🕔 Fri Sep 02 2022

📞🔙

If you ever came across this sorta function

function add(a, b,callback) {
  callback(a+b);
}

And wondered, what is happening here?! Read further :D Let's take a step back and come back to the above code later!

✨What's 📞🔙?

Assume we have a function B that needs to be called after A!

Normally, we do something like this!

A()
B()

What if the function A() is an HTTP request to the server and B() must be executed after A has its data from the server (A() is an async function since we don't know when we will be receiving the data, what if the response time from the server is delayed or denied, we need to make sure that B is executing after A). Here we can able to use something called "callback".. we are gonna write code in such a way that B() is called back after executing A()...

// passing B function to A function with the intention of calling B
// function after A function performed its action
A(B)

function B() {
 console.log("Hello")
}

// here callback = B
function A(callback) { // function A(B)
 console.log(callback) // prints "B"
 // assume code to request data from the server is here!
 callback(); // B()
}

// output:
// Hello

The above code can also be written as:

A(B)

function B() {
 console.log("Hello")
}

// directly giving B function name in the function!
function A(B) {
  B(); // calling B function!
}

Note: callback is not a keyword, it's just a variable name we use!!

✨ Where callback functions are used??

we use it on addEventListener(event_name,callback), execute the callback function after event_name is triggered!!

appDiv.addEventListener('click',callclick)

function callclick() {

  console.log("CLICKED!!")

}

✨ Can the callback must be a function with the keyword `function`?

Nope, we can use arrow functions or inline functions!!

The above code can be written like this:

appDiv.addEventListener('click',()=> console.log("Clicked!!"))

✨ What if I want to pass an argument to the callback function??

Let's take the first example, we used in the post. We need to display the result of this add() in the function called display()


function add(a, b,callback) {
  callback(a+b);
}

function display(res) {
  console.log("Result is ",res)
}

we are going to call this display function as the callback function (ie) call display func after executing add func.

add(2,3,display)


function add(a, b,callback) { // add(2,3,display)
  callback(a+b); // display(2+3)
}

function display(res) { // display(5)
  console.log("Result is ",res) // Output: Result is 5
}

(or) we can output the result without needing to write a new function for it

// arrow function
add(2,3,(res)=>console.log("Result is",res))
// why this works?? console.log() is the function
add(1,1,console.log)
// alert() is the function
add(2,3,alert)


function add(a, b,callback) { // add(2,3,())
  callback(a+b); // display(2+3)
}

let's spice this up a bit, what if I want to return more than one value!!

function add(a,b,callback) {
  callback(a,b,a+b)
}

// prints -   Result of 2 + 3 = 5
add(2,3,(a,b,res)=>console.log("Result of ",a,"+",b,"=",res))

// pop up displaying 5
add(5,5,alert)

// prints - 2 3 5
add(2,3, console.log)

Why add(5,5,alert) pops up only 5 while console.log prints all three "2 3 5"? it have to do with alert function syntax! the syntax takes in a single argument only so the first "5" will be printed here! :D

✨ What's Callback hell??

Here's one of the awesome blog posts about this topic, you can find it oncallback hell website.

The above code can be found in the github repo

TLDR;

⭐ callback function is called after some other function mostly async but not limited to async ONLY!