Suggest an edit

Improve this article

Refine the answer for “Synchronous VS asynchronous code”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Short answer

| Code type | What it does |
|---|---|
| **Synchronous** | Executes operations **strictly in order**, one after another. The next line does not start until the previous one finishes. |
| **Asynchronous** | Lets a program **keep running** without waiting for long operations (network requests, timers, and so on) to complete. |

---

## Example of synchronous code

```javascript
console.log('1');
console.log('2');
console.log('3');
```

Output:

```javascript
1
2
3
```

Everything runs **line by line**,
the next command does not start until the previous one finishes.
This is **synchronous execution**.

---

## Example of asynchronous code

```javascript
console.log('1');

setTimeout(() => {
  console.log('2'); // runs later
}, 1000);

console.log('3');
```

Output:

```javascript
1
3
2
```

Why?

- `setTimeout` is an **asynchronous** operation: it is scheduled for the future.
- JavaScript does not wait for it to finish - it moves on.
- When the timer fires, the function goes into the **event queue**
and runs later, once the call stack is free.

---

## How it works under the hood

JS has **a single thread**,
but thanks to the **Event Loop**
it can work **asynchronously and without blocking**.

### Synchronously:

- Everything runs in sequence.
- While one operation runs, others **wait**.

### Asynchronously:

- Long operations (for example, `fetch`, `setTimeout`, `I/O`)
are handed off to external APIs.
- JS keeps executing the rest of the code.
- When the operation finishes, the result is returned to the **callback queue**,
and runs later.

---

## Visually

### Synchronous:

```javascript
[ Task 1 ] → [ Task 2 ] → [ Task 3 ]
```

### Asynchronous:

```javascript
[ Task 1 (asynchronous) ] → [ Task 2 ]
        ↓
   (the result will come back later)
```

---

## Real-world examples

| Situation | Synchronous code | Asynchronous code |
|---|---|---|
| Reading a file | JS waits until the file is fully read | JS hands the task to an API and keeps working |
| A server request | The code "freezes" until the response | The code moves on, the response is handled later |
| A loop with a million iterations | "Hangs" the interface | Runs in the background (via a Web Worker or asynchronously) |

---

## Asynchrony in JavaScript is implemented through:

| Mechanism | Example |
|---|---|
| **Callbacks** | `setTimeout(() => {...}, 1000)` |
| **Promises** | `fetch('/data').then(...)` |
| **async / await** | `const data = await fetch('/data')` |
| **Event listeners** | `button.addEventListener('click', ...)` |

---

## Example with fetch (real asynchrony)

```javascript
console.log('Start');

fetch('https://api.example.com/user')
  .then(res => res.json())
  .then(data => console.log('Response received:', data));

console.log('End');
```

Output:

```javascript
Start
End
Response received: {...}
```

While the server is responding, JavaScript **does not wait**,
it moves on and returns to the callback when the data is ready.

---

## SUMMARY

| Difference | **Synchronous code** | **Asynchronous code** |
|---|---|---|
| Execution | Sequential, blocking | Parallel (via events), non-blocking |
| Delays | Block the program | Do not hinder execution |
| Used for | Simple, short operations | Requests, timers, files, APIs |
| Example | `console.log()` | `setTimeout()`, `fetch()` |
| Mechanism | Call stack | Event Loop and task queues |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts537 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.