Synchronous vs Asynchronous JavaScript
Learn synchronous vs asynchronous JavaScript: blocking vs non-blocking code, the event loop, callbacks, promises and async/await with examples.
Expected Interview Answer
Synchronous JavaScript runs one operation at a time in order, blocking the next line until the current one finishes, while asynchronous JavaScript starts a long-running task and continues executing other code, handling the result later via callbacks, promises, or async/await.
JavaScript runs on a single thread, so synchronous code that takes a long time (like a big loop) freezes the whole page. Asynchronous operations such as network requests, timers, and file reads are handed off to the browser or runtime, which notifies JavaScript when they finish by queueing a callback. The event loop then picks up that callback once the call stack is clear, letting the program stay responsive without true multithreading.
- Keeps the single-threaded UI responsive during slow tasks
- Avoids blocking the main thread on network or disk I/O
- Allows many operations to be in flight at once
- Improves perceived performance and user experience
- Enables clean sequencing with promises and async/await
AI Mentor Explanation
Synchronous play is like a batter who refuses to leave the crease until the previous ball's replay finishes on the big screen, halting the whole match. Asynchronous play is normal cricket: the bowler runs in for the next delivery while the scorers tally the last one separately, so the game keeps moving and results are recorded when ready.
Step-by-Step Explanation
Step 1
Recognise the single thread
JavaScript executes one statement at a time on a single call stack, so long synchronous work blocks everything.
Step 2
Identify blocking operations
Heavy loops or synchronous I/O hold the thread and freeze the UI until they finish.
Step 3
Offload async tasks
Network calls, timers, and file reads are handed to the runtime, which runs them outside the main thread.
Step 4
Queue the callback
When an async task completes, its callback is placed in a task or microtask queue.
Step 5
Event loop resumes
Once the call stack is empty, the event loop pulls the callback and runs it, keeping the app responsive.
What Interviewer Expects
- That JavaScript is single-threaded
- Why synchronous code can block and freeze the UI
- How async work is offloaded and resumed via the event loop
- Familiarity with callbacks, promises, and async/await
- A concrete example contrasting sync and async execution order
Common Mistakes
- Thinking asynchronous code runs on a separate JavaScript thread
- Confusing asynchronous with parallel or multithreaded execution
- Assuming setTimeout with 0ms runs immediately
- Believing async code always finishes before synchronous code
- Forgetting to handle errors and rejected promises in async flows
Best Answer (HR Friendly)
“Synchronous JavaScript does one thing at a time and waits for each step to finish, while asynchronous JavaScript can kick off a slow task, keep working, and deal with the result later. This is how web pages stay responsive while loading data in the background.”
Code Example
// Synchronous: runs top to bottom, blocking
console.log('1: start');
console.log('2: middle');
console.log('3: end');
// Output: 1, 2, 3
// Asynchronous: the timer callback runs later
console.log('A: start');
setTimeout(() => {
console.log('C: async callback');
}, 0);
console.log('B: end');
// Output: A, B, then C (after the stack clears)
// Modern async with async/await
async function loadUser() {
const res = await fetch('/api/user');
const user = await res.json();
return user;
}Follow-up Questions
- Why does setTimeout(fn, 0) not run immediately?
- What is the event loop and how does it schedule callbacks?
- How do promises and async/await improve on callbacks?
- What is the difference between the task queue and the microtask queue?
- Is asynchronous JavaScript the same as multithreading? Why or why not?
MCQ Practice
1. What is the key difference between synchronous and asynchronous code?
Synchronous code blocks until each step completes, while asynchronous code hands off slow tasks and continues, resuming via callbacks.
2. JavaScript handles asynchronous work primarily through which mechanism?
JavaScript is single-threaded; the event loop pulls completed callbacks from queues once the call stack is clear.
3. What does setTimeout(fn, 0) do?
Even with 0ms, the callback is queued and runs only after the current synchronous stack empties.
Flash Cards
What is synchronous JavaScript? — Code that runs one line at a time, blocking the next until the current operation completes.
What is asynchronous JavaScript? — Code that starts a slow task, continues running other code, and handles the result later via callbacks, promises, or async/await.
Is async JavaScript multithreaded? — No. JavaScript is single-threaded; async work is offloaded to the runtime and resumed through the event loop.
Why doesn't setTimeout(fn, 0) run instantly? — Its callback is queued and only runs after the current synchronous call stack is empty.