Skip to main content

Synchronous vs Asynchronous

Sync = blocking, Async = non-blocking

Synchronous Code​

"One thing at a time, blocking"

Synchronous code executes line by line, blocking until each operation completes.

"Synchronous code executes sequentially, blocking execution until each operation completes before moving to the next."

Synchronous Example​

Sequential execution

console.log("1");
console.log("2");
console.log("3");
// Output: 1, 2, 3 (in order)

Each line waits for the previous to finish.

"Synchronous code executes in order, with each line waiting for the previous to complete."

Asynchronous Code​

"Non-blocking, continues execution"

Asynchronous code doesn't block execution - it starts an operation and continues while waiting.

"Asynchronous code starts operations and continues execution without waiting, handling results later."

Asynchronous Example​

Non-blocking execution

console.log("1");
setTimeout(() => console.log("2"), 100);
console.log("3");
// Output: 1, 3, 2 (2 comes later)

The setTimeout doesn't block - execution continues.

"Asynchronous operations like setTimeout don't block - the code continues and handles the result later."

Why Asynchronous?​

Performance · User experience

  • Non-blocking: UI stays responsive
  • Efficiency: Can handle multiple operations
  • Better UX: No freezing during I/O

"Asynchronous code keeps the UI responsive and allows handling multiple operations efficiently."

Async Operations​

Network · Timers · File I/O

Common async operations:

  • Network requests: fetch, XMLHttpRequest
  • Timers: setTimeout, setInterval
  • File operations: Reading/writing files
  • Database queries: Async database calls

"Network requests, timers, file I/O, and database queries are typically asynchronous operations."

Callbacks​

Functions called when async completes

setTimeout(() => {
  console.log("Done");
}, 1000);

The arrow function is a callback.

"Callbacks are functions passed to async operations to handle results when they complete."

Promises​

Better async handling

fetch("/api/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

"Promises provide better async handling with then/catch instead of nested callbacks."

Async/Await​

Synchronous-looking async code

async function fetchData() {
  try {
    const response = await fetch("/api/data");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

"Async/await provides cleaner syntax for promises, making async code look synchronous."

Event Loop​

Enables async in single-threaded JS

JavaScript is single-threaded but uses the event loop to handle async operations:

  • Call stack for sync code
  • Callback queue for async callbacks
  • Event loop moves callbacks to stack

"The event loop enables asynchronous behavior in JavaScript's single-threaded environment by managing the call stack and callback queue."

"Synchronous code executes sequentially and blocks until each operation completes. Asynchronous code is non-blocking and continues execution while operations complete. JavaScript uses callbacks, promises, and async/await for async operations. The event loop enables async behavior in single-threaded JavaScript by managing the call stack and callback queue."

🧠 Ultra-Short Cheat Sheet​

Sync = blocking, sequential
Async = non-blocking
Callbacks
Promises
Async/await
Event loop
Network, timers, I/O = async