JavaScript Internals (The "Engine" Knowledge)

Question 1

Microtasks vs. Macrotasks

Answer 1

Definition: The Event Loop prioritizes Microtasks (Promises, queueMicrotask) over Macrotasks (setTimeout, setInterval, I/O).Key Concepts: All microtasks must be cleared before the next macrotask (or render) begins.Evaluator Tip: If an AI recursively calls promises, it can “starve” the event loop, causing the browser to freeze. Senior code uses setTimeout or requestIdleCallback to yield to the main thread for heavy processing.

Question 2

The Call Stack & Heap

Answer 2

Definition: The Stack is where synchronous function calls are stored (LIFO). The Heap is where large objects and closures are stored in memory.Evaluator Tip: Excessive closures in a large list can lead to “Memory Bloat.” Look for ways to move static logic out of the component body to reduce the heap footprint.

Question 3

Event Delegation

Answer 3

Definition: Attaching a single event listener to a parent element to handle events for all its children using “Event Bubbling.”Use Case: A list of 1000 items with click handlers.Evaluator Tip: React handles this under the hood at the root, but understanding it is key to justifying why we don’t manually attach addEventListener in useEffect for list items.

Question 4

The Event Loop: Microtasks

Answer 4

Definition: The mechanism that handles the execution of code. Microtasks (Promises, queueMicrotask) have higher priority than Macrotasks (setTimeout).Evaluator Concept: All microtasks are cleared before the browser paints. If an AI writes a recursive promise chain without a “break,” it will block the UI thread, causing the browser to freeze.Association: Often tested via “What will be logged first?” interview-style snippets.

Question 5

AbortController

Answer 5

Definition: A browser API that allows you to cancel asynchronous operations like fetch requests.Evaluator Concept: Used in useEffect cleanup. If an AI fetches data without an AbortController, it risks “Race Conditions”—where a slower, older request overwrites a newer one.

Question 6

Closure (Lexical Scope)

Answer 6

Definition: A function’s ability to access variables from its outer scope even after that scope has closed.Evaluator Concept: In React, this causes Stale Closures in hooks. If a useEffect doesn’t list a dependency, it “remembers” the value of that variable from the first render only.