Callbacks — Synchronous & Asynchronous

If you are a JS developer, you might have noticed it or not — you are using callback(s) all the time. And if you are not a JS developer, then you would be using one for sure :)

So, what the heck is callback function anyway?

As they say, ‘call me back once you are done’ — same goes for JS callback(s), execute them once you are doing the other stuff(upon which this call back is dependent or in case when this callback is nontrivial and should be pushed to be executed later on…).

Callback functions are passed as an argument in the main function, these callbacks are later called in with in the main function:

function CallBackTeaser(callback, param){
callback(param);
}
function consoleMyDetails(person){
if(person){
console.log(`Hi, my name is ${person.name}, i am ${person.job} & super exited about ${person.hobby}`);
}
}
CallBackTeaser(consoleMyDetails, {'name': 'Praveen',
'job':'Developer',
'hobby':'learning new technologies.'
});

(remember, functions in JS are the first class objects — means can also be passed as an argument).

In the above code, consoleMyDetails is a callback method — because it is being passed as an argumen to CallBackTeaser method and is being called from inside the teaser method.

Running this code in console will produce:

Synchronous callback function

This example is of SYNCHRONOUSLY executing the callback function.

Callbacks can also be executed ASYNCHRONOUSLY, which means that the callbacks are put on the task queue to finish the currently executing tasks first & then once the execution stack is empty, event loop will pick the waiting tasks for execution. More details at https://medium.com/@pravngaur/unthreading-asynchronous-js-39fdf57486ec

Code example:

function CallBackTeaser(callback, param){
console.log(`Calling the callback function`);
setTimeout(()=>{callback(param)}, 0);//Calling the function asynchronously, passing the callback function as the first argument
console.log(`callback function completed execution`);
}
function consoleMyDetails(person){
if(person){
console.log(`Hi, my name is ${person.name}, i am ${person.job} & super exited about ${person.hobby}`);
}
}
CallBackTeaser(consoleMyDetails, {'name': 'Praveen',
'job':'Developer',
'hobby':'learning new technologies.'
});

In the asynchronous version, CallBackTeaser uses the setTimeout function to register a callback to be called asynchronously.

Running the above code in console will produce:

Notice that the output of the consoleMyDetails is printed at last, this is because because the asynchronous execution of this callback, delayed it’s execution to the point where the currently executing task is done.

For the better understanding, lets compare the results of the SYNCHRONOUS and ASYNCHRONOUS execution of the callback(s):

As, you can see the difference in the outputs — thing to remember is:

1. Both these examples uses the callbacks.
2. First calls the callback synchronously, while the second uses it asynchronously.

I hope, this will help you understand the callbacks better & in context of using them synchronously & asynchronously.