Suggest an editImprove this articleRefine the answer for “Synchronous vs asynchronous code”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Synchronous code runs strictly in order and blocks the thread: the next line does not start until the previous one has finished. Asynchronous code does not block: JavaScript hands a long operation (a timer, a network request, I/O) to an external API of the environment, keeps executing the rest of the code, and the callback with the result lands in a task queue and fires later, once the call stack is free.** ```javascript console.log('1'); setTimeout(() => console.log('2'), 1000); // runs later console.log('3'); // output: 1, 3, 2 ``` **Key point:** JavaScript has a single thread, but thanks to the event loop long operations do not block the program.Shown above the full answer for quick recall.Answer (EN)Image**Synchronous code** runs strictly in order: the next operation does not start until the previous one has finished. **Asynchronous code** lets the program keep going without waiting for long operations such as network requests or timers. ## Theory ### TL;DR - Synchronous means "in order and blocking": every line waits for the previous one. - Asynchronous means "non blocking": a long operation is handed to an external API and the code moves on. - JavaScript has a single thread, but thanks to the event loop it works asynchronously. - The finished result goes into a task queue and runs once the call stack is free. - Asynchrony is implemented with callbacks, Promises, async/await and event listeners. ### Quick example ```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, as soon as the call stack is free. ### Synchronous execution ```javascript console.log('1'); console.log('2'); console.log('3'); ``` Output: ```javascript 1 2 3 ``` Everything runs line by line: the next statement does not start until the previous one is done. That is synchronous execution. Schematically: ```javascript [ Task 1 ] -> [ Task 2 ] -> [ Task 3 ] ``` While one operation runs, the others wait. ### How it works under the hood JavaScript has a single thread of execution, but thanks to the **event loop** it can work asynchronously and without blocking. - Long operations (for example `fetch`, `setTimeout`, I/O) are handed to the external APIs of the environment (the browser or Node.js). - JavaScript keeps executing the rest of the code. - When the operation completes, the result is returned to the callback queue and runs later. Schematically: ```javascript [ Task 1 (asynchronous) ] -> [ Task 2 ] | (the result comes back later) ``` ### Real world examples | Situation | Synchronous code | Asynchronous code | | --- | --- | --- | | Reading a file | JavaScript waits until the file is fully read | JavaScript hands the job to the API and keeps working | | Server request | The code "freezes" until the response arrives | The code moves on, the response is handled later | | A loop with a million iterations | "Freezes" the interface | Runs in the background (via a Web Worker or asynchronously) | ### How asynchrony is implemented | Mechanism | Example | | --- | --- | | **Callbacks** | `setTimeout(() => {...}, 1000)` | | **Promises** | `fetch('/data').then(...)` | | **async / await** | `const data = await fetch('/data')` | | **Event listeners** | `button.addEventListener('click', ...)` | A real asynchronous example with `fetch`: ```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 comes back to the callback when the data is ready. ### Summary | Difference | **Synchronous code** | **Asynchronous code** | | --- | --- | --- | | Execution | Sequential, blocking | Event driven, non blocking | | Delays | Block the program | Do not get in the way | | Used for | Simple and short operations | Requests, timers, files, APIs | | Example | `console.log()` | `setTimeout()`, `fetch()` | | Mechanism | Call stack | Event loop and task queues | ### Common mistakes - Believing asynchronous code runs "in parallel" on a separate thread. JavaScript has one thread; parallelism comes from the environment, not from the engine. - Expecting `setTimeout(fn, 0)` to run `fn` immediately: the callback still waits for the call stack to clear. - Assigning the result of `.then()` to an outer variable and reading it on the next line: it is still `undefined` there. - Putting a heavy synchronous loop next to asynchronous code: it blocks the event loop, so timers and network responses stall. - Confusing `await` with blocking the whole program: `await` suspends only the current async function, not the thread.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.