Suggest an edit

Improve this article

Refine the answer for “What is asynchrony in JavaScript?”. 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)

**Asynchrony in JavaScript** is a mechanism that lets you **run tasks without blocking the main thread**.
In other words, JavaScript can **avoid waiting for long operations to finish** (for example, server requests, reading files, or timers),
and instead **keep running the rest of the code**, handling the result **later**, once it is ready.

---

## In short

JavaScript is a **single-threaded** language (it runs code sequentially, one task at a time).
Asynchrony is needed so the page doesn't "freeze" during long operations.

---

## Example without asynchrony (synchronous)

```javascript
console.log('1');
alert('Waiting...'); // Blocks execution
console.log('2');
```

Here, until the user closes the `alert`, the program is **stopped** - this is **synchronous code**.

---

## Example with asynchrony

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

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

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

Output:

```javascript
1
3
2
```

Because `setTimeout` is an asynchronous operation:
it is "queued" and runs **after** the main code, after 1 second.

---

## How this works under the hood

Asynchrony in JS is implemented through the **event loop**.

1. The main code runs **on the call stack**.
2. Asynchronous operations (timers, fetch, events, etc.) are handed off to the **Web API** (the browser's or Node.js's API).
3. When an operation finishes, its callback goes into the **callback queue**.
4. The event loop checks whether the stack is free, and if so, takes a task from the queue and runs it.

So asynchrony is not "parallelism",
it is a task-scheduling mechanism.

---

## Main ways to work with asynchrony

| Approach | Example | Notes |
|---|---|---|
| **Callbacks** | `setTimeout(() => {...}, 1000)` | Old, awkward (callback hell) |
| **Promises** | `fetch(...).then(...)` | More modern, more readable |
| **async / await** | `const data = await fetch(...)` | The most convenient syntax |

---

## Example with Promise

```javascript
fetch('https://api.example.com/user')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));
```

`fetch` returns a **Promise** - a promise
that the result will be obtained **in the future**,
which can be handled with `.then()`.

---

## Example with async / await

```javascript
async function loadUser() {
  try {
    const res = await fetch('https://api.example.com/user');
    const user = await res.json();
    console.log(user);
  } catch (e) {
    console.error(e);
  }
}

loadUser();
```

`await` "pauses" execution inside the function
until the promise settles, but it **does not block the thread**.
Asynchrony is preserved.

---

## Typical asynchronous operations in JS

- `setTimeout`, `setInterval`
- `fetch()` (network requests)
- Working with files in Node.js (`fs.promises`)
- Events (`addEventListener`)
- WebSocket, IndexedDB, Web Workers, and so on

---

## SUMMARY

| Term | What it means |
|---|---|
| **Asynchrony** | Running tasks "in the background" without blocking the main thread |
| **Event loop** | The mechanism that manages the task queue |
| **Callback queue** | The queue of tasks ready to run |
| **Promise** | An object representing the result of an asynchronous operation |
| **async / await** | Convenient syntax for working with promises |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.