Understanding Synchronous and Asynchronous Javascript

Understanding Synchronous and Asynchronous Javascript

Hello Everyone,this article is mainly aimed at putting you through understanding asynchronous and synchronous javascript codes and in the later study we'll be using the use of fetching API(promises) to understand how asynchronous codes work.

Pre-requisites

To understand this article well, you must have understanding of basic javascript concepts.

Let's get started

I'll like us to understand what an asynchronous and a synchronous process means.

Synchronous javascript

In basic english meaning, synchronous means for something to exist or occur at the same time. so let's relate this to the javascript world, since we are developers. In Javascript synchronous codes are executed line by line, a basic example is our html file, they are executed one after the other.

EXAMPLE

<script>
    document.write("hello world (first output)"); 
    document.write("<br>");

    document.write("my name is Dotun (second output)") ;
    document.write("<br>");

    document.write("my last sentence (third output)"); 
</script>

RESULT

Screenshot (6).png

If we are to talk about what happened in the result above, the 'hello world(first output) was logged first', then the 'my name is Dotun(second output) was logged second', the third line was 'my last sentence (third output)'. In conclusion we see that the synchronous codes are executed line by line.

Asynchronous Javascript

Let's understand the english term for asynchronous first. It basically means something that is not simultaneous, does not occur at the same time, it is basically the opposite of synchronous. In developers term, asynchronous javascript/code are non-blocking codes i.e they allow the program to be executed where the synchronous code will block further execution of the remaining code until it finishes the current one. This may actually sound confusing, but i am sure you'll have a better understanding after studying the example below.

Let's take a look at how Async Javascript runs:

 <script>
      document.write("hello world");
      document.write("<br>");

      setTimeout(() => {
        document.write("my name is dotun");
      }, 5000);

      document.write("<br>");
      document.write("my last sentence");
      document.write("<br>");
    </script>

i'll strongly recommend you copy this set of code in your editor so you can fully understand the concept of asynchronous javascript. Let's talk about the results below.

RESULT 1

Screenshot (10).png

What happened to the second sentence? why isn't it there?, so what happened there is that the second sentence has an asynchronous function i.e the setTimeout function. it won't pause the execution of the other functions in the code. Other functions will run, while the setTimeout will run after 5 seconds as shown below.

RESULT 2

Screenshot (11).png After 5 seconds this was the result.

Application of synchronous and asynchronous JavaScript

Also, in real life situations incase you are asking "when do i use async javascript or synchronous javascript" OR you are the type that likes to prefer something over the other, my basic answer to you is simple: understanding how synchronous and asynchronous javascript operates is what can make you decide that on your own, but here are tips that can make you understand better.

As i said earlier synchronous javascript executes line by line which is the default way javascript executes. But as for knowing when to apply asynchronous process: Data Fetching - this could include fetching of files from an API, or even getting data from your database or accessing a video stream. These processes might normally take time, so instead of delaying other processes that are not dependent on then that's where the asynchronous application comes in.

Conclusion

I won't want you to think setTimeout is the only asynchronous function as used in the example above, there is a lot of them. In another write up we'll talk about asynchronous javascript with fetching of APIs, just to broaden your mind on asynchronous javascript.