Synchronous vs Asynchronous JavaScript

JavaScript runs on a single thread. Synchronous code runs line by line — each line blocks the next until it completes. A long synchronous operation (fetching a file, computing a large dataset) freezes the browser entirely.

Asynchronous code starts an operation, hands it off to the browser's Web APIs, and moves on. When the operation finishes, a callback is placed in the callback queue. The event loop picks it up and runs it only when the call stack is empty.

console.log('1 - start');

setTimeout(() => {
  console.log('3 - timeout callback');
}, 0);

console.log('2 - end');
// Output: 1, 2, 3 — even with 0ms delay

Why This Matters for the Browser

Network requests, file reads, and timers are all asynchronous. If they were synchronous, the browser UI would freeze until the server responded. Asynchronous JavaScript keeps the UI responsive while waiting for data.

Understanding the event loop explains why callbacks run after synchronous code, why async/await does not literally pause the thread, and why you cannot return async values from synchronous functions.