Learn The Full Journey From Callbacks to Async-Await: Tutorial

Before we dig into the topic, let me clear that Javascript is a single-threaded and synchronous language. It provides a technique of handling asynchronous code. There are hardly some languages that could support pure asynchronous behavior. Now, let’s dive into Asynchronicity and Synchronicity behavior.

What the heck is Synchronous behavior!

“We cannot do everything at once, but we can do something at once.”
-Calvin Coolidge

“Synchronicity is not about executing code line by line; perhaps, it’s about the dependency, created due to the outcome of the previous line, on the next line. It’s about whether the next line has to wait for its preceding line to execute or not”

In simple words, synchronous behavior is something that will execute only when the previous line is successfully executed.

Let’s take one example; four people are waiting to get into the van. They all will have to wait for their preceding ones to get inside. Did you get my point? Synchronicity is a complete dependent procedure.

Now getting started with,

Asynchronous Behavior- Completely Independent Procedure.

“A good traveler has no fixed plans.”
-Lao Tzu

Some programs demand to interact with things outside their processor. They require to get data from their respective server, to proceed further. There are a few methods that help to deal with such requirements asynchronously. Moreover, if you’re aware that if a particular code will take time and it can be executed in the background, then you can put those lines of code in an async block. Async itself justifies that it won’t affect other lines of code, perhaps it will execute in its independent way.

For exemplifying this, while doing the household work. One can cook food, simultaneously switch on the washing machine for washing clothes, watch TV. So no job is dependent on another.

Note: Many people say that Javascript is an asynchronous language; from that point of view, they mean that it provides a way to manipulate Javascript for handling asynchronicity.

Now let’s get back to our topic. Here are three ways that synchronous Javascript provides to handle asynchronous tasks:

1. Callback
2. Promise
3. Async/Await

Callback

“Life is a series of changes. What you have is dependent on what you had.”

What are callbacks?

Callbacks are just functions that you want to be executed once the execution of another function is completed. Node.js is also an asynchronous platform, that makes use of callbacks too.

Pretty simple, right!

So, no need to fear such hypes created for callbacks.

Assume two functions – function A and function B. If you want that function A should be executed immediately once the execution of function B has completed, then function A is said to be a callback.

Okay, this was a simple use-case for callbacks. Let’s move to some complicated case.

Since Javascript functions are nothing but just objects, we can pass functions as arguments.

Such a method is implemented in most of every library of Javascript.

So, callback functions can be summarized as those functions which are passed as another function’s argument and are executed in the scope of that particular function.

Okay, that’s plenty of words! Let’s take a simple example and know how to pass a function as an argument.

doSomething(someValue, callback){
	  console.log(`doSomething executed with value = ${someValue}`); 
	  callback();
};

doSomething(6, () => console.log(“A callback!”));
console.log(“doSomething finished”);

OUTPUT

doSomething executed with value = 6
A callback!
doSomething finished

The reference of the callback is passed as an argument and called within the scope of the function doSomething.

So, Callbacks are one of the goodies provided by Javascript for handling asynchronous platform.

People say it Callback Hell!

“You travel and travel, and then you realize that – sometimes there are no escapes!”

That pyramid shape, shown in the above image, is said to be Callback Hell. It occurs when the programmer doesn’t have that much grip over handling such async tasks. It contains a series of callbacks, which are nested, and thus decrease the readability of the code.

Promises

“Promises are either kept or broken.
Promises are either resolved or rejected.”

ES2015 (ES6) introduced Promises as an escape made from Callback Hell.

A promise object depicts a value that is not available yet, but you’ll be getting its resolved value or a reason for not determining that promise soon.

It provides a more straightforward way(as compared to callbacks) of writing asynchronous code synchronously.

Promises have two parts – Creation and Handling of Promises.

We won’t be diving into the Creation of Promises. Instead, we will figure out how does a promise is being handled.

A promise can be one of the below states:

• Pending – operation is neither fulfilled nor rejected.
• Fulfilled – operation is successfully done.
• Rejected – operation is failed.

A pending promise is said to be either a fulfilled promise with some value or a rejected promise with some error. One can attest callbacks for the result returned from the pending promise.

Let’s take an example.

const promiseTest = new Promise((resolve) => {
		() => setTimeout(resolve(), 5000);
});

Promise accepts two arguments – resolve and reject. In the above code, resolve is the function used when Promise is fulfilled. In the same manner, we can use reject when the Promise is rejected.

const promiseTest = new Promise(function(resolve, reject) {
  resolve(“Hey there!”);
});

promiseTest.then(function(data) {
    console.log(data);
});

OUTPUT

Hey there!

We have to use .then for withdrawing data from a Promise.

let one = str => new Promise((resolve, reject) => resolve(str));

let two = (oneStr, str) => new Promise((resolve, reject) =>   resolve(oneStr + str));

let three = (twoStr, str) => new Promise((resolve, reject) =>  resolve(twoStr + str));

one('one ').then(res1 => {
  two(res1, 'two ').then(res2 => {
    three(res2, 'three').then(res3 => {
			console.log('done==', res3);
		})
  	})
})

OUTPUT

DONE === one two three

ASYNC/AWAIT

“Beauty lies in simplicity! So, keep it simple.”

Being an asynchronous language, JavaScript as full stack development services has provided such approaches for doing an asynchronous task. So far, we have gone through two methods, now let’s discuss the last one.

Async-await provides the simplest way (compared to both – Callbacks and Promises) for executing asynchronous code by writing it synchronously. It gives a fancier way over Promises. A keyword async is used while declaring a function, which makes it asynchronous.

async function doSomeAsyncStuff() { ...code }

Further, you can pause another code until your function (which has async keyword) is being executed. For that, you have to use await in front of that another code.The mandatory thing which should be taken care of while using await is that one has to use it inside an async block.

await returns all that which is being returned by its async function after its execution.

Let’s take the code used above in the Promise section

let one = str => new Promise((resolve, reject) => resolve(str));
let two = (oneStr, str) => new Promise((resolve, reject) => resolve(oneStr + str));
let three = (twoStr, str) => new Promise((resolve, reject) => resolve(twoStr + str));


callAwait = async () => {
	res1 = await one('one ');
	res2 = await two(res1, 'two ');
	res3 = await three(res2, 'three');
	console.log('DONE ==', res3);  
}
callAwait();

OUTPUT

DONE === one two three

See you can observe the readability difference between both approaches i.e – Async/Await and Promises.

I hope the blog was helpful to you.

Happy reading and happy coding!