async/sync in Javascript

Hello everyone. In this article, I would like to talk about async/sync in Javascript. Many beginner sometimes get confused about thoses ideas. I was one of them. Hence, I feel them and I try to explain I would like to explain it clearly.

What are Synchronous and Asynchronous?

Synchronous

• Synchronous processing means that a series of tasks are executed sequentially, and the next task doesn't begin until the previous one is complete. Each task waits for the previous one to finish before it starts.

Asynchronous

• Asynchronous processing means tasks can be executed simultaneously, without waiting for each other to finish.

Synchronous

This is example of Synchronous process

  <script>
    //=== function declaration ==========
    const func = () => {
      console.log("B");
    };

    //  === program start ==========
    console.log("A");
    func(); // function call
    console.log("C");
  </script>

Result

This program executes its tasks sequentially, starting from the top, and the output appears in the console in the order of ABC. This is synchronous processing.

Asynchronous

This is example of Asynchronous process.

  <script>
    //=== function declaration ==========
    const func = () => {
      console.log("B");
    };

    //  === program start ==========
    console.log("A");
    setTimeout(func, 1000); //async function
    console.log("C");
  </script>

Result

In this program, the order of output is different from Synchronous one.The output is appearing in the sequence ACB. This is because that I use the setTimeout, which is asynchronous function.

setTimeout is a JavaScript method used to execute a specified function after a specified amount of time has elapsed. It takes the function to execute and the specified time as arguments.

Hence, As func was not called immediately because of setTimeout, console.log("C"); was executed next, resulting in the output "ACB" in the console. This is asynchronous processing.

Converting Asynchronous Processing to Synchronous Processing

How can we make an asynchronous function run synchronously?

In the earlier example, this means that after outputting "A," we wait for a short time before outputting "B," and finally, "C" is outputted. In other words, we want to wait for the execution of the asynchronous function setTimeout before outputting "C."

something like that

The keywords you've probably heard of for this answer is:

• Promise

Promise is used to execute asynchronous functions as synchronous processes.

These keyword is commonly used in API call processes because, in some cases, the program needs to wait for the result of an API call before proceeding with the next operation.
There are roughly two ways to use promises.
➡How to use Async/Await in Promise.
➡How to use chaining in Promise.

Please refer to the articles for an explanation of how to use those

Summary

• Synchronous processing is a process where one task finishes before the next one begins.
• Asynchronous processing is a process where the next task can proceed without waiting for a time-consuming task to complete, allowing multiple tasks to be executed simultaneously.
• To handle asynchronous functions synchronously, you need to understand Promise.