JavaScript's Single-Threaded Nature: First Principles

Let me build this up from scratch with code examples.

1. What Does "Single-Threaded" Mean?

First Principle: Your JavaScript code runs on ONE call stack. Only ONE thing executes at a time.

console.log('First');
console.log('Second');
console.log('Third');

// Output:
// First
// Second
// Third

This ALWAYS runs in order. JavaScript can't execute Second and Third simultaneously. It's like a single-lane road - cars must go one at a time.

2. Synchronous = Blocking

First Principle: Each line blocks the next line until it completes.

function slowFunction() {
  // Simulate slow work
  let sum = 0;
  for (let i = 0; i < 3000000000; i++) {
    sum += i;
  }
  return sum;
}

console.log('Start');
slowFunction(); // This BLOCKS everything
console.log('End'); // This waits for slowFunction to finish

Your browser freezes during slowFunction(). You can't click buttons, scroll, or do anything. This is the problem.

3. Web APIs: JavaScript's Helpers

First Principle: The browser provides APIs that run OUTSIDE JavaScript's single thread.

console.log('1. Start');

// setTimeout is a Web API, NOT JavaScript
setTimeout(() => {
  console.log('2. Inside timeout');
}, 2000);

console.log('3. End');

// Output:
// 1. Start
// 3. End
// (2 seconds later)
// 2. Inside timeout

What happened?

• JavaScript calls setTimeout
• The BROWSER takes over the timer (not JavaScript)
• JavaScript continues to line 3 immediately
• After 2 seconds, browser says "hey, run this callback"

4. The Event Loop: The Coordinator