The Night Shift Cook & the Single-Threaded Kitchen

// sync-kitchen.js — The Blocking Cook

const processOrder = (customer) => {
  console.log(`Processing order for ${customer}`);
  console.log(`Order in progress for ${customer}`);

  // 🚨 Blocking: The cook just STARES at the stove for 3 seconds.
  // JS engine is completely FROZEN. Nothing else can happen.
  const startTime = Date.now();
  while (Date.now() - startTime <= 3000) {
    // Spinning wheels... burning CPU... blocking the ENTIRE thread
  }

  console.log(`✅ Cooking completed for ${customer}`);
};

console.log("Take order for Customer 1");
processOrder("Customer 1");                  // 🧱 ENTIRE JS THREAD BLOCKS HERE
console.log("Take order for Customer 2");   // This runs only after 3 seconds

Take order for Customer 1
Processing order for Customer 1
Order in progress for Customer 1
[ ... 3 second freeze — thread is dead ... ]
✅ Cooking completed for Customer 1
Take order for Customer 2    ← only NOW does this run

0ms         → Take Order 1
0ms–3000ms  → 🧱 processOrder("Customer 1") — THREAD FROZEN
3000ms+     → Take Order 2 (finally)

┌─────────────────┐    ┌──────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Call Stack    │ →  │  Web APIs        │ →  │  Callback Queue  │ →  │   Event Loop    │
│                 │    │  (Browser/Node)  │    │                  │    │                 │
│  processOrder() │    │  setTimeout ⏱️   │    │  () => done      │    │  Monitors stack │
│  main script    │    │  fetch 🌐        │    │                  │    │  If empty→push  │
└─────────────────┘    │  DOM Events 🖱️   │    └──────────────────┘    └─────────────────┘
                       └──────────────────┘

// async-kitchen.js — The Non-Blocking Cook

const processOrder = (customer) => {
  console.log(`Processing order for ${customer}`);
  console.log(`Order in progress for ${customer}`);

  // 🍳 "Put it in the oven" — delegate to browser timer API
  // The cook DOES NOT WAIT here. Thread is FREE immediately.
  setTimeout(() => {
    console.log(`✅ Cooking completed for ${customer}`);
  }, 3000);

  // Execution continues immediately ↓
};

console.log("Take order for Customer 1");
processOrder("Customer 1");           // Registers timer, returns immediately
console.log("Take order for Customer 2");  // Runs WITHOUT waiting for Customer 1's food

Take order for Customer 1
Processing order for Customer 1
Order in progress for Customer 1
Take order for Customer 2            ← runs immediately, no waiting!
[ ...3 seconds pass in the background... ]
✅ Cooking completed for Customer 1  ← callback fires when stack is empty

0ms          → Take Order 1 + Register Timer
~5ms         → Take Order 2 — Thread FREE ✓
0ms–3000ms   → Thread is FREE — browser handles timer in background
3000ms+      → ✅ Callback: Cooking Completed

// callbacks.js — Restaurant Flow with Callbacks

const takeOrder = (customer, callback) => {
  console.log(`Take order for ${customer}`);
  callback(customer);  // "Here's your order ticket, kitchen!"
};

const processOrder = (customer, callback) => {
  console.log(`Processing order for ${customer}`);
  setTimeout(() => {
    console.log(`Cooking completed for ${customer}`);
    callback(customer);  // "Food's ready, waiter — complete the order!"
  }, 3000);
};

const completeOrder = (customer) => {
  console.log(`✅ Complete order for ${customer}`);
};

// Chaining callbacks together to control flow:
takeOrder("Customer 1", (customer) => {
  processOrder(customer, (customer) => {
    completeOrder(customer);  // Nested 2 levels deep — manageable
  });
});

// Now imagine adding: payment → loyalty points → email receipt → SMS → ...
// This becomes "Callback Hell" or the "Pyramid of Doom" 🔺

// promises.js — Meeting Scheduler

const hasMeeting = false;

// A function that RETURNS a promise (preferred pattern)
const meeting = () => {
  return new Promise((resolve, reject) => {
    if (hasMeeting === false) {
      const meetingDetails = {
        name: "Project Meeting",
        place: "Google Meet",
        time: "10:00 AM",
      };
      resolve(meetingDetails);  // ✅ Buzzer goes off — here's your table
    } else {
      reject(new Error("Meeting already scheduled"));  // 🔴 Restaurant is full
    }
  });
};

meeting()
  .then((res) => {
    console.table(res);    // Runs on resolve ✅
  })
  .catch((err) => {
    console.log(err.message); // Runs on reject ❌
  });

// ⚠️ Difference: new Promise(...) executes IMMEDIATELY when created.
// () => new Promise(...) executes only when you call it.
// Always prefer the function-returning pattern for reusability.

// promise-chain.js — Restaurant Flow with Promises

const takeOrder = (customer) => {
  return new Promise((resolve) => {
    console.log(`Take order for ${customer}`);
    resolve(customer);  // Pass customer downstream
  });
};

const processOrder = (customer) => {
  return new Promise((resolve) => {
    console.log(`Processing order for ${customer}`);
    setTimeout(() => {
      console.log(`Cooking completed for ${customer}`);
      resolve(customer);  // ✅ Resolve AFTER the async work is done
    }, 3000);
    // ⚠️ Note: resolve() must be INSIDE setTimeout, not after it.
    // Calling resolve() outside would resolve BEFORE cooking finishes.
  });
};

const completeOrder = (customer) => {
  console.log(`✅ Complete order for ${customer}`);
};

// Clean, readable, FLAT chain — no nesting:
takeOrder("Customer 1")
  .then(processOrder)       // processOrder receives "Customer 1"
  .then(completeOrder)      // completeOrder receives "Customer 1"
  .catch((err) => {
    console.log(err.message); // ONE catch handles errors from ANYWHERE in the chain
  });

// async-await.js — The Gold Standard Pattern

const runRestaurant = async () => {
  try {
    // await pauses THIS function (not the thread) until the Promise settles
    const customer = await takeOrder("Customer 1");
    const cooked   = await processOrder(customer);
    completeOrder(cooked);
  } catch (err) {
    console.log("Something went wrong:", err.message);
  }
};

runRestaurant();
console.log("This runs IMMEDIATELY — runRestaurant is non-blocking");

// misconception.js — This Does NOT Work as Expected

async function test() {
  setTimeout(() => {
    console.log("hello");
  }, 3000);
  // ⚠️ Returns undefined — NOT a Promise wrapping the setTimeout
}

const tt = await test();
// tt is undefined. The await resolved immediately because test()
// returned a Promise that resolved with undefined right away.
// The setTimeout callback still fires 3 seconds later, independent.
// "hello" WILL print — but await didn't wait for it.

// ✅ CORRECT way to await a timer:
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function testCorrect() {
  await delay(3000);         // ✅ NOW we're awaiting a real Promise
  console.log("hello");     // This runs after 3 seconds
}

// parallel.js — Taking 3 Orders Simultaneously

// ❌ SEQUENTIAL — takes 9 seconds total
const r1 = await processOrder("C1"); // wait 3s
const r2 = await processOrder("C2"); // wait another 3s
const r3 = await processOrder("C3"); // wait another 3s

// ✅ CONCURRENT — fires all 3, waits for slowest — ~3 seconds total
const [r1, r2, r3] = await Promise.all([
  processOrder("C1"),  // All 3 start immediately
  processOrder("C2"),
  processOrder("C3"),
]);

// 🚨 If ANY one rejects, Promise.all rejects immediately.
// Use Promise.allSettled() if you want all results regardless of failure.