JS How JavaScript Works (Browser + Engine)

JavaScript runs inside an engine (V8 in Chrome/Node, SpiderMonkey in Firefox). The engine reads your code, converts it to machine instructions, and executes them line-by-line using a call stack and event loop.

Tip: Understanding the engine helps you write faster code and debug errors.

Step 1. Create engine.js and paste:

javascript Run in compiler
function greet(name) {
  console.log("Hello, " + name);
}

greet("World");
console.log("Done!");

Step 2. Run in browser DevTools Console or Node: node engine.js

Hello, World
Done!

• Parser read the function and calls, built an AST.
• Call stack pushed greet("World") → pushed console.log → popped both.
• JIT compiler optimized greet if called many times.
• Event loop checked for async work (none here), finished.
• Entire script ran top-to-bottom in ~1 millisecond.

• Blocking the event loop — long while loops freeze the browser.
• Ignoring async — thinking setTimeout runs immediately.
• Stack overflow — recursive function with no base case crashes V8.
• Memory leaks — forgetting to clear intervals or event listeners.
• Assuming instant execution — network calls take time; engine moves on.

1. Trace the Call Stack — Write three nested functions. Log entry/exit of each. Predict stack snapshots. Hint: Use console.trace().
2. Event Loop Demo — Use setTimeout(fn, 0) and a synchronous loop. Log which runs first. Hint: Stack clears before queue.
3. Stack Overflow — Write a recursive factorial without a base case. Catch the error with try/catch. Hint: if (n <= 1) return 1;.

💡 Think Like a Programmer: The engine is your invisible partner — respect the call stack and event loop, and your code will fly.