Asynchronous vs Synchronous Javascript

Hi Dear readers, on this occasion I will discuss Asynchronous vs Synchronous Javascript, understanding both of them is an important thing that we must know in the world of Javascript. These two things are sometimes often overlooked because the concept of both is difficult to explain. However, don't worry because what is called the learning process starts with understanding slowly and is practiced not in bulk.

Now we will discuss about Synchronous first then Asynchronous.

Synchronous

Actually, when we run javascript by default, the code will be executed line by line. Starting from the top line to the bottom, so the process is sequential, meaning that the next line will be executed when the previous line is finished. Synchronous processes are often called Blocking because they have to wait for each process to finish before the next process can be executed.

Example: HTTP synchronous request

const btn = document.querySelector('button');
   btn.addEventListener('click', () => {
     alert('You clicked me!');

     let pElem = document.createElement('p');
     pElem.textContent = 'This is a newly-added paragraph.';
     document.body.appendChild(pElem);
   });

The example above shows how to create a simple Synchronous. Line 2 sends the request. If we click the button, the alert will appear “You clicked me! "Then proceed to Line 4 to create a Paragraph element with the content" This is a newly added Paragraph ".

Asynchronous

Now what is Asynchronous ?? Even though by default, the process in JavaScript is executed in a blocking or sequential manner, but we can make it asynchronous. So, Asynchronous is the opposite of Synchronous, if we use Asynchronous then Javascript will not wait for the process to finish, but javascript will continue to the next line, without having to wait for the process to finish. This Asynchronous Process is usually called Non-Blocking.

Example: Asynchronous request

function resolveAfter2Seconds() {
   return new Promise(resolve => {
     setTimeout(() => {
        resolve(‘resolved’);
     }, 2000);
   });
 }
 async function asyncCall() {
   const result = await resolveAfter2Seconds();
   console.log(result);
   // expected output: ‘resolved’
     console.log(‘calling’);
 }
 asyncCall();

If we look at the code above it is clear that Asynchronous starts or displays 'calling' first then after 2 seconds it will display the output 'resolved'.

If the asyncCall () function is not asyncronous then the system will wait 2 seconds first, then display 'resolved', then display 'calling'.

Asynchronous vs Synchronous analogy

In order to better understand and understand the two topics, I will give an example of an analogy, for example Synchronous is like a queue for treatment at a hospital, we can be checked by a doctor if we queue before we finish being checked. while asynchronous is like ordering food at a cafe, Budi orders food at 16.00 without waiting for Budi's food to arrive, Roni can order at 16.05, but the results obtained from both of them are as ordered by Budi and Roni.

Thus the article I made, hopefully it will be useful for friends who read it and add insight to friends who read this article. And the authors apologize if there are errors in writing words and sentences that are not clear, and are not understood.

"It's fine to celebrate success, but it is more important to heed the lessons of failure." {Celebrating success is not a problem, but it is much more important to pay attention to the lessons learned from failure}

That is the closing from me and I thank you ...!

reference image: freepik