JavaScript Fundamentals

This 20-hour plan targets the 20% of JavaScript that appears in 80% of interviews: scope/closures, event loop, prototype chain, and modern async patterns. Sessions build a solid mental model first, then reinforce with real code. Skipped: browser DOM APIs, build tooling, framework patterns, Web Workers. These matter in production but not in JS fundamentals interviews. By session 10 you can answer any closure, event loop, or async question confidently and implement utility functions from scratch. How JavaScript Actually Executes JavaScript is a single-threaded, interpreted language with a just-in-time (JIT) compiler. Understanding the execution model is the foundation for everything else — closures, async, the event loop — all make sense once you internalize how JS runs code. The Execution Context Every time JavaScript runs code, it creates an Execution Context. There are two kinds: Global Execution Context (GEC) — created when the script first loads. There is exactly one. Function Execution Context (FEC) — created every time a function is called. Each execution context has two phases: Creation Phase: binding is determined Lexical environment is created (scope chain is established) Variable declarations are hoisted ( → , / → uninitialized TDZ) Execution Phase: Code runs line by line Variables are assigned their values The Call Stack The call stack is a LIFO (last-in, first-out) data structure that tracks which function is currently executing. Stack overflow happens when recursive calls never bottom out — the stack exceeds its memory limit. Memory: Stack vs Heap Stack: stores primitives (numbers, strings, booleans, null, undefined, symbols) and function call frames. Fast, fixed size. Heap: stores objects and functions. Garbage collected. Slower but flexible. Scope Chain When JS looks up a variable, it searches the current scope, then outer scopes, all the way to global. This chain is established lexically — based on where the code is written, not where it runs. Real-World Use Case: Debugging Stack Traces Understanding execution contexts helps you read stack traces: Read bottom-up: React called , which called , which called your component. Line 12 of tried to call on — probably props not yet loaded. Interview Q&A Q: What is the difference between the call stack and the heap? A: The call stack stores execution contexts and primitive values — it's fast, fixed-size, and LIFO. The heap stores objects and functions — it's larger, dynamically allocated, and managed by the garbage collector. When you do , the variable lives on the stack but holds a reference (pointer) to the actual object on the heap. Q: How many global execution contexts can exist? A: Exactly one per JavaScript runtime (per tab in a browser, per worker, per Node.js process). All code shares the same GEC. Q: What does "JavaScript is single-threaded" mean in practice? A: Only one piece of code runs at any given moment. There is no parallel execution on the main thread. This means a long-running synchronous operation (heavy computation, infinite loop) blocks everything — UI updates, event handlers, network responses — until it finishes.