Getting into synchronous and asynchronous JavaScript with callbacks and promises

When we talk about JavaScript we can have many definitions for it. The simple definition is, it is a programming language that can be used for both server side and client-side operations. If we talk more about the JavaScript it is a single threaded language. Single threaded in the sense like we can just process one task at a time. Mainly we use JavaScript in web applications, but we can also use JavaScript in other software’s as well. There are so many advantages we can get using this language, among them given below are some advantages we can mention.

· Simplicity

· Interoperability

· Extended functionalities

· Speed

· Versatility

Synchronous JavaScript

As we already know JavaScript execute one task at a time it doesn’t block the process of execution. So, when we have some lines of codes, it will go through one by one and execute the functionality of them. For an example if we have two processors, the second one will be waited until the response from the first one.

As you can see in the above lines of codes, JavaScript will call them in the order of them and deliver the output. First console.log process will be executed first and it will log the console as “Process1”. Then it will call the “Process2” function and console log the “Process2” statement. Finally, the third console.log will execute and log the console as “Process3”. So, the output will be something like the given below output.

Asynchronous JavaScript

The simple idea of asynchronous JavaScript is that, the order of the output will not depend on the order of lines in the code snippet. So, it will give us the permission to execute the processors parallelly. As a result of that if we have a main execution process happening behind, it will not be blocked. Although the above example doesn’t depict some kind of a time-consuming process other than just a simple console.log, in a scenario like we have to deal with timeouts or request like HTTP, these tasks will take some time to complete the whole execution comparing to the other processors.

In this kind of situation asynchronistic comes to the action and it will not block the other processors while in the time-consuming process. Instead of that it will skip that process and continue with the other processors or the tasks.

If we change the above code snippet, to have a timeout in order to delay the execution, the output will be different comparing to the previous example.

In this scenario after the execution of the first console.log it will print “Procss1”. Then although we are calling the process2, it will log the console as “Process3” and after that it will console log the statement “Process2”. So the output will be something like given below.

The reason for this can be understand if understand how JavaScript actually works. To understand how JavaScript works we need to understand the JavaScript runtime and its main concepts like,

· Memory Heap — dynamic memory allocation for variables and other functions

· Call stack — helps to keep track what and where we are running in the code

· WebAPI — place where we keep the asynchronous functions and use them

· Callback queue — when webAPI or HTTP request complete their process they will be sent to the call back

Event Loop — Where we keeps the track of the call stack and callback queue. Once the call stack is empty it will check the callback queue to continue the process.

Callback functions

In JavaScript we can pass functions as an argument for another function. Callback function is a function that we are going to pass another function as an argument. One of the simple examples is given below to understand the callback functions. As the advantages of using callbacks we can mention that,

More readability, more maintainability of the implementation and also it helps to have a more organized abstraction through out the code itself.

Promises

Gives us the ending result of a asynchronous operation with its states. These are mainly focus on the asynchronous operations and it will be focusing on the processed result of the operation.

States of a promise,

· Fulfilled — when the actions is success

· Rejected — when the action is fail

· Pending — the promise is not being rejected or fulfilled

· Settled — promise is being fulfilled or rejected

Benefits of promises,

· Better error handling

· Manageable when we have multiple callbacks

Improve the code organizing