JavaScript: The Pentecostal Coin
Over the years JavaScript users have been struggling with a callback nesting issue also known as “Callback Hell”. This resulted in code that was hard to maintain and the developers often found themselves lost.
However, with the release of ECMAScript2015 Promises were introduced and allowed us to use the then() method which when chained got rid of the symbolic Pyramid of Doom that occurred almost always when making several asynchronous operations in a row.
Promises can be in one of three states: pending, fulfilled and rejected. A pending promise can either be fulfilled with a value or rejected with a reason.
In order to further simplify the process, ECMAScript2017 introduced asynchronous functions. These are functions that return an AsyncFunction object, they operate using the event loop and return the result using an implicit Promise.
This is so far the cleanest and best way of handling several asynchronous operations, especially considering the fact that we consume more promises and rarely produce any. Instead of consuming promises using the then() method which still makes us use callback functions we can now use async/await. Await is an operator that is used to wait for a Promise and can only be used inside an async function.
// Callback Hell || Pyramid of Doom
something( result => {
somethingElse(result, secondResult => {
somethingThird(secondResult, thirdResult => {
final(thirdResult, endResult => {
console.log(endResult);
}, errorHandlerCallback);
}, errorHandlerCallback);
}, errorHandlerCallback);
}, errorHandlerCallback);The above is a simple example of what Callback Hell looks like.
// Promises then() method
something()
.then(result => {
return somethingElse(result);
})
.then(secondResult => {
return somethingThird(secondResult);
})
.then(thirdResult => {
return final(thirdResult);
})
.then(endResult => {
console.log(endResult);
})
.catch(err => {
console.log(err);
})The above is a simple example of how Promises solve the issue. We use the catch() method in order to handle any errors that may occur in any of the promises.
// Using Async - Await
const result = await something();
const secondResult = await somethingElse(result);
const thirdResult = await somethingThird(secondResult);
const endResult = await final(thirdResult);
console.log(endResult);The above is a simple example of how we would solve the issue using Async/Await. However, in order for this to work it needs to be wrapped inside of an asynchronous function combined with a try/catch statement.
Now that you’ve learned more about handling asynchronous operations you can kick your feet up and relax because maintaining will no longer be nail-biting!
