async/sync in Javascript　
Tags: webdev, javascript, beginners
Published: 2024-05-23 20:56:31

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?

<u>Synchronous </u>

- 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.

<u>Asynchronous </u>

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

## Synchronous 

This is example of Synchronous  process
```JavaScript
  <script>
    //=== function declaration ==========
    const func = () => {
      console.log("B");
    };

    //  === program start ==========
    console.log("A");
    func(); // function call
    console.log("C");
  </script>
```
**Result**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fptxmllrzkaqyfra5fnc.png)

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.

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

    //  === program start ==========
    console.log("A");
    setTimeout(func, 1000); //async function
    console.log("C");
  </script>
```
**Result**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqzb4emdc8dfjj5v8g8s.png)

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 <u>setTimeout</u>, 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 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byhhoukxiyl9amkhhr2j.gif)




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

- Promise

<u>Promise is used to execute asynchronous functions as synchronous processes.</u>

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.](https://dev.to/makoto0825/how-to-use-asyncawait-in-promise-38hc)
[➡How to use chaining in Promise.](https://dev.to/makoto0825/how-to-use-promise-chaining-in-javascript-391c)

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.