Callbacks vs. Promises vs. Async Await: A Step by Step Guide

And a bit under the hood.

I found this confusing and thought you might, too, like callbacks vs promises vs async, what to use? what is it even? how does each one work? how does it work under the hood? that’s what I want to explain in this post once for all.

Callbacks

If we should be 100% correct what a callback is, then a callback is a function we pass into another function that accepts another function as an argument. And that function we pass in can be invoked at any time in the future by the function we pass it into. It is then called a higher order function , which accepts a function as an argument.

This is a callback:

function someFunctionAcceptingCallback(number, callback){
return callback(number + 10)
}
function divide(answer) {
return answer / 2
}
someFunctionAcceptingCallback(5, divide) // 7.5 if we console.log it

Another good example is a addEventListener in javascript.

document.getElementById('addUser').addEventListener('click', function() {// Do something})

So what happening here is that the addEventListener allows us to wait with the execution until a particular moment later on, in this case when the addUser button gets clicked, then only then our callback function gets executed. This is an asynchronous event.

But how does it even work?.. Javascript is single-threaded meaning it can’t execute multiple codes at the same time, javascript has a call stack which runs 1 task at a time from top to bottom.

So when we add our addEventListener , we don’t really call a javascript natively method, we call a method in the WEB API. And the WEB API we can visualise as another thread basically.

So the WEB API addEventListener is a DOM event, it waits for our button to be clicked, then when it gets clicked, it takes our callback function we passed as an argument, and push it to something called the task queue/callback queue , and then something called the event loop picks the callback function up and push it to the call stack and it gets executed, but only when the callback function is the first…