Async/Await, Promises and Callbacks in Javascript

In this blog post, we will be going through some of the fundamental concepts that javascript relies upon to perform asynchronous operations. While going through this blog post you will get a good grip on the following concepts :

• Callbacks
• Promises
• Async/Await

Here is a sneak peek at what we will be covering in this blog post :

1. What is Asynchronous Javascript
2. Difference between asynchronous and synchronous javascript
3. What are callbacks in javascript?
4. How to use promises in javascript?
5. How does async/await work in javascript

What is Asynchronous Javascript?

If you are building a project then asynchronous javascript will help you to break down a bigger complex task into smaller tasks.

There are three techniques to perform tasks asynchronously: callback, promises and async/await.

Difference between asynchronous and synchronous javascript

In a synchronous system, the tasks are completed one after the other in a specific order. By default, javascript is a synchronous single-threaded programming language. In asynchronous nobody waits for doing their individual tasks. Asynchronous javascript is very similar to having 10 hands for doing 10 tasks.

What are callbacks in javascript?

In Javascript whenever you nest a function inside another function as an argument then it is called a callback. Let us understand it with the help of an example:

Output:

How to use promises in javascript?

Promises in javascript are very similar to promises in real life. Generally, a promise has two outcomes it will either get resolved or get rejected. This is very similar to what happens in javascript . A promise may sound like an if-else statement but it is not the same. In javascript, a promise is used to handle the asynchronous result of an operation. As we all know that javascript is not designed to wait for an asynchronous block of code to completely execute before the other synchronous part of code is running. By using promises we can defer the execution of the code block until an async request is completed.

In general, promises were created to solve the problem of callback hell and to better handle the tasks in a big project. Let us understand it with the help of a simple example

Output

How does async/await work in javascript

With the advent of ES7, we have a new way to add async behavior in javascript and make working with promises easier while using javascript. With the use of async and await keywords, we can create async functions which implicitly return a promise. In simple words, we can say that await is the syntactic sugar of promises in javascript. Let us understand it with the help of a simple example:

Output

Conclusion

• In Javascript whenever you nest a function inside another function as an argument then it is called a callback
• Promises in javascript are very similar to promises in real life. Generally, a promise has two outcomes it will either get resolved or get rejected.
• With the advent of ES7, we have a new way to add async behavior in javascript and make working with promises easier while using javascript.