JavaScript Promises and Callback functions

 Introduction

Most of the time the Promises and callback functions are used to handle I/O operations but there are other also scenarios that can be used. This post mainly focuses on how promises and callback functions are working.

Callback and Promises


JavaScript is asynchronous. But this asynchronous behavior is a problem when we need to do the synchronous operation with data. 

asynchronous behavior of JavaScript

This is an example of a code with an asynchronous operation. The setTimeout method is an asynchronous method. The output of this code is 0 because the value returned before completion of the async part.

Because of this problem promises and callbacks are introduced. 




Promise: This is an object returned from the asynchronous task and there are several inbuild methods to handle the synchronous processes.
Callback: This is the function that passed into the asynchronous block(task) and inside the function, the synchronous task handled after the async task is completed.

Closure: JavaScript closure is a function that returns another function and it is mainly used to encapsulate.

Callback Function

The callback function is a normal JavaScript function that passed as a parameter to another function(getValue()).

callback function example

The callback function executes after 1 second(after the async operation completed). The callback function name can be any name, for demonstration purposes in this example, it is the callback. The output is 10 because the callback function executes the synchronous part in the async operation using the value. This is one way of handling synchronous operations with asynchronous.

Async/Await can't use in callback functions.

Promise

JavaScript promise requires a function as a parameter and it has two main parameters inside the function. They are resolve() and reject().
resolve() : executes if success.
reject() : executes if faliure.

javascript promise example

Output 1 and output 2 are for reject and resolve. The asynchronous operation is inside the promise and according to the requirement reject and resolve methods are used. Most of the time resolve method is used to succeed(next step after success) and the reject method is used in failure(most of the time to handle errors). When the getValue method is called, the "then" keyword(then block) is used because in promises it is used to call the inner function of the promise.

handle errors in the promise

In Output 1, the error is not handled properly, but this error can be handled using a try-catch block. 

Promise changing example

This image is an example of promise changing. If there are multiple operations in the scenario the promise changing is useful to join one function with another function using promises. In the getValue method first(line 32), the getValue method executes, and then the resolve method(line 17) returns the value as a promise to the getNewValue method(line 33). Then the get new value method executes and returns a promise using the resolve(res) method(line 27). After that, the value returned from the promise is getting as val(in line 34) variable and it prints to the console(in line 35).

Async / Await

An async function is a function that has async in front of function declaration because of that these functions always return a promise. The wait keyword is used to call asynchronous methods. This is another way of handling synchronous operations.

Ex:  async function getValue()

When considering the previous example using async/await, the getValue() and getNewValue() both methods return promises. The below code example clearly demonstrates the code.

async/await example

In this code, the sync function is the print() function(line 34). This function first initializes the variable by the getValue() method which returns a promise. In this(line 33) the "await" keyword is used to wait until the function execution is finished. Then the 2nd time(line 34) also the value variable changing to a new promise which returned by the getNewValue() method(which also returns a promise) after execution. After that, the value promise is returned. After that when the "print()" method is called "then" block is used to get the new value from the promise.

References

 ----------------------------------------------------------------------------------------------------------------------------

**If there are any questions, mistakes that I made in this blog, or something that needs to be improved in this blog post please be kind enough to know about that from the following form.