Answer:
An Execution Context (EC) is an abstract environment created by the JavaScript engine whenever executable code (Global, Function, or Eval) is evaluated.

Internally (as per the ECMAScript specification), an Execution Context consists of three core components:

• LexicalEnvironment: Resolves identifiers declared with let, const, and function declarations within block scopes. Holds an Environment Record and an outer reference ([[OuterEnv]]).
• VariableEnvironment: Specifically handles variables declared with var and function-scoped declarations.
• ThisBinding: Holds the reference value evaluated dynamically for the this keyword inside that execution frame.

Answer:
Every Execution Context executes in two distinct phases:

1. Creation Phase:
   • The engine compiles the code and scans for declarations.
   • Allocates memory for var variables, initializing them to undefined.
   • Allocates and stores function declarations directly in memory (fully initialized).
   • Allocates memory for let and const, but leaves them uninitialized (creating the Temporal Dead Zone).
   • Establishes the Scope Chain (linking outer lexical environments) and binds this.
2. Execution Phase:
   • The engine executes code line-by-line sequentially.
   • Assigns real runtime values to variables and executes function calls.

Answer:
The Call Stack is a LIFO (Last-In, First-Out) data structure that tracks active execution contexts:

• When script execution starts, the Global Execution Context (GEC) is pushed onto the bottom of the stack.
• Whenever a function is invoked, a new Function Execution Context (FEC) is created and pushed onto the top of the stack.
• When the top function finishes and returns, its execution context is popped off the stack, and control returns to the underlying context.

Stack Overflow (Maximum call stack size exceeded): Occurs when un-terminating recursive calls push frames continuously until the physical memory allocated for the call stack (~10,000–16,000 frames depending on the host) is completely exhausted.

Answer:
The ECMAScript specification divides Environment Records into two main implementations:

• Declarative Environment Record: Directly binds language syntax elements like variables, functions, and classes. Used by functions and block scopes (let, const). Highly optimized in V8 as raw in-memory slots rather than dictionary lookups.
• Object Environment Record: Binds identifiers directly to the properties of a concrete JavaScript object. The Global Execution Context uses an Object Environment Record bound to the global object (window in browsers, globalThis). Variables declared with var in global scope become direct properties of window, whereas let/const reside in the Global Declarative Environment Record and do not pollute window.

Answer:
Tail Call Optimization (TCO) is an ES6 specification feature where if the very last operation of a function is directly returning the invocation of another function:

function factorial(n, acc = 1) {
  if (n <= 1) return acc;
  return factorial(n - 1, n * acc); // Pure tail call
}

Instead of pushing a brand new stack frame onto the Call Stack for the recursive call, the engine reuses the current frame, discarding the parent frame's local variables. This transforms recursive algorithms into $O(1)$ memory stack loops.

Answer:
In modern ES6+ execution context modeling:

• VariableEnvironment: Holds bindings declared with var statements. Its scope is strictly bounded by the enclosing function or global context.
• LexicalEnvironment: Holds block-scoped bindings (let, const, class). When a block statement (e.g., if, for, or {}) executes, a new LexicalEnvironment is created with its outer link pointing to the parent environment, while the VariableEnvironment remains unchanged pointing to the parent function.

Answer:
Every Environment Record has a reference to its outer lexical environment ([[OuterEnv]]), determined entirely at compile-time by where the function is physically written (Lexical Scoping):

1. When code references an identifier foo, the engine checks the currently executing context's Environment Record.
2. If not found, it traverses the [[OuterEnv]] pointer to the parent Environment Record.
3. This traversal continues step-by-step up to the Global Environment Record.
4. If the identifier is missing in the global scope:
   • In non-strict mode: Assigning foo = 10 creates an implicit global variable.
   • In strict mode (or when reading): It throws a ReferenceError: foo is not defined.

Answer:
Direct calls to eval() can introduce dynamic variable bindings into the current execution context at runtime:

function test(str) {
  eval(str); // Could introduce "var x = 10" dynamically!
  console.log(x);
}

Engine De-optimization: V8 optimizes variable access by pre-calculating variable memory offsets within declarative records at compile-time. Because eval() can dynamically mutate the scope chain, the JIT compiler is forced to abandon variable indexing optimizations and fall back to slow, dynamic dictionary hash lookups.

Answer:
* Direct eval(): Invoked directly as eval(...). Executes within the current local lexical execution context, accessing and modifying local variables.
* Indirect eval(): Invoked through a reference or aliased expression (e.g., (0, eval)('...') or const myEval = eval; myEval('...')).

Indirect eval executes strictly within the Global Execution Context, preventing local scope poisoning and allowing V8 to optimize local function variables without de-optimization.

Answer:
The with (obj) { ... } statement injects an Object Environment Record representing obj directly at the head of the scope chain:

• Any variable lookup inside the block first checks properties on obj before searching outer local variables.
• It creates semantic ambiguity: the engine cannot determine at compile-time whether a variable reference will match an object property or a parent lexical binding.
• Because it prevents JIT variable slot optimizations entirely, with is strictly forbidden in ES5+ Strict Mode ('use strict').

Answer:
A Function Execution Context allocates a full new stack frame, instantiating new this bindings, an arguments object, and both a VariableEnvironment and a LexicalEnvironment.

A Block Scope (e.g., inside { let a = 1; }) does not create a new call stack frame. It simply creates an ephemeral Declarative Environment Record that replaces the context's current LexicalEnvironment, leaving the VariableEnvironment, this, and call stack intact.

Answer:
When an inner function is returned from an outer function, the outer function's execution context is popped off the Call Stack.

However, if the inner function references variables from the outer function, V8 allocates those specific variables in a persistent Heap Context object rather than on the stack frame. The inner function retains a reference to this heap context via its internal [[Scopes]] property, keeping the lexical environment alive even after the execution context is destroyed.

Answer:
Enabling 'use strict' alters context evaluation rules:

• this in functions: In non-strict mode, calling a standard function without a context object binds this to the global object (window). In strict mode, this remains undefined.
• Undeclared assignments: Assigning to an undeclared variable throws a ReferenceError instead of creating an implicit global variable.
• Duplicate parameter names: function(a, a) {} throws a compile-time SyntaxError.
• Eval scoping: eval() creates a private sandbox execution context, preventing variables declared inside eval from leaking into the enclosing scope.

Answer:
* Call Stack Memory Overhead: Each call stack frame reserves memory for parameters, return pointers, and local variables. Deep recursion consumes physical thread stack limits.
* Scope Chain Traversal Cost: If a function frequently accesses an identifier located 6 levels up the scope chain, the engine must traverse multiple [[OuterEnv]] links during un-optimized execution phases.
* Retained Closure Retainers: Nested scopes capturing outer variables prevent entire chains of heap contexts from being collected by the garbage collector.

Answer:
* Debugger Statement: Inject debugger; inside the code. When execution hits the line, DevTools pauses and displays the Call Stack panel, showing all active frames, local scopes, closure variables, and the global scope.
* console.trace(): Logs a programmatic snapshot of the entire Call Stack leading up to that execution point without pausing the thread.
* Error Stack Trace: Constructing new Error().stack returns a string representation of active frames (function names, file URLs, and line/column numbers).

Answer:
V8 executes JavaScript code through a multi-tiered compilation pipeline:

1. Parser & Scanner: Converts raw source code into an Abstract Syntax Tree (AST).
2. Ignition (Interpreter): Generates compact, register-based Bytecode from the AST. Code starts executing immediately without waiting for expensive compilation.
3. Sparkplug (Baseline Compiler): A non-optimizing baseline compiler introduced to quickly turn bytecode into native machine code, speeding up cold execution.
4. TurboFan (Optimizing JIT Compiler): While bytecode runs, Ignition collects type feedback metadata (Inline Caching). If a function becomes "hot" (called repeatedly with consistent types), TurboFan compiles it into highly optimized native machine code.
5. De-optimization: If speculative type assumptions fail at runtime, TurboFan bails out and de-optimizes back to Ignition bytecode.

Answer:
In dynamic languages like JavaScript, objects can have properties added, deleted, or re-typed dynamically at runtime. Without optimization, property access would require an expensive hash map lookup every time.

V8's Solution: Hidden Classes (Maps):

• V8 creates an internal, immutable Hidden Class (Map) representing the physical layout and memory offsets of an object's properties.
• When two objects share the exact same properties added in the exact same order, they point to the same Hidden Class pointer.
• Property lookups become direct memory offset reads ($O(1)$) rather than hash lookups.

Answer:
When an object is initialized and properties are appended sequentially:

const p = {};        // Map M0
p.x = 10;            // Transition to Map M1 (offset 0: x)
p.y = 20;            // Transition to Map M2 (offset 0: x, offset 1: y)

V8 forms a Transition Tree connecting M0 -> M1 -> M2.

If another object is created:

const q = {};        // Reuses Map M0
q.x = 5;             // Transitions along known path to M1
q.y = 15;            // Transitions to M2

Both p and q now share Map M2. However, if an object adds properties in reverse order (q.y = 15; q.x = 5;), V8 creates a divergent branch in the transition tree, producing two different hidden classes and degrading optimization.

Answer:
Inline Caching (IC) is an optimization that caches the memory offset of an object's property directly at the call site:

The 3 States:

• Monomorphic (Fastest): The call site encounters objects with only one specific hidden class. The engine bypasses property lookup entirely and reads from the hardcoded memory offset via a single assembly jump.
• Polymorphic: The call site encounters 2 to 4 distinct hidden classes. V8 builds an internal lookup stub checking against those specific maps.
• Megamorphic (Slowest): The call site encounters 5 or more different hidden classes. V8 abandons inline caching and falls back to slow global hash table lookups.

Answer:
TurboFan generates native machine code based on speculative optimization (assuming past types will continue):

function add(a, b) {
  return a + b;
}
// Called 100,000 times with integers -> TurboFan compiles to native CPU ADD instruction
add(5, 10);

// Suddenly invoked with strings:
add("hello", "world");

Because CPU register instructions for integer addition cannot perform string concatenation, the speculative assumption is violated. TurboFan immediately executes a De-optimization (Bailout): it unwinds the native frame, jumps back to the Ignition bytecode interpreter, and marks the function as polymorphic.

Answer:
When you run delete obj.prop;:

• Deleting a property breaks the linear Transition Tree of hidden classes.
• V8 cannot cleanly transition backwards to an earlier map because other objects may rely on it.
• To recover, V8 transitions obj into Slow/Dictionary Mode (Hash Table Mode).
• The object is detached from hidden classes entirely, and all future property reads and writes on that object revert to slow hash table lookups, de-optimizing functions interacting with it.

Answer:
V8 organizes object properties into two physical categories:

• Fast Properties:
  • In-Object Properties: Stored directly in the object's contiguous memory buffer (typically up to ~10 properties). Ultra-fast access.
  • Out-of-Object Properties: Stored in an external array pointed to by the object header when properties exceed in-object capacity.
• Slow (Dictionary) Properties: Used when an object has properties deleted, has hundreds of dynamic keys added, or violates transition trees. Properties are stored in a standalone hash table dictionary, incurring significant CPU lookup overhead.

Answer:
V8 tracks array element types to optimize indexing:

• PACKED Elements: Contiguous arrays where every index contains a value (no gaps). Access is a direct memory pointer index read ($O(1)$).
• HOLEY Elements: Arrays with unallocated gaps (e.g., created via const arr = new Array(5); or arr[100] = 'val';).
  
  The Performance Trap: When reading an index in a HOLEY array, if the index has no value, the engine cannot just return undefined; it must walk up the entire Prototype Chain to verify that Array.prototype or Object.prototype did not define that property.

Once an array becomes HOLEY, it can never be converted back to PACKED.

Answer:
V8 categorizes arrays by contents, moving strictly in a one-way degenerative transition (from specific to generic):

1. PACKED_SMI_ELEMENTS: Small Integers (Fastest, unboxed 31-bit ints).
2. PACKED_DOUBLE_ELEMENTS: Floating point numbers.
3. PACKED_ELEMENTS: Objects, strings, or mixed types.
4. HOLEY_SMI_ELEMENTS
5. HOLEY_DOUBLE_ELEMENTS
6. HOLEY_ELEMENTS (Slowest)

Pushing a floating-point number into an array of integers permanently promotes it from PACKED_SMI to PACKED_DOUBLE. It will never demote back, even if the float is popped out.

Answer:
In JavaScript, all numbers are logically 64-bit IEEE 754 floats. Allocating a heap object for every integer would be disastrous for memory.

V8 Pointer Tagging (SMIs):

• V8 uses the lowest bit of 32/64-bit pointers as a tag:
  • If lowest bit is 0: It is an unboxed SMI (Small Integer). The value is stored directly in the register payload without heap allocation.
  • If lowest bit is 1: It is a Pointer pointing to a boxed object or HeapNumber on the heap.
• Small integers (typically $-2^{31}$ to $2^{31}-1$) require zero heap memory allocations.

Answer:
When a small function is called frequently inside a loop:

function square(x) { return x * x; }

function compute(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += square(arr[i]);
  }
  return sum;
}

TurboFan performs Function Inlining: it physically replaces the call to square(arr[i]) with arr[i] * arr[i] directly inside compute's machine instructions.

This eliminates function call overhead, stack frame allocation, and parameter passing entirely.

Answer:
Escape Analysis determines whether an object instantiated inside a function escapes beyond that function's execution boundary (e.g., returned or passed to another persistent scope):

function getPoint() {
  const point = { x: 10, y: 20 };
  return point.x + point.y;
}

TurboFan proves that point never escapes the function. Instead of allocating the object on the GC heap, it performs Scalar Replacement: it dissolves the object and maps x and y directly into CPU registers, eliminating heap allocation and garbage collection completely.

Answer:
JavaScript strings are immutable. Repeated concatenations could easily waste memory and time. V8 uses advanced string structures:

• ConsString: When concatenating strings (a + b), V8 does not allocate a new contiguous string array; it allocates a tree node containing pointers to a and b ($O(1)$ concatenation). Flattened only when read.
• SlicedString: Slicing a substring (str.slice(0, 10)) allocates a pointer referencing the original string with an offset and length, avoiding character copying.
• ThinString: When a string is internalized into the global symbol table, the original string points to the internalized version.

Answer:
Pass native runtime flags to Node.js during diagnostics:

• --trace-opt: Logs every function compiled and optimized by TurboFan.
• --trace-deopt: Logs when and why functions are de-optimized back to Ignition bytecode (pinpointing bailouts and line numbers).
• --trace-ic: Traces Inline Caching state transitions (monomorphic, polymorphic, megamorphic).

node --trace-opt --trace-deopt app.js

Answer:
To maximize TurboFan throughput:

1. Initialize all properties in constructors: Always add properties in the exact same sequence to maintain consistent hidden classes.
2. Avoid modifying object shapes: Never use delete; avoid adding dynamic properties post-instantiation.
3. Write Monomorphic functions: Keep function parameter types consistent (avoid passing ints to a function that previously handled strings).
4. Keep arrays homogeneous and packed: Avoid unallocated gaps (holes) and do not mix data types in arrays.

Answer:
V8 divides its memory heap into several dedicated spaces:

• New Space (Young Generation): Where most objects are initially allocated. Small in size (typically 1–64 MB). Highly ephemeral; collected frequently via the Scavenger algorithm. Divided into To-Space and From-Space.
• Old Pointer Space: Contains long-lived objects that survived New Space scavenges and hold references to other objects.
• Old Data Space: Contains long-lived raw payload data (strings, raw byte buffers) that contain no pointers to other objects.
• Large Object Space: Holds objects exceeding size thresholds (~128 KB). Allocated directly to bypass New Space copying. Never moved or compacted by the GC.
• Code Space: Stores JIT-compiled machine code instructions emitted by TurboFan.

Answer:
New Space is partitioned into two equal semi-spaces: From-Space and To-Space:

1. New allocations land in the active From-Space.
2. When From-Space fills, a Scavenge GC triggers.
3. The engine traces live objects starting from roots. Reachable live objects are copied contiguously into the clean To-Space (compacting memory automatically).
4. Dead objects are left behind in From-Space and discarded.
5. The roles of From-Space and To-Space are swapped (pointer swap).

Aging & Promotion: If an object survives two consecutive Scavenge cycles, it is promoted to the Old Space.

Answer:
Full GC cycles in Old Space execute the Mark-Sweep-Compact algorithm:

1. Marking Phase: Traverses the entire object reference graph starting from GC Roots (global objects, DOM trees, active call stack frames). Reachable objects are marked alive in a Marking Bitmap.
2. Sweeping Phase: Iterates across memory pages; unmarked dead objects are added to Free Lists so their memory slots can be re-allocated.
3. Compacting Phase: To cure fragmentation, surviving live objects are physically relocated to contiguous pages, and all pointers referencing those objects are rewritten.

Answer:
Full Stop-The-World (STW) sweeps can take hundreds of milliseconds, freezing user UI frames. V8 minimizes pauses using:

• Incremental Marking: Splits the marking phase into tiny slices (e.g., 2–5ms). The engine alternates between executing user code and marking a subset of the heap. Uses a Write Barrier to track changes made by user code during intervals.
• Concurrent Marking: Dedicated background threads scan and mark the heap concurrently while the main JavaScript execution thread continues executing uninterrupted.
• Concurrent Sweeping: Background threads return free memory slots to free lists without stopping the main thread.
• Idle-Time GC: Hooks into browser frame idle periods (via requestIdleCallback heuristics) to execute collection during idle frame budgets.

Answer:
A memory leak in JavaScript is unintended object retention:

1. Accidental Global Variables: Assigning to undeclared variables in non-strict mode (this.data = ... in global functions) roots objects to window permanently.
2. Forgotten Timers & Callbacks: setInterval(() => { ... }) retains references to all outer lexical variables in its closure until explicitly cleared via clearInterval().
3. Detached DOM Trees: Removing an element from the DOM via element.remove() while a JavaScript variable or array still maintains a reference to that element or any of its child nodes.
4. Unbounded Caches & Event Listeners: Pushing data continuously into standard Map or Array instances without an eviction policy (e.g., LRU) or failing to removeEventListener on component unmount.

Answer:
A Detached DOM Tree occurs when an HTML node is removed from the visible document tree (DOM), but a JavaScript variable, closure, or event listener maintains a reference to it:

const button = document.getElementById('myBtn');
document.body.removeChild(button);
// 'button' variable is still active in memory! The whole element remains in RAM.

Detection in DevTools:

1. Take a Heap Snapshot in Chrome DevTools Memory panel.
2. In the Class filter, search for Detached.
3. Inspect Detached HTMLDivElement or similar nodes. Nodes displayed in yellow are held alive directly by JavaScript references; nodes in red are alive because their parent detached node is referenced.

Answer:
* Shallow Size: The physical memory directly allocated to hold the object itself (its internal structure, type pointers, and primitive fields). It does not include memory consumed by other objects referenced by it (typically 32 to 128 bytes).
* Retained Size: The total amount of memory that would be freed automatically if that specific object were garbage-collected. It includes the object's shallow size plus the sizes of all reachable child objects that have no other root paths keeping them alive.

Answer:
In graph theory, Node A dominates Node B if every path from the GC Root to Node B must pass through Node A.

The Dominator Tree:

• Transforms complex cyclic object graphs into a clean hierarchical tree.
• If Node A is garbage-collected, all nodes it dominates are guaranteed to be collected as well.
• Chrome DevTools uses the Dominator Tree to calculate Retained Size accurately and pinpoint the single "root container" object causing a memory leak.

Answer:
In V8, all closures declared inside the same parent function share the same Lexical Heap Context:

let theThing = null;
function replaceThing() {
  const originalThing = theThing;
  const unused = function () {
    if (originalThing) console.log("hi");
  };
  theThing = {
    longStr: new Array(1000000).join("*"),
    someMethod: function () {} // Shares context with 'unused'!
  };
}
setInterval(replaceThing, 1000);

Because someMethod and unused share the same scope context, and unused references originalThing, theThing can never be collected. Each tick creates a growing linked list of closures holding onto massive strings until out-of-memory occurs.

Answer:
In Chrome DevTools Memory tab, select Allocation instrumentation on timeline:

1. Start recording and perform user actions repeatedly (e.g., opening and closing a modal dialog).
2. The timeline visualizes memory allocations as vertical spikes:
   • Blue vertical bars: Memory allocated that is still retained in RAM.
   • Grey vertical bars: Memory allocated that has been successfully collected by the GC.
3. If repeated modal operations continuously leave tall blue bars that never turn grey after manual GC trigger, you have isolated the action causing a leak.

Answer:
Introduced in ES2021 for advanced memory lifecycles:

• WeakRef: Creates a weak reference to a target object that does not prevent the garbage collector from reclaiming it. Read via weakRef.deref() (returns undefined once collected).
• FinalizationRegistry: Registers a cleanup callback that executes asynchronously after a target object has been collected by the garbage collector:

  const registry = new FinalizationRegistry((heldValue) => {
    console.log(`Cleaned up resource: ${heldValue}`);
  });
  registry.register(targetObject, "someMetadata");

Answer:
* Standard Map: Holds strong references to both keys and values. If an object is used as a key in a standard Map, the object can never be garbage-collected as long as the map is alive.
* WeakMap: Keys must be objects, and the map holds weak references to those keys:

• If all other strong references to a key object are removed, the key and its associated value are automatically garbage-collected.
• Ideal for caching metadata associated with DOM elements or creating truly private class members without risking memory retention.

Answer:
* Increase Memory Limit: By default, Node.js caps heap memory (~2 GB or 4 GB depending on architecture). Raise it via:

node --max-old-space-size=8192 app.js # 8 GB

* Automatic Dump on OOM: Instruct Node.js to automatically write a heap snapshot file before crashing from memory exhaustion:

node --heapsnapshot-near-heap-limit=3 app.js

Load the generated .heapsnapshot file into Chrome DevTools Memory tab to inspect retainers leading up to the crash.

Answer:
In a heap snapshot, the Retainers panel (bottom pane) displays the complete chain of references keeping an object alive:

• Select the leaking object in the Summary view.
• The Retainers pane displays the tree of objects holding pointers to it, leading all the way up to a GC Root (e.g., window, an active closure, or a DOM element).
• Identify the specific reference property (displayed as @id [property_name]) that should have been set to null or unsubscribed to break the retention chain.

Answer:
Running Node.js with --expose-gc and calling global.gc() manually in production is strongly discouraged:

• Forces an immediate, synchronous, blocking Major Stop-The-World (Full GC) pause across both New and Old spaces.
• Disrupts V8's self-tuning adaptive heuristics (which dynamically schedule incremental and concurrent sweeps during optimal low-throughput cycles).
• Prematurely promotes short-lived young objects into Old Space before their natural death, bloating Old Space fragmentation.

Answer:
JavaScript is single-threaded and executes synchronously on the Call Stack. The Event Loop coordinates asynchronous task execution between the Call Stack, Web APIs (or Node.js libuv), and Task Queues:

1. Synchronous code executes on the Call Stack until the stack is completely empty.
2. The Event Loop inspects the Microtask Queue and executes all queued microtasks sequentially until the queue is completely drained.
3. The browser evaluates rendering opportunities (requestAnimationFrame, style recalculation, layout, and paint).
4. The Event Loop dequeues and executes exactly one Macrotask from the Task Queue.
5. The loop returns to step 2, checking for microtasks before processing the next macrotask.

Answer:
* Microtasks: Short, high-priority tasks executed immediately after the currently running script finishes and before control returns to the event loop:

• Sources: Promise.then(), .catch(), .finally(), queueMicrotask(), MutationObserver, and process.nextTick() (Node.js).
• Draining rule: The microtask queue is drained completely in a single loop iteration. If a microtask schedules another microtask, it runs within the same cycle.

* Macrotasks (Tasks): Discrete units of work scheduled from external events:

• Sources: setTimeout, setInterval, setImmediate (Node.js), I/O operations, UI events (clicks, scrolls), and postMessage.
• Processing rule: Only one macrotask is processed per event loop tick before microtasks and rendering are evaluated again.

Answer:

console.log("1");

setTimeout(() => {
  console.log("2");
}, 0);

Promise.resolve().then(() => {
  console.log("3");
}).then(() => {
  console.log("4");
});

queueMicrotask(() => {
  console.log("5");
});

console.log("6");

Output: 1, 6, 3, 5, 4, 2

Execution breakdown:

• Synchronous logs print 1 and 6.
• setTimeout registers a callback in the Macrotask Queue.
• The first Promise.then and queueMicrotask are pushed to the Microtask Queue.
• Call stack clears → Microtask Queue runs: prints 3 (queuing its chained then) and prints 5.
• Chained promise runs before leaving the microtask phase: prints 4.
• Microtasks empty → Event loop picks the first Macrotask: prints 2.

Answer:
Because the Event Loop does not process macrotasks or perform screen rendering until the Microtask Queue is 100% empty:

function infiniteMicrotask() {
  Promise.resolve().then(infiniteMicrotask);
}
infiniteMicrotask();

Every microtask recursively enqueues another microtask. The engine drains the queue indefinitely, preventing the event loop from ever moving to the rendering phase or processing user input (clicks, keyboard input).

The browser tab completely freezes, even though the physical Call Stack never overflows because each callback executes within its own fresh stack frame.

Answer:
requestAnimationFrame is neither a standard microtask nor a macrotask. It is tied directly to the browser's Display Refresh Rate (typically 60Hz or 120Hz):

• rAF callbacks execute right before the browser calculates styles, computes layout, and paints pixels to the screen.
• Executing DOM animations via setTimeout(fn, 16) can fire unpredictably mid-frame or drop frames due to macrotask queue delays.
• requestAnimationFrame guarantees synchronization with the VSync refresh cycle, executing animations cleanly right before rendering.

Answer:
requestIdleCallback(callback, { timeout: 1000 }) runs low-priority background tasks:

• The browser evaluates whether it has remaining spare time inside the current frame budget (e.g., if a 60Hz frame budget of 16.6ms finished rendering in 6ms, there is ~10ms of idle time).
• The callback receives an IdleDeadline object with a timeRemaining() method.
• If the browser remains busy under high load, the callback is deferred until the optional timeout expires, at which point it is queued as an immediate macrotask.

Answer:
According to the HTML5 specification:

When timer calls (setTimeout or setInterval) are nested more than 5 levels deep, browser engines enforce a mandatory minimum clamp delay of 4 milliseconds:

function step(n) {
  if (n >= 10) return;
  setTimeout(() => step(n + 1), 0); // After level 5, throttled to 4ms minimum
}
step(0);

This prevents misbehaved recursive timer loops from completely consuming 100% CPU on client machines.

Answer:
While modern browsers follow the HTML5 specification, the Node.js Event Loop is powered by libuv and operates across six distinct, sequential phases:

1. Timers Phase: Executes callbacks scheduled by setTimeout() and setInterval() whose timers have expired.
2. Pending Callbacks: Executes I/O callbacks deferred from the previous iteration.
3. Idle, Prepare: Internal libuv operations.
4. Poll Phase: Retrieves new I/O events; blocks and waits for incoming connections or data if no timers are ready.
5. Check Phase: Dedicated exclusively to executing setImmediate() callbacks.
6. Close Callbacks: Executes socket or handle cleanup events (e.g., socket.on('close')).

Answer:
process.nextTick() is not technically part of the libuv event loop. It operates on a dedicated nextTickQueue managed directly by the V8 JavaScript layer:

• The nextTickQueue is processed immediately after the currently running JavaScript operation completes, before the event loop advances to any other phase (even before standard Promise microtasks).
• Recursive process.nextTick() calls completely starve libuv I/O phases, preventing files from reading or sockets from accepting data.

Answer:
* When executed in the global context: The execution order is non-deterministic and depends on system process performance:

setTimeout(() => console.log("timeout"), 0);
setImmediate(() => console.log("immediate"));

If the event loop enters the Timers phase faster than the OS timer granularity (often ~1ms), the timer hasn't expired, so setImmediate runs first in the Check phase. Otherwise, setTimeout runs first.

* When executed inside an I/O callback: setImmediate is guaranteed to run first:

fs.readFile("file.txt", () => {
  setTimeout(() => console.log("timeout"), 0);
  setImmediate(() => console.log("immediate")); // Always first
});

Because I/O callbacks run in the Poll phase, the next sequential phase in the libuv loop is always the Check phase (setImmediate), before looping back to Timers.

Answer:
queueMicrotask(fn) is a standardized Web API (and Node.js global) that directly queues a microtask without instantiating a Promise:

queueMicrotask(() => {
  cleanupState();
});

Advantages over Promise.resolve().then(fn):

• Performance: Avoids allocating an unnecessary Promise object instance, reducing garbage collection overhead.
• Exception Handling: Uncaught errors inside queueMicrotask() are dispatched as global unhandled error events rather than unhandled promise rejections.

Answer:
MutationObserver observes DOM mutations asynchronously:

• Unlike legacy MutationEvents (which fired synchronously and degraded DOM performance), MutationObserver queues its record batches as Microtasks.
• When multiple DOM attributes or nodes mutate in a single script, all mutation records are aggregated and dispatched in a single microtask callback before the browser paints to the screen, preventing intermediate layout thrashing.

Answer:
A Long Task is any uninterrupted JavaScript execution frame that occupies the main thread for more than 50 milliseconds:

• Blocks the Event Loop from processing UI inputs, frame updates, and network events.
• Directly degrades Core Web Vitals metrics: INP (Interaction to Next Paint) and TBT (Total Blocking Time).
• Detected in browser telemetry via the PerformanceObserver API listening for longtask entry types.

Answer:
To prevent UI freezing during large data processing loops, break execution into separate event loop ticks:

// Modern approach (Chrome 115+):
async function processLargeArray(items) {
  for (let i = 0; i < items.length; i++) {
    processItem(items[i]);
    if (i % 1000 === 0 && 'scheduler' in window && 'yield' in scheduler) {
      await scheduler.yield(); // Yields main thread to user input & paint
    }
  }
}

// Universal fallback using postMessage or setTimeout:
const yieldThread = () => new Promise(resolve => setTimeout(resolve, 0));

Answer:
When a browser tab is placed in the background or minimized:

• Browser engines enforce aggressive power-saving policies, clamping timer intervals (setTimeout/setInterval) to fire at most once every 1,000 milliseconds (1 second).
• requestAnimationFrame is completely paused for hidden tabs.
• Web Audio and Web Workers continue running without timer clamping, making them suitable workarounds for background intervals (e.g., active stopwatches or heartbeat pingers).

Answer:
A Promise is an object representing the eventual completion or failure of an asynchronous operation. Internally, a Promise maintains:

• [[PromiseState]]: Can be in one of three mutually exclusive states:
  • pending: Initial unfulfilled state.
  • fulfilled: Operation succeeded; holds a [[PromiseResult]] value.
  • rejected: Operation failed; holds a [[PromiseResult]] reason.
• [[PromiseFulfillReactions]]: An internal array of reaction records containing callbacks registered via .then().
• [[PromiseRejectReactions]]: An internal array containing error handlers registered via .catch() or .then(null, onRejected).

State transitions are strictly one-way and immutable: once settled, a Promise can never change state or value again.

Answer:
If resolve(value) receives a standard primitive or plain object, the promise fulfills immediately.

However, if resolve(promiseB) receives another Promise:

• The outer promise does not fulfill immediately with promiseB.
• It adopts the state of promiseB via the Promise Resolution Procedure.
• The engine schedules an internal microtask (a PromiseResolveThenableJob) to extract the settled value of promiseB.
• This introduces a 2-microtask tick delay before the outer promise settles, ensuring asynchronous unwrapping.

Answer:
A Thenable is any object or function that exposes a callable then() method adhering to the Promises/A+ standard:

const customThenable = {
  then(resolve, reject) {
    resolve("custom result");
  }
};

Promise.resolve(customThenable).then(val => console.log(val)); // "custom result"

JavaScript engines use duck-typing: if typeof x.then === 'function', the engine treats x as a promise-like entity, allowing smooth interoperability between native Promises, Bluebird, jQuery Deferred, and custom libraries.

Answer:
async/await is syntactic sugar built on top of Generators and Promises.

When Babel or TypeScript transpiles an async function for older engines, it converts it into a generator wrapped by an execution runner (similar to the co library):

function asyncRunner(generatorFn) {
  return function (...args) {
    const gen = generatorFn.apply(this, args);
    return new Promise((resolve, reject) => {
      function step(key, arg) {
        let result;
        try {
          result = gen[key](arg);
        } catch (err) {
          return reject(err);
        }
        const { value, done } = result;
        if (done) return resolve(value);
        Promise.resolve(value).then(
          val => step("next", val),
          err => step("throw", err)
        );
      }
      step("next");
    });
  };
}

Answer:
* Promise.all(iterable): Fulfills when all promises resolve (returns an array of results). Fails fast: Rejects immediately upon the first promise rejection.
* Promise.allSettled(iterable): Waits for all promises to complete regardless of whether they resolve or reject. Never fails fast. Returns an array of objects: { status: 'fulfilled', value } or { status: 'rejected', reason }.
* Promise.race(iterable): Settles (fulfills or rejects) as soon as the first promise settles.
* Promise.any(iterable): Fulfills as soon as the first promise fulfills (succeeds). Ignores rejections unless every promise rejects, in which case it rejects with an AggregateError.

Answer:
Consider this code:

async function foo() {
  try {
    return await fetchUser(); // Pattern A
  } catch (err) {
    handleError(err);
  }
}

async function bar() {
  try {
    return fetchUser();       // Pattern B (Missing await)
  } catch (err) {
    handleError(err);         // Never triggered!
  }
}

* Inside a try...catch block: return await is mandatory. Without await, bar() returns the pending promise immediately to the caller; if it rejects, the local catch block is bypassed.
* Outside a try...catch: return await p introduces an extra microtask tick to unwrap the promise before returning, which is redundant compared to return p.

Answer:
An Unhandled Promise Rejection occurs when a Promise rejects and no .catch() handler or try...catch block is registered to consume the error during the current turn of the event loop.

Global Tracking:

• In Browsers:

  window.addEventListener("unhandledrejection", (event) => {
    console.error("Reason:", event.reason);
    event.preventDefault(); // Prevents default console error logging
  });

• In Node.js:

  process.on("unhandledRejection", (reason, promise) => {
    console.error("Unhandled Rejection at:", promise, "reason:", reason);
    // In modern Node.js, unhandled rejections terminate the process with exit code 1
  });

Answer:
If an argument passed to Promise.resolve(val) is already a native Promise, it returns that exact same promise instance directly:

const p1 = new Promise(r => r(42));
const p2 = Promise.resolve(p1);

console.log(p1 === p2); // true (Same memory identity!)

It does not allocate a wrapper promise. However, passing a non-native thenable (e.g., from an external library) creates a new native Promise instance that wraps and unwraps the thenable.

Answer:
A common performance bug is using await inside standard loops when tasks are completely independent:

// SLOW (Waterfall / Sequential - takes 3000ms):
for (const id of [1, 2, 3]) {
  await fetchUserData(id); // Pauses loop until each completes!
}

// FAST (Concurrent / Parallel - takes 1000ms):
const promises = [1, 2, 3].map(id => fetchUserData(id));
await Promise.all(promises);

Use sequential loops only when subsequent iterations depend on the data returned by the prior iteration.

Answer:
Executing 10,000 tasks via Promise.all() can exhaust network sockets and crash APIs. A controlled concurrency pool limits in-flight executions:

async function pMap(array, iteratorFn, limit = 5) {
  const results = [];
  const executing = new Set();

  for (const item of array) {
    const p = Promise.resolve().then(() => iteratorFn(item));
    results.push(p);
    executing.add(p);

    const clean = () => executing.delete(p);
    p.then(clean, clean);

    if (executing.size >= limit) {
      await Promise.race(executing); // Wait for any active promise to finish
    }
  }
  return Promise.all(results);
}

Answer:
Historically, exposing a Promise's resolve and reject methods outside the constructor closure required manual boilerplate (the Deferred pattern).

ES2024 Promise.withResolvers():

const { promise, resolve, reject } = Promise.withResolvers();

// resolve and reject can be invoked freely in external callbacks:
button.addEventListener("click", () => resolve("Button Clicked!"));

Eliminates the need for manual scope variables or external wrapper classes.

Answer:
AbortController provides a standardized cancellation signal:

const controller = new AbortController();
const { signal } = controller;

fetch("https://api.example.com/data", { signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name === "AbortError") {
      console.log("Fetch operation aborted safely.");
    }
  });

// Cancel the request at any time:
controller.abort();

// Modern timeout cancellation (Node 17+ / Browsers):
fetch(url, { signal: AbortSignal.timeout(5000) }); // Cancels after 5 seconds

Answer:
Top-Level Await permits using the await keyword at the root level of ES Modules without wrapping code in an async IIFE:

// Inside a module (index.mjs):
const connection = await db.connect();
export { connection };

Module Graph Impact: An ES module with top-level await blocks the execution of child modules importing it until the top-level promise resolves. However, adjacent sibling imports continue loading in parallel.

Answer:
Passing an async callback function directly to the Promise constructor is problematic:

// ANTI-PATTERN:
new Promise(async (resolve, reject) => {
  const data = await fetchItem(); // If this throws an error...
  resolve(data);
});

Why it is dangerous: The Promise constructor executes the executor function synchronously. If an unhandled exception is thrown inside the async executor after an await, it results in an unhandled promise rejection inside the executor wrapper. The outer constructed promise remains stuck in pending state forever.

Answer:
Historically, awaiting asynchronous operations destroyed the physical call stack, making debugging difficult (error stack traces only showed the last callback).

Zero-Cost Async Stack Traces: V8 uses the Promise state machine to reconstruct the logical asynchronous call stack across await boundaries by walking through the chain of pending promise reaction records only when an Error object is constructed.

Because reconstruction occurs only when an error is generated, there is zero performance or memory overhead during normal, successful async executions.

Answer:
Web Workers execute JavaScript code on a completely separate operating system background thread:

• They run in an isolated environment with their own Call Stack, Event Loop, and Memory Heap.
• They do not have access to the DOM, window, document, or parent page elements, eliminating race conditions on UI elements.
• They communicate with the main UI thread exclusively through asynchronous message passing (postMessage and the onmessage event handler).
• Ideal for offloading heavy computational tasks (image processing, audio analysis, cryptography, large dataset sorting) without dropping UI frames.

Answer:
* Dedicated Web Worker (new Worker('worker.js')): Linked exclusively to the single browser tab that created it. Terminated when the tab closes.
* Shared Worker (new SharedWorker('worker.js')): Shared across multiple browser tabs, windows, or iframes from the same origin. Communicates via MessagePort ports. Ideal for syncing state or single WebSocket connections across tabs.
* Service Worker: An event-driven background network proxy. Does not run continuously; terminates when idle. Intercepts network requests (fetch), manages offline caching (Cache API), and handles background push notifications.

Answer:
* Structured Clone Algorithm (Default): Deep-copies the message object payload. If you post a 500 MB ArrayBuffer, the browser allocates another 500 MB in the worker's heap and copies the bytes, consuming double memory and CPU time.
* Transferable Objects (Zero-Copy): Transfers physical memory ownership directly from one context to another:

const buffer = new ArrayBuffer(500 * 1024 * 1024); // 500 MB
worker.postMessage({ data: buffer }, [buffer]);     // Transfer list!

console.log(buffer.byteLength); // 0 (Detached / Neutered!)

The pointer to the memory is handed over instantly ($O(1)$ time). The sending thread's buffer is immediately neutered (detached) and can no longer be accessed.

Answer:
Unlike standard ArrayBuffers (which require cloning or transferring), a SharedArrayBuffer represents a memory block that is mapped simultaneously into the address spaces of both the main thread and worker threads:

• Both threads can read and write to the exact same bytes in real-time without message-passing latency.
• Enables high-performance multi-threaded computing, game engines, and WebAssembly compilation.
• Concurrency Risk: Direct concurrent writes create race conditions, requiring synchronization using the Atomics API.

Answer:
SharedArrayBuffer was disabled by browsers following the discovery of the Spectre CPU hardware vulnerability. High-resolution timers constructed using shared memory loops allowed malicious scripts to read arbitrary memory across browser boundaries.

Re-enabling SharedArrayBuffer: The server must serve the web application with two mandatory Cross-Origin Isolation HTTP response headers:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

This isolates the browsing context into a dedicated process, preventing cross-origin data leaks.

Answer:
Standard operations like arr[0]++ are not atomic; they compile into three CPU instructions: read value, increment value, and write back. If Thread A and Thread B increment simultaneously, writes overwrite each other.

The Atomics object provides static operations guaranteed to complete without interruption:

• Atomics.add(typedArray, index, value): Thread-safe atomic increment.
• Atomics.compareExchange(typedArray, index, expectedVal, newVal): Updates value only if it matches expected value (CAS operation).
• Atomics.load() / Atomics.store(): Thread-safe reads/writes preventing CPU memory re-ordering optimizations.

Answer:
Atomics.wait and Atomics.notify provide low-level thread synchronization similar to condition variables:

• Atomics.wait(typedArray, index, expectedValue, timeout): Suspends the calling thread and puts it to sleep until another thread wakes it up or timeout expires.
• Atomics.notify(typedArray, index, count): Wakes up sleeping threads waiting on that index slot.

Restriction: Atomics.wait() is strictly forbidden on the Main UI Thread in browsers because putting the main thread to sleep freezes the UI and user input completely. It can only be called inside Web Worker threads.

Answer:
Standard <canvas> elements are part of the DOM and cannot be accessed inside Web Workers.

OffscreenCanvas:

// On Main UI Thread:
const canvas = document.getElementById("myCanvas");
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({ canvas: offscreen }, [offscreen]); // Transferred!

// Inside Worker:
self.onmessage = (e) => {
  const canvas = e.data.canvas;
  const ctx = canvas.getContext("2d");
  // Render high-frame-rate 3D/2D graphics entirely in the background thread!
  ctx.fillRect(0, 0, 100, 100);
};

Heavy rendering operations and WebGL shaders run independently of the main UI thread, maintaining 60 FPS UI responsiveness.

Answer:
A MessageChannel creates two connected bidirectional communication ports: port1 and port2:

const channel = new MessageChannel();

// Pass port1 to Worker A, and port2 to Worker B:
workerA.postMessage({ port: channel.port1 }, [channel.port1]);
workerB.postMessage({ port: channel.port2 }, [channel.port2]);

Worker A and Worker B can now communicate directly with each other over the ports without proxying messages through the main UI thread.

Answer:
* Available inside Web Workers: fetch(), WebSocket, IndexedDB, crypto, location (read-only), navigator, setTimeout/setInterval, importScripts(), and ES Module imports (for module workers).
* FORBIDDEN / Unavailable: window, document, DOM manipulation, localStorage, sessionStorage, and direct access to parent page variables.

Answer:
Standard Web Workers load external files via URLs (which can fail due to CORS or CDN bundling constraints).

An Inline Worker is instantiated from a self-contained string using Blob and URL.createObjectURL():

const workerCode = `
  self.onmessage = (e) => {
    self.postMessage("Processed: " + e.data);
  };
`;

const blob = new Blob([workerCode], { type: "application/javascript" });
const worker = new Worker(URL.createObjectURL(blob));

worker.postMessage("Hello");
worker.onmessage = (e) => console.log(e.data);

Answer:
* cluster module (Multi-Process): Spawns separate OS child processes using fork(). Each process has its own isolated memory, separate V8 instance, and separate PID. Communicates via IPC. Designed for horizontal scaling across CPU cores to handle HTTP requests on shared server ports.
* worker_threads module (Multi-Thread): Runs multiple threads within a single process. Threads share the same OS process space, can leverage SharedArrayBuffer, and have lighter memory footprints. Designed for CPU-intensive internal processing tasks.

Answer:
Manual postMessage and onmessage event listeners require complex tracking IDs to pair requests with responses.

Libraries like Comlink utilize JavaScript Proxies (Proxy) to expose background worker functions as if they were local asynchronous methods:

// In Worker:
import * as Comlink from "comlink";
const api = { add(a, b) { return a + b; } };
Comlink.expose(api);

// On Main Thread:
import * as Comlink from "comlink";
const worker = new Worker("worker.js");
const api = Comlink.wrap(worker);
const sum = await api.add(10, 20); // Looks like a local async function call!

Answer:
Web Workers do not automatically clean up when their tasks complete; they remain alive in background memory awaiting future messages:

• From Main Thread: Invoke worker.terminate() to immediately stop the worker thread and free its V8 context.
• From Inside Worker: Invoke self.close() to terminate from within the worker script.
• If an object URL was used to create an inline worker, clean up the object reference using URL.revokeObjectURL(blobUrl).

Answer:
In Chrome DevTools:

• Web Workers do not appear in the main thread's Memory Heap snapshot because workers have an isolated V8 memory heap.
• To profile worker memory, navigate to DevTools → Sources → Threads pane (or open a dedicated DevTools instance for the worker via chrome://inspect).
• Heap snapshots and CPU allocations must be captured independently for the worker target to track background worker memory leaks.

Answer:
A Closure is the combination of a function bundled together with references to its surrounding state (the Lexical Environment). It gives an inner function access to an outer function's scope even after the outer function has finished executing and its stack frame has been popped off the Call Stack.

Internal V8 Implementation:

• Normally, local variables are allocated on the temporary execution Stack Frame.
• During the parse phase, V8 performs Scope Analysis. If an inner function references an outer variable (an upvalue), V8 identifies that the variable escapes the stack.
• Instead of placing the variable on the stack, V8 allocates a dedicated Context object on the Heap.
• The inner function object maintains an internal hidden property [[Scopes]] pointing to this Heap Context, keeping the referenced variables alive as long as the inner function is reachable.

Answer:

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

Output: Prints 3, 3, 3 (not 0, 1, 2).

Why: var is function-scoped (or globally scoped). All three timer callbacks share the exact same single variable binding i. By the time the microtask/timer queue drains after 100ms, the loop has already completed and mutated i to 3.

3 Fixes:

1. Block Scoping (let):

   for (let i = 0; i < 3; i++) { // 'let' creates a brand new binding per iteration
     setTimeout(() => console.log(i), 100);
   }

2. IIFE (Immediately Invoked Function Expression):

   for (var i = 0; i < 3; i++) {
     (function(lockedIndex) {
       setTimeout(() => console.log(lockedIndex), 100);
     })(i);
   }

3. setTimeout Argument Passing:

   for (var i = 0; i < 3; i++) {
     setTimeout(console.log, 100, i); // Third param passes 'i' by value to callback
   }

Answer:
* Lexical (Static) Scoping: Variable resolution depends strictly on where functions and blocks are physically written (authored) in the source code at compile time. JavaScript uses lexical scoping exclusively for identifiers.
* Dynamic Scoping: Variable resolution depends on where and by whom the function is invoked at runtime (the call sequence).

While JavaScript variables follow lexical scope, the this keyword exhibits dynamic behavior based on the execution call site.

Answer:
In V8, all closures declared inside the same parent scope share the exact same Lexical Context heap record:

function outer() {
  const massiveData = new Array(1000000).fill("payload");
  const tinyId = 42;

  function unusedClosure() {
    // Mentions massiveData
    return massiveData;
  }

  return function exportedClosure() {
    // Only needs tinyId, but shares the Heap Context with unusedClosure!
    return tinyId;
  };
}
const runner = outer();

Even though exportedClosure only accesses tinyId, V8 allocates both massiveData and tinyId on the shared parent Heap Context. Because runner holds a live reference to exportedClosure, massiveData cannot be garbage-collected, leading to silent memory leaks.

Answer:
Prior to ES2022 private class fields (#field), closures were the primary mechanism to enforce encapsulation:

const createCounter = () => {
  let count = 0; // Truly private: unreachable from outside

  return {
    increment() { return ++count; },
    decrement() { return --count; },
    getCount()  { return count; }
  };
};

const counter = createCounter();
counter.increment();
console.log(counter.count); // undefined (No direct property access)
console.log(counter.getCount()); // 1

Answer:
When an inner function executes, variable identifier resolution traverses the chain of linked [[OuterEnv]] Environment Records.

* Baseline/Interpreter: Reading a variable defined 5 closure scopes up requires walking 5 memory pointer links ($O(N)$ lookup cost).
* TurboFan Optimization: During JIT optimization, TurboFan maps lexical context locations to fixed constant offsets. However, if code uses eval() or dynamic features, these optimizations are disabled, forcing the engine back to manual chain traversals.

Answer:
Yes, partially. Modern optimizing JavaScript engines perform Dead Variable Elimination:

If an outer variable is declared inside a parent function, but no inner closure references it anywhere in its body, V8 will not retain that variable inside the Heap Context. The unreferenced variable is safely garbage-collected when the parent function exits.

However, if any sibling closure in that scope references the variable, it is retained across all closures sharing that context.

Answer:
A widespread memory leak pattern in Single Page Applications (SPAs):

function setupWidget() {
  const hugeConfig = loadMassiveData();
  const element = document.getElementById("action-btn");

  element.addEventListener("click", function onClick() {
    console.log("Widget Clicked: ", hugeConfig.id);
  });
}

The Problem: The DOM node retains the onClick handler. The onClick closure retains the entire hugeConfig object in its lexical scope. Even if the widget is hidden or unmounted from view, if the DOM node or event listener is not explicitly removed, hugeConfig remains rooted in memory.

Answer:
Currying transforms a function taking multiple arguments $f(a, b, c)$ into a sequence of unary functions $f(a)(b)(c)$:

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return function(...moreArgs) {
      return curried.apply(this, args.concat(moreArgs)); // Closes over 'args'
    };
  };
}

const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6

Each step returns a new function that closes over previously supplied arguments, holding them in its lexical environment until the arity threshold (fn.length) is satisfied.

Answer:
Memoization caches the results of pure function invocations based on arguments:

function memoize(fn) {
  const cache = new Map(); // Private cache closed over by returned function

  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

The cache map resides permanently inside the returned wrapper's closure, isolated from global scope pollution.

Answer:
* Global Scope: Variables accessible everywhere. Declared outside any function or block (or attached to globalThis).
* Function Scope: Boundaries established by functions. Variables declared with var are visible throughout the entire enclosing function, irrespective of nested blocks.
* Block Scope: Boundaries established by curly braces { ... } (e.g., in if, for, while). Variables declared with let and const are isolated strictly within that physical block.

Answer:
Partial Application fixes a specific number of arguments to a function, returning another function that takes the remaining arguments:

function partial(fn, ...fixedArgs) {
  return function(...remainingArgs) {
    return fn(...fixedArgs, ...remainingArgs); // Closes over 'fixedArgs'
  };
}

const multiply = (a, b) => a * b;
const double = partial(multiply, 2);
console.log(double(5)); // 10

Answer:
When a function uses default parameters, ES6 creates an Intermediate Parameter Scope positioned between the outer environment and the function body:

let x = "global";

function test(a = x, b = () => a) {
  let x = "inner";
  console.log(a);    // "global"
  console.log(b());  // "global"
}
test();

The parameter expressions a = x and b = () => a execute inside this parameter scope. They cannot see the body-scoped variable let x = "inner", resolving x to the outer global variable instead.

Answer:
To allow the garbage collector to reclaim objects held by long-lived closures:

• Set the holding reference to null when execution completes:

  let heavyResource = loadResource();
  const handler = () => {
    process(heavyResource);
    heavyResource = null; // Breaks reference; allows GC
  };

• Explicitly unbind and nullify event listener callbacks on component teardown or page transition.

Answer:

const result = (function() {
  let val = 10;
  return {
    get: () => val,
    set: (v) => { val = v; },
    leak: () => { val += 5; return val; }
  };
})();

console.log(result.get());
result.set(50);
console.log(result.leak());
console.log(result.get());

Output: 10, 55, 55

All three returned arrow functions share a closure over the exact same heap-allocated variable val. Mutating val via set(50) immediately affects leak(), which updates it to 55, reflected in subsequent get() calls.

Answer:
Hoisting is a conceptual metaphor describing how JavaScript handles variable and function declarations before executing code.

Physical Reality in Engine: Source code lines are not physically moved to the top of the file.

During the Creation Phase of the Execution Context, the parser scans the AST for declarations:

• Function Declarations: The identifier is registered, and the entire executable function object is created and bound in memory immediately.
• var Declarations: The identifier is registered in the VariableEnvironment and initialized immediately to undefined.
• let & const Declarations: The identifier is registered in the LexicalEnvironment, but remains uninitialized.

Answer:
The Temporal Dead Zone (TDZ) is the temporal duration between the entering of a block scope (where a let or const variable is bound) and the point where its physical declaration line is executed by the engine:

{
  // TDZ for 'value' starts here
  console.log(value); // Throws ReferenceError: Cannot access 'value' before initialization
  let value = 100;    // TDZ ends here
}

Why it was introduced:

• To enforce defensive programming: reading variables before assignment is almost always an accidental bug.
• To ensure const immutability: if const hoisted and initialized to undefined (like var), its value would mutate from undefined to its actual assignment, violating the constant contract.

Answer:
* Function Declaration: Hoisted completely with definition:

sayHi(); // "Hello!" (Executes safely!)
function sayHi() { console.log("Hello!"); }

* Function Expression: Follows standard variable hoisting rules:

sayHello(); // TypeError: sayHello is not a function
var sayHello = function() { console.log("Hello!"); };

var sayHello is hoisted and initialized to undefined. Attempting to invoke undefined() triggers a TypeError. If declared with const, it throws a ReferenceError due to TDZ.

Answer:
Rule: Function declarations take precedence during hoisting over variable declarations:

console.log(typeof myItem); // "function"

var myItem = 10;
function myItem() {}

console.log(typeof myItem); // "number"

During the Creation Phase, function myItem() binds the identifier to the function object. The var myItem declaration is treated as a duplicate and ignored. During the Execution Phase, myItem = 10 overwrites the identifier with the integer value.

Answer:
No. Historically, typeof was safe for undeclared identifiers (returning "undefined").

However, inside a TDZ, typeof throws a fatal runtime exception:

console.log(typeof notDeclared); // "undefined" (Safe)

console.log(typeof myLet);       // ReferenceError: Cannot access 'myLet' before initialization!
let myLet = 5;

The engine knows myLet exists in the lexical record; attempting any access (including typeof) before initialization is an explicit TDZ violation.

Answer:
Yes. Classes are hoisted, but they remain in the Temporal Dead Zone until execution reaches their declaration:

const user = new Person(); // ReferenceError: Cannot access 'Person' before initialization

class Person {
  constructor() { this.name = "Alice"; }
}

Unlike function declarations, invoking or instantiating an ES6 class prior to its declaration statement triggers a ReferenceError.

Answer:
In ES6+ Strict Mode ('use strict'):

• Functions declared inside curly braces { ... } are strictly block-scoped.
• They are hoisted only to the top of that specific block, and cannot be accessed outside the block.

In Non-Strict Mode: For legacy compatibility, browsers implement complex, non-standard rules: the function name is hoisted as undefined to the outer function scope, while its implementation remains block-scoped, leading to confusing runtime anomalies. Always use strict mode or function expressions inside blocks.

Answer:
A switch statement has a single unified block scope across all its case branches:

switch (val) {
  case 1:
    let x = 10;
    break;
  case 2:
    let x = 20; // SyntaxError: Identifier 'x' has already been declared!
    break;
}

Furthermore, jumping to case 2 while let x is declared in case 1 accesses x in its TDZ, triggering a ReferenceError.

Fix: Wrap each case statement inside its own explicit block: case 1: { let x = 10; break; }.

Answer:
Consider this statement:

let x = x; // ReferenceError: Cannot access 'x' before initialization

The right-hand expression x is evaluated before the assignment writes to the variable slot. Because let x has not finished initialization when the right side is being resolved, reading x hits its own TDZ, aborting execution.

Answer:

var a = 1;
function b() {
  a = 10;
  return;
  function a() {}
}
b();
console.log(a);

Output: 1

Explanation: Inside function b(), the declaration function a() {} is hoisted to the top of b's local scope, creating a local variable a. The assignment a = 10 mutates this local variable a, leaving the outer global variable a unaffected at 1.

Answer:
* Uninitialized (TDZ State): The identifier has been registered in the Lexical Environment, but its memory slot has not been activated. Any attempt to read or write to it throws a ReferenceError.
* Initialized to undefined: The variable slot has been initialized with the primitive value undefined (e.g., var x; or unassigned parameters). Reading it returns undefined safely without errors.

Answer:
ES Module imports are completely hoisted to the top of the module:

console.log("App Starting");
import { helper } from "./utils.js"; // Executed BEFORE "App Starting"!

The module loader parses all import statements statically during module graph linking. Imported dependencies are evaluated and executed before any code in the importing module runs, regardless of where the import statement appears physically in the file.

Answer:
Function parameters evaluate in order from left to right inside the intermediate parameter scope:

function badParams(a = b, b = 2) {
  return a + b;
}
badParams(); // ReferenceError: Cannot access 'b' before initialization

When a = b evaluates, b is present in the parameter scope but has not yet been initialized. This triggers a TDZ ReferenceError.

Reversing the order (function good(b = 2, a = b)) works cleanly because b is initialized before a evaluates.

Answer:
The catch (error) clause creates an isolated Declarative Environment Record for the error parameter:

var x = 1;
try {
  throw 2;
} catch (x) {
  console.log(x); // 2 (Reads catch parameter)
  var y = 3;      // 'var' hoists OUT of the catch block to function scope!
}
console.log(x);   // 1 (Global x was shadowed, not overwritten)
console.log(y);   // 3 (Hoisted out successfully)

The error identifier x is block-scoped to the catch block, but standard var declarations inside catch hoist past the catch block into the enclosing function.

Answer:

var x = 21;
var test = function () {
  console.log(x);
  var x = 20;
};
test();

Output: undefined

Inside test(), the local declaration var x is hoisted to the top of the function and initialized to undefined. It shadows the outer global var x = 21. When console.log(x) executes, it reads the local unassigned x, printing undefined.

Answer:
The value of this is determined dynamically at runtime based on the call site where the function is executed:

1. Default Binding: Standalone function invocation (e.g., foo()). In non-strict mode, binds to the global object (window/globalThis). In strict mode, resolves to undefined.
2. Implicit Binding: Invoked via an owner context object (e.g., obj.foo()). this binds to the context object obj.
3. Explicit / Hard Binding: Using call(), apply(), or bind(). Explicitly forces this to the designated object.
4. new Binding: Invoked with the new constructor keyword. this binds to the newly allocated instance object.

Precedence: new Binding > Explicit Binding > Implicit Binding > Default Binding.

Answer:
Arrow functions do not have their own this binding (nor do they have arguments, super, or new.target).

Lexical this: An arrow function resolves this like any standard lexical variable: it looks up the Scope Chain to the enclosing lexical context where the arrow function was defined.

Because arrow functions lack a [[ThisBindingStatus]], calling .call(), .apply(), or .bind() on an arrow function simply passes arguments; the thisArg parameter is silently ignored.

Answer:
* fn.call(thisArg, arg1, arg2, ...): Immediately invokes fn with this bound to thisArg, passing additional arguments individually as a comma-separated list.
* fn.apply(thisArg, [argsArray]): Immediately invokes fn with this bound to thisArg, passing additional arguments packaged inside a single array or array-like object.
* fn.bind(thisArg, arg1, ...): Does not invoke the function immediately. It returns a brand new Exotic Bound Function permanently locked to thisArg with optional pre-curried arguments.

Answer:
A complete polyfill must handle partial application and support being invoked as a constructor with the new operator:

Function.prototype.myBind = function (context, ...initialArgs) {
  if (typeof this !== "function") {
    throw new TypeError("myBind must be called on a function");
  }

  const targetFn = this;

  function boundFunction(...callArgs) {
    // If invoked with 'new', 'this' should point to the new instance, not 'context'
    const isNew = this instanceof boundFunction;
    return targetFn.apply(
      isNew ? this : context,
      [...initialArgs, ...callArgs]
    );
  }

  // Preserve prototype chain for 'instanceof' checks
  if (targetFn.prototype) {
    boundFunction.prototype = Object.create(targetFn.prototype);
  }

  return boundFunction;
};

Answer:
The new operator overrides hard binding:

function Person(name) {
  this.name = name;
}
const obj = {};
const BoundPerson = Person.bind(obj);

const instance = new BoundPerson("Bob");

console.log(instance.name); // "Bob"
console.log(obj.name);      // undefined!

When an exotic bound function is called with new, the hard-bound thisArg (obj) is discarded. The engine allocates a new empty object inheriting from Person.prototype and binds this to the newly created instance.

Answer:
Implicit Lost occurs when an implicitly bound method loses its context reference and falls back to Default Binding:

const user = {
  name: "Sarah",
  greet() { console.log("Hello, " + this.name); }
};

// Case 1: Aliasing a function reference
const greetFn = user.greet;
greetFn(); // "Hello, undefined" (Default Binding: this points to window/undefined)

// Case 2: Passing as a callback
setTimeout(user.greet, 100); // "Hello, undefined"

Passing user.greet extracts the raw memory pointer to the underlying function; the calling object reference is discarded.

Fix: Use user.greet.bind(user) or wrap in an arrow function: () => user.greet().

Answer:
Introduced in ES6, new.target is a meta-property detecting how a function was invoked:

• If invoked via the new keyword: new.target points to the constructor function (or derived class).
• If invoked as a regular function call: new.target is undefined.

function DBConnection() {
  if (!new.target) {
    throw new Error("DBConnection must be instantiated with 'new'");
  }
}

Answer:
Executing new Constructor(...args) triggers four sequential steps:

1. Allocates a brand new empty plain JavaScript object in memory: const obj = {};.
2. Links the new object's internal prototype (__proto__) to the constructor's prototype object: Object.setPrototypeOf(obj, Constructor.prototype);.
3. Invokes the constructor function, binding this to the newly created object: const result = Constructor.apply(obj, args);.
4. Returns the object: if the constructor function returns its own non-primitive object, that object is returned instead; otherwise, returns obj.

Answer:
* Returning a Primitive (Number, String, Boolean, null): Ignored entirely by new. The newly constructed instance is returned:

function Foo() {
  this.val = 100;
  return "hello"; // Ignored!
}
console.log(new Foo().val); // 100

* Returning an Object: Overrides the new operation; the returned object replaces the created instance:

function Bar() {
  this.val = 100;
  return { val: 999 }; // Replaces the instance!
}
console.log(new Bar().val); // 999

Answer:
When attaching a standard function to a DOM element:

button.addEventListener("click", function (e) {
  console.log(this === e.currentTarget); // true (Points to the button element)
});

* Standard function: The browser explicitly binds this to e.currentTarget (the DOM element that registered the listener).
* Arrow function: this retains its lexical context (usually window or the enclosing class instance), ignoring the DOM element.

Answer:
Method Borrowing allows an object to use a method belonging to another object without inheriting from it:

// Borrowing Array methods on array-like objects (e.g., arguments or NodeLists):
function processArgs() {
  const arr = Array.prototype.slice.call(arguments); // Borrowing slice
  return arr.map(x => x * 2);
}

// Borrowing Object.prototype.hasOwnProperty defensively:
const user = Object.create(null); // No prototype! user.hasOwnProperty throws error
const hasName = Object.prototype.hasOwnProperty.call(user, "name"); // Safe!

Answer:

const obj = {
  count: 10,
  doWork: function () {
    setTimeout(function () {
      console.log(this.count);
    }, 0);
  }
};
obj.doWork();

Output: undefined

The function passed to setTimeout is executed by the host timer subsystem as a standalone function call (Default Binding). In non-strict mode, its this binds to window, where window.count is undefined.

Fix: Use an arrow function inside setTimeout so this lexically captures obj.

Answer:
No. Hard binding is permanent:

function show() { console.log(this.name); }
const obj1 = { name: "Alice" };
const obj2 = { name: "Bob" };

const boundFn = show.bind(obj1);
const reBoundFn = boundFn.bind(obj2);

reBoundFn(); // "Alice"
reBoundFn.call(obj2); // "Alice"

An exotic bound function wraps the original target function in a closure using apply(obj1). Chaining .bind(obj2) simply wraps the wrapper; when invoked, the innermost wrapper still executes with obj1.

Answer:
* Standard Class Method: Placed on the class's prototype. Subject to Implicit Lost if passed as a callback detached from the instance:

class Button {
  render() { console.log(this); }
}

* Arrow Function Field (Class Property): Allocated directly on the individual instance object inside the constructor:

class Button {
  render = () => { console.log(this); };
}

this is permanently bound to that specific instance.

Trade-off: Safe from context loss in React/DOM callbacks, but consumes more memory because every instance creates its own copy of the function rather than sharing one on the prototype.

Answer:

function foo() {
  console.log(this.a);
}
const obj1 = { a: 2, foo: foo };
const obj2 = { a: 3, foo: foo };

obj1.foo();
(obj2.foo = obj1.foo)();

Output: 2 followed by undefined (or global a).

Explanation:

• obj1.foo() uses standard Implicit Binding → prints 2.
• (obj2.foo = obj1.foo) is an assignment expression. The result of an assignment expression is the value assigned (the raw underlying function reference).
• Invoking it immediately via () is a standalone function call subject to Default Binding (not bound to obj2), resolving this to global or undefined in strict mode.

Answer:
* prototype: An explicit object property present only on functions (specifically constructor functions and ES6 classes, excluding arrow functions). It defines what object will become the prototype of all instances created when invoking that function with the new keyword.
* __proto__ (or [[Prototype]]): An internal hidden pointer present on every JavaScript object instance. It points directly to the prototype object from which that specific instance inherits methods and properties.

Relationship: For an instance const user = new Person(), it holds that Object.getPrototypeOf(user) === Person.prototype.

Answer:
When accessing a property (e.g., obj.prop):

1. The engine checks if prop exists as an own property directly on obj (verified via Object.hasOwn(obj, 'prop')).
2. If absent, it reads the internal [[Prototype]] reference and inspects the parent prototype object.
3. This step recurses up the chain link-by-link (e.g., Array.prototype → Object.prototype).
4. Termination: The top of the chain is always Object.prototype.[[Prototype]], which evaluates strictly to null. If the identifier is not found anywhere up to null, the engine returns undefined.

Answer:
Property Shadowing occurs when an own property on an object instance shares the identical identifier with a property defined higher up on its prototype chain:

* During Read Access: The engine stops searching as soon as it finds the property directly on the instance, "shadowing" the prototype version.
* During Assignment (obj.prop = value):

• If prop exists on the prototype with writable: false (read-only), assignment fails silently (or throws in strict mode); it does not create an own property.
• If prop has a setter on the prototype, that prototype setter is invoked rather than creating an own property.
• Otherwise, an own property is created directly on obj.

Answer:
Object.create(null) creates a pure, bare object whose internal [[Prototype]] points directly to null:

const map = Object.create(null);
console.log(map.toString);       // undefined (No Object.prototype inheritance!)
console.log(map.__proto__);       // undefined

Benefits:

• Prototype Pollution Immunity: Immune to attacks targeting Object.prototype.
• Zero Built-in Key Clashes: Keys like "toString", "valueOf", or "constructor" can be stored safely as data keys without colliding with inherited methods.

Answer:
Prior to ES6, prototypal inheritance was established using constructor stealing and Object.create():

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return `${this.name} makes a noise.`;
};

function Dog(name, breed) {
  Animal.call(this, name); // 1. Super constructor call (borrowing fields)
  this.breed = breed;
}

// 2. Link prototype chain cleanly
Dog.prototype = Object.create(Animal.prototype);

// 3. Repair the constructor pointer
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  return "Woof!";
};

Answer:
Altering an existing object's prototype using obj.__proto__ = ... or Object.setPrototypeOf(obj, newProto) breaks JIT optimization in V8:

• V8 optimizes property access by assuming the prototype chain and hidden classes (shapes) are immutable.
• Mutating the prototype invalidates all compiled Inline Caches (ICs) across every function that has ever accessed that object or any object sharing its hidden class.
• Forces the engine to de-optimize native machine code back to slow un-cached lookups.

Answer:
The expression obj instanceof Constructor checks if Constructor.prototype exists anywhere along the prototype chain of obj:

function customInstanceOf(obj, targetConstructor) {
  if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
    return false;
  }
  let proto = Object.getPrototypeOf(obj);
  while (proto !== null) {
    if (proto === targetConstructor.prototype) return true;
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}

Customization: Classes can override this behavior using the well-known symbol [Symbol.hasInstance](instance).

Answer:
Prototype Pollution occurs when an attacker injects malicious properties into Object.prototype via insecure recursive object merging, deep cloning, or JSON path setting:

// Insecure deep merge parsing user payload:
const payload = JSON.parse('{"__proto__": {"isAdmin": true}}');
merge({}, payload);

// Vulnerability: Every object in the application now inherits isAdmin!
const guest = {};
console.log(guest.isAdmin); // true (Severe privilege escalation)

Defenses:

• Use Object.create(null) for dictionary lookups.
• Use native Map instead of plain objects for dynamic user keys.
• Freeze global prototypes using Object.freeze(Object.prototype).

Answer:
* 'prop' in obj: Returns true if prop exists as an own property or anywhere along the prototype chain.
* obj.hasOwnProperty('prop'): Checks strictly for own properties. Vulnerable to failures if obj was created via Object.create(null) or if the property name hasOwnProperty was shadowed.
* Object.hasOwn(obj, 'prop') (ES2022 Standard): Static method that works safely on all objects, including objects with null prototypes and objects with shadowed properties.

Answer:

function Person() {}
Person.prototype.friends = ["Alice"];

const p1 = new Person();
const p2 = new Person();

p1.friends.push("Bob");

console.log(p2.friends);

Output: ["Alice", "Bob"]

Why: p1.friends does not assign an own property; it performs a prototype lookup, finds the shared reference array on Person.prototype.friends, and mutates it in place.

Fix: Instance-specific reference data (arrays, objects) should always be initialized inside the constructor function (this.friends = []), not on the prototype.

Answer:
* for...in: Iterates over all enumerable string properties on the object plus its entire prototype chain.
* Object.keys(obj): Returns an array of own enumerable string properties only (skipping prototypes and non-enumerable properties).
* Object.getOwnPropertyNames(obj): Returns an array of all own string properties, including non-enumerable properties (e.g., built-in array length).
* Reflect.ownKeys(obj): Returns all own keys, including non-enumerable string properties and Symbols.

Answer:
* instanceof requires a constructor function on the right-hand side (obj instanceof Constructor).
* isPrototypeOf() operates directly on plain prototype objects without requiring a constructor reference:

const protoObj = { role: "admin" };
const user = Object.create(protoObj);

console.log(protoObj.isPrototypeOf(user)); // true
console.log(Object.prototype.isPrototypeOf(user)); // true

Answer:
* Negative Lookup Penalties: If code queries a non-existent property (obj.missingProp), the engine must traverse every prototype link all the way to Object.prototype before returning undefined.
* Holey Array Prototype Crawling: Accessing missing indices in HOLEY arrays forces prototype chain scans on every iteration.
* V8 Shape Transitions: Deep prototype hierarchies complicate Hidden Class dependency trees; mutating a top-level prototype invalidates inline caches down the entire tree.

Answer:

function Gadget() {}
const g1 = new Gadget();

Gadget.prototype = { version: 2 };
const g2 = new Gadget();

console.log(g1.version);
console.log(g2.version);

Output: undefined followed by 2

Why: g1 was instantiated while Gadget.prototype pointed to the original prototype object. Reassigning Gadget.prototype = { version: 2 } updates the reference for future instances, but does not alter g1's internal [[Prototype]] pointer, which remains linked to the original object.

Answer:
* Object.preventExtensions(obj): Prevents adding new properties to obj. Existing properties can be modified or deleted. Does not affect prototype properties.
* Object.seal(obj): Prevents adding or deleting properties; marks all existing own properties as configurable: false. Existing writable property values can still be changed.
* Object.freeze(obj): Highest restriction. Prevents adding, deleting, or re-configuring properties; marks all existing own data properties as writable: false.

Note: Freezing an object is shallow; nested objects and prototype objects remain mutable unless explicitly frozen recursively.

Answer:
A Proxy object wraps a target object and intercepts low-level internal operations (such as property lookup, assignment, enumeration, and function invocation) via handler functions called Traps:

const target = { name: "John", age: 30 };
const proxy = new Proxy(target, {
  get(obj, prop, receiver) {
    console.log(`Reading property: ${prop}`);
    return prop in obj ? obj[prop] : "Not Found";
  }
});

console.log(proxy.name); // Logs: Reading property: name -> "John"
console.log(proxy.city); // Logs: Reading property: city -> "Not Found"

Answer:
Reflect is a built-in global object providing methods for interceptable JavaScript operations with identical signatures to proxy traps.

Why using Reflect is mandatory in traps:

• Preserving Prototype Receiver: Calling Reflect.get(target, prop, receiver) ensures that if the property is a getter, this inside the getter correctly points to the receiver (the Proxy) rather than the underlying target.
• Clean Return Values: Reflect.defineProperty returns a boolean (true on success, false on failure) instead of throwing a hard exception like Object.defineProperty.

Answer:
* Object.defineProperty (Vue 2 Limitation): Requires iterating through every property recursively at startup to convert keys into getters/setters. Cannot detect dynamically added properties, deleted properties, or direct array index mutations (arr[0] = 'val').
* Proxy (Vue 3 Standard): Wraps the object container itself. Intercepts property reads, writes, deletions, and array operations dynamically on-demand, enabling lazy reactive observation with smaller initial memory footprints.

Answer:
To preserve language consistency, ECMAScript enforces Proxy Invariants that traps cannot violate:

Example Invariant: If a target object property is configured as non-writable and non-configurable:

const target = {};
Object.defineProperty(target, "id", { value: 42, writable: false, configurable: false });

const proxy = new Proxy(target, {
  get() { return 999; } // VIOLATION!
});
console.log(proxy.id); // TypeError: 'get' on proxy: property 'id' is a read-only and non-configurable...

A proxy trap cannot forge or return a value different from the target's non-writable, non-configurable property value.

Answer:
Proxy.revocable(target, handler) returns an object containing a proxy instance and a revoke function:

const { proxy, revoke } = Proxy.revocable(sensitiveData, handler);

// Pass proxy to untrusted external library:
externalLib.process(proxy);

// Revoke access immediately after execution:
revoke();

console.log(proxy.data); // TypeError: Cannot perform 'get' on a proxy that has been revoked

Ideal for security sandboxing and resource management: access to the underlying target can be cut off permanently at any time.

Answer:
Intercept the get trap to convert negative integer string keys to positive offset indices:

function createNegativeArray(arr) {
  return new Proxy(arr, {
    get(target, prop, receiver) {
      if (typeof prop === "string" && !isNaN(prop)) {
        const index = Number(prop);
        if (index < 0) {
          prop = String(target.length + index);
        }
      }
      return Reflect.get(target, prop, receiver);
    }
  });
}

const list = createNegativeArray(["A", "B", "C", "D"]);
console.log(list[-1]); // "D"
console.log(list[-2]); // "C"

Answer:
Private class fields (#field) are resolved based on hard private brand checks:

class Account {
  #balance = 1000;
  getBalance() { return this.#balance; }
}

const acc = new Account();
const proxy = new Proxy(acc, {});

console.log(proxy.getBalance()); // TypeError: Cannot read private member #balance from an object whose class did not declare it

Why it fails: Inside getBalance(), this resolves to the proxy. The V8 engine inspects the private brand on proxy; because the brand was installed on the raw instance acc, the check fails.

Fix: Bind methods to the raw target inside proxy traps or pass methods bound directly to the target.

Answer:
A Proxy handler can intercept 13 internal operations:

• get, set, has (for in operator), deleteProperty
• apply (function calls), construct (for new operator)
• getPrototypeOf, setPrototypeOf, isExtensible, preventExtensions
• getOwnPropertyDescriptor, defineProperty, ownKeys

Answer:
* JIT Inline Cache Disruption: Property accesses on standard objects compile into single-instruction machine memory reads. Proxies force property accesses to go through JavaScript trap function calls, disabling Inline Caching.
* CPU Latency: Micro-benchmarks show raw property reads through Proxies are roughly 5x to 20x slower than direct property reads on plain objects.
* Best Practice: Use Proxies for state containers, validation, and reactive boundaries, but avoid wrapping high-frequency tight data computation loops (e.g., matrix calculations, game physics).

Answer:
A standard Proxy is shallow; mutations to nested objects (proxy.user.address.city = 'NY') do not trigger the parent's set trap.

Deep Observation via Lazy Proxying:

function reactive(target) {
  if (target === null || typeof target !== "object") return target;

  return new Proxy(target, {
    get(obj, prop, receiver) {
      const res = Reflect.get(obj, prop, receiver);
      // Lazily wrap nested objects in reactive proxies when accessed
      return reactive(res);
    },
    set(obj, prop, value, receiver) {
      console.log(`Mutating ${String(prop)} to`, value);
      return Reflect.set(obj, prop, value, receiver);
    }
  });
}

Answer:
The receiver is the object where the operation originally started (usually the Proxy itself or an object inheriting from the Proxy).

If an object has an inherited getter:

const parent = {
  get name() { return this._name; }
};
const proxy = new Proxy(parent, {
  get(target, prop, receiver) {
    return Reflect.get(target, prop, receiver); // Correctly sets 'this' inside getter to 'child'
  }
});
const child = { _name: "CustomChild" };
Object.setPrototypeOf(child, proxy);

console.log(child.name); // "CustomChild"

If receiver is omitted from Reflect.get, this inside the getter defaults to parent, returning undefined.

Answer:
Intercept the set trap to enforce runtime type safety and constraints:

const UserSchema = {
  name: val => typeof val === "string" && val.length > 0,
  age: val => typeof val === "number" && val >= 18
};

function createValidatedUser(data) {
  return new Proxy(data, {
    set(target, prop, val, receiver) {
      if (prop in UserSchema && !UserSchema[prop](val)) {
        throw new TypeError(`Invalid value for schema property: ${prop}`);
      }
      return Reflect.set(target, prop, val, receiver);
    }
  });
}

Answer:
The ownKeys trap intercepts operations that retrieve an object's property list:

• Object.keys()
• Object.getOwnPropertyNames()
• Object.getOwnPropertySymbols()
• Reflect.ownKeys()

Can be used to hide internal keys starting with an underscore (_) from iteration loops.

Answer:
Yes. If the target object is a function, the Proxy can implement the apply trap:

function sum(a, b) { return a + b; }

const loggedSum = new Proxy(sum, {
  apply(target, thisArg, argList) {
    console.log(`Called with args: ${argList}`);
    const start = performance.now();
    const result = Reflect.apply(target, thisArg, argList);
    console.log(`Execution time: ${performance.now() - start}ms`);
    return result;
  }
});

console.log(loggedSum(10, 20)); // Logs execution metrics and returns 30

Answer:
By design, JavaScript Proxies are transparent virtualization wrappers:

• There is no built-in language operator (e.g., isProxy(x)) to detect if an object is a proxy from standard userland code.
• typeof proxy returns "object" (or "function").
• proxy instanceof Target returns true.

Diagnostic workarounds: Native Node.js exposes util.types.isProxy(obj) internally using C++ V8 hooks for debugging and testing environments.

Answer:
ES6 classes are primarily syntactic sugar over prototypal inheritance, but with strict engine-level behavioral differences:

• Mandatory new: Calling a class without new throws a TypeError: Class constructor cannot be invoked without 'new'.
• Non-Enumerable Methods: All methods defined inside the class body are automatically configured as enumerable: false on the prototype.
• Strict Mode: All code inside a class body runs in 'use strict' automatically.
• Temporal Dead Zone: Class declarations are not initialized until their declaration statement is executed.

Answer:
Private class fields (#privateField) introduced in ES2022 are enforced at the engine level:

• They are not stored as standard string or symbol properties in the object's property dictionary.
• They cannot be accessed via dynamic indexers (obj['#field'] is a syntax error).
• They cannot be inspected via Object.getOwnPropertyNames() or Reflect.ownKeys().
• Brand Checking: When an instance of the class is created, V8 installs a hidden internal "brand" on the object. Accessing #field evaluates an engine-level brand check verifying that the target object was instantiated by that exact class declaration.

Answer:
* Prototype Method:

class User {
  login() {} // Allocated ONCE on User.prototype
}

Shared across all 100,000 instances in memory. Highly memory efficient.

* Public Class Field:

class User {
  login = () => {}; // Allocated on EVERY instance object inside constructor
}

Every single instance allocates a brand new function object in memory. Consumes significantly more memory, but ensures this remains lexically bound.

Answer:
Static Initialization Blocks (static { ... }) allow complex, multi-statement initialization of static properties with full access to private fields:

class Database {
  static #connection;
  static {
    try {
      Database.#connection = initializePool();
    } catch (err) {
      Database.#connection = fallbackPool();
    }
  }
}

Executes once when the class declaration is evaluated, providing a clean scope for error handling and privileged access to private identifiers before instance construction.

Answer:
In standard classes, the constructor allocates this.

In a derived class (class Sub extends Base), the derived constructor does not allocate this. It delegates object instantiation up the inheritance hierarchy to the base class constructor.

Until super(...args) is called and returns the newly instantiated instance from the base class, this is uninitialized and resides in the Temporal Dead Zone. Referencing this before super() throws a ReferenceError: Must call super constructor in derived class before accessing 'this'.

Answer:
When class Dog extends Animal is defined, ES6 establishes two separate prototype links:

1. Instance Prototype Chain: Dog.prototype.[[Prototype]] === Animal.prototype (enables instance method inheritance).
2. Static Prototype Chain: Dog.[[Prototype]] === Animal (links constructor functions directly).

Because of link #2, static methods defined on Animal (e.g., Animal.create()) can be called directly on the child class: Dog.create().

Answer:
super.method() accesses parent prototype methods.

Internal Binding: Unlike standard prototype lookups that evaluate dynamically via Object.getPrototypeOf(this), super references are statically bound at compile time using the internal slot [[HomeObject]]:

• Every class method has a [[HomeObject]] pointing to the prototype object where the method was declared.
• super.method() evaluates as Object.getPrototypeOf([[HomeObject]]).method.call(this).
• This prevents infinite recursion bugs when prototype borrowing occurs.

Answer:
Introduced in ES2022, the in operator can verify whether an object holds a specific private field without triggering a hard runtime exception:

class EncryptedBox {
  #secret;
  
  static isBox(obj) {
    return #secret in obj; // Returns true if obj has the #secret brand, false otherwise
  }
}

Prior to this feature, testing for private field presence required wrapping access attempts in cumbersome try...catch blocks.

Answer:
Standard ECMAScript Decorators are functions evaluated at class definition time that intercept and mutate class declarations, methods, getters, setters, or fields:

function logged(value, { kind, name }) {
  if (kind === "method") {
    return function (...args) {
      console.log(`Starting ${name}`);
      const res = value.apply(this, args);
      console.log(`Finished ${name}`);
      return res;
    };
  }
}

class MathOps {
  @logged
  add(a, b) { return a + b; }
}

Answer:
Yes. In ES6, classes can inherit from built-ins like Array, Map, or Error cleanly because super() delegates object allocation down to the native built-in constructor:

class CustomStack extends Array {
  top() {
    return this[this.length - 1];
  }
}

const stack = new CustomStack(1, 2, 3);
stack.push(4);
console.log(stack.top()); // 4
console.log(stack instanceof Array); // true

In ES5, inheriting from Array was famously broken because internal slots (like exotic array length synchronization) could not be initialized by userland functions.

Answer:
* Private Fields (#prop = 1): Allocated as per-instance storage entries on the individual instance.
* Private Methods (#method() {}): Allocated once on the class definition metadata. They are not duplicated on instances, but can only be invoked by code executing within the physical lexical boundary of the class declaration.

Answer:

class Base {
  name = "Base";
  constructor() {
    this.printName();
  }
  printName() {
    console.log(this.name);
  }
}

class Sub extends Base {
  name = "Sub";
  printName() {
    console.log(this.name);
  }
}

new Sub();

Output: undefined

Explanation:

1. new Sub() calls Base constructor first via super().
2. Inside Base constructor, this.printName() calls Sub.prototype.printName due to polymorphic dispatch.
3. However, Sub's class field name = "Sub" has not run yet (derived class fields initialize after super() completes).
4. Therefore, this.name evaluates to undefined.

Answer:
JavaScript has no native abstract keyword. Abstract base classes are enforced using new.target:

class AbstractWidget {
  constructor() {
    if (new.target === AbstractWidget) {
      throw new TypeError("Cannot construct AbstractWidget instances directly");
    }
    if (this.render === undefined) {
      throw new TypeError("Must override method render()");
    }
  }
}

Answer:
In Chrome DevTools:

• Instances appear under their explicit class constructor name (e.g., User, OrderModel) in the Constructor list rather than generic Object.
• Instances share a unified Hidden Class (Map) if fields are declared statically inside the class body, optimizing V8 heap allocation.
• Private fields appear in heap snapshots under an internal private symbol map, detached from enumerable properties.

Answer:

class A {
  static identify() { return "Class A"; }
}
class B extends A {
  static identify() { return super.identify() + " > Class B"; }
}

console.log(B.identify());

Output: "Class A > Class B"

Static methods support super referencing. B.identify() accesses A.identify() via the static prototype chain (B.[[Prototype]] === A), concatenates the string, and returns the combined result.

Answer:
The iteration protocol defines how any object can be sequentially traversed by for...of loops and spread operators:

• Iterable Protocol: An object is iterable if it implements a method keyed by the well-known symbol [Symbol.iterator](). This method must return an Iterator object. Built-in iterables include Array, String, Map, Set, and TypedArray.
• Iterator Protocol: An object is an iterator if it implements a next() method that returns an object containing two properties:
  • value: The current iteration payload element.
  • done: A boolean flag (false if more values exist; true when iteration completes).

Answer:
A Generator Function (function*) does not execute its body when invoked; instead, it returns an exotic Generator Object that implements both the Iterable and Iterator protocols.

Internal State Machine: The V8 engine compiles a generator into a cooperative state machine:

• When yield is encountered, the generator's execution context frame is suspended. Its local variables, register state, and program counter are preserved on the managed heap.
• The Call Stack pops the frame, yielding execution back to the caller.
• Invoking gen.next() restores the state frame from the heap onto the Call Stack, resuming execution right after the yield statement.

Answer:
Generators are two-way communication channels:

function* calculator() {
  const a = yield "Enter first number";
  const b = yield "Enter second number";
  return a + b;
}

const gen = calculator();
console.log(gen.next().value);    // "Enter first number"
console.log(gen.next(10).value);  // "Enter second number" (Passes 10 to variable 'a')
console.log(gen.next(20).value);  // 30 (Passes 20 to variable 'b')

Key Rule: The argument passed to next(value) replaces the yield expression itself where the generator was suspended. The very first next() call cannot receive an injected value because no yield is currently paused.

Answer:
yield* delegates execution to another iterable or generator function:

function* subGen() {
  yield 2;
  yield 3;
  return "Sub completed";
}

function* mainGen() {
  yield 1;
  const result = yield* subGen(); // Delegates iteration to subGen
  console.log(result);            // Captures return value of subGen!
  yield 4;
}

console.log([...mainGen()]); // [1, 2, 3, 4] (Logs: "Sub completed")

It transparently pipes next(), throw(), and return() calls from the outer generator directly into the inner iterator until the inner sequence completes.

Answer:
* gen.return(val): Forces immediate generator termination. It resumes the generator, executes any active finally blocks, and returns { value: val, done: true }.
* gen.throw(err): Injects an exception directly into the generator's suspended frame at the exact line where it is paused at yield. If wrapped in a local try...catch block, the generator catches the error and can continue yielding; if uncaught, it terminates.

Answer:
An Async Generator combines async functions with generators, implementing the [Symbol.asyncIterator]() protocol:

async function* fetchPages(urls) {
  for (const url of urls) {
    const res = await fetch(url);
    const data = await res.json();
    yield data; // Yields a promise-resolved value
  }
}

// Consuming via for await...of:
for await (const page of fetchPages(urls)) {
  console.log(page);
}

Its next() method returns a Promise that resolves to { value, done }. for await...of pauses execution sequentially until each emitted promise resolves before advancing to the next iteration.

Answer:
Processing 10,000,000 records using standard array methods (.map().filter()) instantiates massive intermediate arrays in memory, causing heavy GC thrashing and out-of-memory crashes.

Generators provide Lazy Evaluation ($O(1)$ memory):

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i; // Evaluated on-demand; zero memory array allocation!
  }
}

const numbers = range(1, 10000000);
for (const n of numbers) {
  if (n > 5) break; // Generates only 5 items, consuming virtually no memory!
}

Answer:
Assign a function returning an iterator to the Symbol.iterator property:

const collection = {
  items: ["Alpha", "Beta", "Gamma"],
  [Symbol.iterator]() {
    let index = 0;
    const items = this.items;
    return {
      next() {
        if (index < items.length) {
          return { value: items[index++], done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (const item of collection) {
  console.log(item); // "Alpha", "Beta", "Gamma"
}

Answer:
* for...in: Iterates over all enumerable string keys of an object and its entire prototype chain. Array indices are returned as string representations ("0", "1"), and ordering is not guaranteed to be sequential.
* for...of: Iterates over data values provided by an object's [Symbol.iterator] implementation. It works only on iterables (throws TypeError on plain objects) and guarantees deterministic sequential value ordering.

Answer:
An Infinite Generator contains an unbounded loop (e.g., while(true)):

function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++;
  }
}

const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

Why it is safe: Execution suspends completely at yield. It does not compute or allocate values ahead of time. Computation occurs strictly on demand when the caller invokes next(), preserving stable, constant-memory footprints.

Answer:

function* test() {
  yield 1;
  yield 2;
  return 3;
}

const arr = [...test()];
console.log(arr);

const gen = test();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

Output:
[1, 2]
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: true }

Why 3 is excluded from the array: The for...of loop and spread operator (...) discard the value of any iteration step where done: true. The return value is accessible only by directly reading the terminal next() call.

Answer:
If a consumer exits a generator early (e.g., via break inside a for...of loop or invoking gen.return()), the engine automatically executes any active finally blocks before disposing the generator frame:

function* resourceManager() {
  try {
    yield "Active connection";
  } finally {
    console.log("Cleanup executed!"); // Guaranteed to run on early exit
  }
}

for (const res of resourceManager()) {
  break; // Triggers 'finally' cleanup immediately!
}

Answer:
Historically, iterators lacked functional array methods like map, filter, or take without converting them into full memory-heavy arrays first.

Iterator Helpers (ES2025): Adds lazy functional methods directly to the Iterator.prototype:

const iter = idGenerator()
  .map(x => x * 2)
  .filter(x => x > 10)
  .take(3);

console.log([...iter]); // [12, 14, 16] (Evaluated completely lazily!)

Answer:
* Heap Context Retention: Because suspension requires preserving local variables across event loop ticks, variables cannot remain on high-speed CPU stack registers; they are copied into managed heap context frames.
* De-optimization Constraints: Generator state machines introduce complex control flow graphs that limit aggressive loop unrolling and register optimization in TurboFan compared to standard raw for-loops.

Answer:

function* errorFlow() {
  try {
    yield 1;
  } catch (err) {
    yield err;
  }
  yield 2;
}

const gen = errorFlow();
console.log(gen.next().value);
console.log(gen.throw("Custom Fault").value);
console.log(gen.next().value);

Output: 1, "Custom Fault", 2

Explanation: gen.throw() injects the error at the paused yield 1 line. The internal catch block intercepts it and yields err ("Custom Fault"). Because the error was caught and handled locally, the generator continues running cleanly to yield 2 on the subsequent next() call.

Answer:
* Map: Holds strong references to both keys and values. Keys can be any type (primitives or objects). As long as the Map instance is live, none of its key or value objects can be garbage-collected, even if all external references are deleted.
* WeakMap: Keys must be objects (or non-registered symbols), and the map holds weak references to its keys:

• If an object used as a key has no other live references remaining in the application, it is automatically garbage-collected.
• The key-value pair is silently removed from the WeakMap without manual intervention.

Answer:
WeakMap and WeakSet intentionally expose no iteration methods (no .keys(), .values(), .entries(), .forEach()) and have no .size property.

Reason: Non-deterministic Garbage Collection: Garbage collection in V8 occurs unpredictably based on memory pressure heuristics. If a WeakMap were iterable, its .size or entry list would vary depending on whether the engine's GC ran a millisecond earlier or later, introducing non-deterministic race conditions and memory-inspection security leaks into standard application logic.

Answer:
* DOM Node Metadata Association: Attaching state, analytics, or controller logic to DOM elements without modifying the DOM or causing detached DOM leaks:

const clickCounts = new WeakMap();

function trackClick(domButton) {
  const count = clickCounts.get(domButton) || 0;
  clickCounts.set(domButton, count + 1);
}
// When domButton is removed from the document, it is garbage-collected automatically!

* Private Class Data: Storing private fields before native #field syntax existed. * Memoization Caches for Objects: Caching computed results based on complex object arguments without preventing argument de-allocation.

Answer:
A WeakSet is an unordered collection of uniquely held objects where membership references are held weakly:

• Stores only objects (no primitive values).
• Non-enumerable and has no size property.

Primary Use Case: Object Tagging / Brand Checking:

const activeSockets = new WeakSet();

function markActive(socket) {
  activeSockets.add(socket);
}

function processMessage(socket) {
  if (!activeSockets.has(socket)) {
    throw new Error("Unauthorized or closed socket");
  }
}
// When socket disconnects and loses external references, it is reclaimed automatically

Answer:
A WeakMap behaves as an Ephemeron table:

A value in a WeakMap is kept alive if and only if the key object itself is reachable through external references.

Key-to-Value Cycles: Even if a value holds a strong reference pointing back to its key (a circular reference), V8's GC algorithm recognizes the ephemeron boundary: once the key loses all references outside the WeakMap, both the key and the value are collected together, preventing circular memory retention.

Answer:
* Primitives (numbers, strings, booleans) in JavaScript are interned or passed by value, not identity. For example, the number 42 has no unique object lifetime; it exists permanently across the engine runtime.
* If 42 were allowed as a key in a WeakMap, it could never be garbage-collected because the number 42 is always reachable by definition, transforming the weak reference into an eternal strong reference.

Exception (ES2023): Unique Symbols (created via Symbol()) are allowed as WeakMap keys because they have deterministic object-like lifetimes. Global symbols (Symbol.for()) are disallowed.

Answer:
Introduced in ES2021, WeakRef allows creating an explicit weak reference to a target object without enforcing a key-value collection:

const user = { name: "Alice" };
const ref = new WeakRef(user);

// Later in execution:
const liveUser = ref.deref();
if (liveUser) {
  console.log(liveUser.name); // Target is still alive in memory
} else {
  console.log("User has been garbage-collected.");
}

ref.deref() returns the target object if it is still resident in the heap; if collected, it returns undefined.

Answer:
FinalizationRegistry executes a designated cleanup callback after an object has been garbage-collected:

const registry = new FinalizationRegistry((token) => {
  console.log(`Releasing native resources for handle: ${token}`);
});

function allocateResource() {
  const obj = { handleId: 105 };
  registry.register(obj, obj.handleId); // Register object with held metadata token
}
allocateResource();

Crucial Rule: The cleanup callback must never hold a reference to the target object itself (only pass a separate primitive token). Holding the object inside the callback creates a strong root, preventing GC indefinitely.

Answer:
According to the official TC39 specification guidelines, weak references and finalizers should be treated with extreme caution:

• GC Timing is Unpredictable: The garbage collector may run in 10ms, in 10 hours, or never (if memory pressure remains low). Finalizers must never be used for critical business logic or security operations.
• Liveness Leaks via Execution Frames: Inside the same turn of the event loop, once ref.deref() returns a live reference, V8 places the object into a temporary local root pool, keeping it alive for the remainder of that microtask tick.

Answer:
Combine a standard Map (for string keys) with WeakRef values and a FinalizationRegistry to purge dead keys automatically:

function createAutoCleaningCache() {
  const cache = new Map();
  const registry = new FinalizationRegistry((key) => {
    // If the value was collected, remove its dead string key from the map
    cache.delete(key);
  });

  return {
    get(key) {
      const ref = cache.get(key);
      return ref ? ref.deref() : undefined;
    },
    set(key, value) {
      cache.set(key, new WeakRef(value));
      registry.register(value, key);
    }
  };
}

Answer:

const wm = new WeakMap();
let key = { id: 1 };

wm.set(key, "Metadata Payload");
console.log(wm.has(key));

key = null; // Nullifying external reference
// How do we read or check the value in wm now?

Output: true

Once key = null runs, the original object has zero strong references remaining. It is permanently unreachable from JavaScript code, and the value "Metadata Payload" cannot be retrieved. The entry will be reclaimed by the engine on the next GC pass.

Answer:
ES2023 permits non-registered Symbols as keys in WeakMaps:

const wm = new WeakMap();
const featureKey = Symbol("myFeature");

wm.set(featureKey, { state: "enabled" });
console.log(wm.get(featureKey)); // { state: "enabled" }

Enables creating globally unique, un-forgeable capability tokens that can be shared across module boundaries without exposing base object references.

Answer:
* As a Key: Yes, a WeakMap instance is an object and can theoretically be used as a key in another WeakMap (or even itself): wm.set(wm, "self").
* As a Value: Yes, any object or primitive can serve as a value in a WeakMap. However, if a WeakMap stores an object that holds a strong reference back to the key, the key and value will remain alive until external references to the WeakMap itself are severed.

Answer:
While standard JavaScript code cannot inspect or iterate WeakMaps:

• Chrome DevTools has privileged internal V8 engine hooks.
• Logging a WeakMap to the DevTools Console (console.log(myWeakMap)) displays an expandable [[Entries]] internal table listing all current key-value pairs in real-time.
• In Heap Snapshots, weak links appear as dashed lines in the retainer view, distinguishing them from standard strong reference arrows.

Answer:
* Time Complexity: Both Map and WeakMap offer average $O(1)$ read and write performance.
* Memory Optimization: In V8, WeakMaps avoid storing contiguous hash buckets of keys to allow instant key collection; entries are often maintained directly via internal ephemeron lists on the key object's hidden class layout.
* WeakMap eliminates manual collection housekeeping code (e.g., map.delete(id)), reducing memory fragmentation in long-running node processes and SPAs.

Answer:
A Pure Function satisfies two strict mathematical criteria:

1. Deterministic: Given the identical input arguments, it always returns the exact same output value.
2. Zero Side Effects: It does not mutate external state, modify argument references, write to DOM, execute network I/O, or rely on mutable ambient state (e.g., Math.random(), Date.now()).

Why Side Effects cause production bugs: Shared mutable state introduces hidden temporal coupling. Calling a function can unexpectedly corrupt state in another module, breaking concurrency, complicating unit tests, and disabling caching optimizations.

Answer:
Function Composition chains multiple unary functions together so the output of each function becomes the input to the next:

* pipe: Evaluates functions in natural left-to-right order ($f \rightarrow g \rightarrow h$):

const pipe = (...fns) => (initialVal) =>
  fns.reduce((val, fn) => fn(val), initialVal);

const add5 = x => x + 5;
const double = x => x * 2;
const pipeline = pipe(add5, double);
console.log(pipeline(10)); // (10 + 5) * 2 = 30

* compose: Evaluates functions in mathematical right-to-left order ($h(g(f(x)))$):

const compose = (...fns) => (initialVal) =>
  fns.reduceRight((val, fn) => fn(val), initialVal);

Answer:
A universal currying utility inspects the original function's arity (fn.length):

function curry(fn) {
  return function curried(...args) {
    // If enough arguments have been accumulated, execute target function:
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    // Otherwise, return a function that continues gathering arguments:
    return function (...nextArgs) {
      return curried.apply(this, [...args, ...nextArgs]);
    };
  };
}

const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6

Answer:
Point-Free Programming is a style where function definitions do not explicitly identify or name the arguments (points) on which they operate:

// Standard Style (Points 'x' explicitly named):
numbers.map(x => Math.sqrt(x));

// Point-Free Style:
numbers.map(Math.sqrt);

Trade-offs:

• Pros: Eliminates boilerplate variable names; focuses purely on data transformations.
• Cons (The parseInt trap): Passing functions with multiple parameters can cause silent bugs:

  ["1", "2", "3"].map(parseInt); // Returns [1, NaN, NaN]!
  // Because parseInt receives (element, index, array), evaluating index as radix!

Answer:
* Object.freeze(): Shallow, runtime-enforced immutability. Freezing deep objects requires expensive recursive freezing. Updating an object requires deep-copying the entire tree (allocating massive redundant memory).
* Structural Sharing (Immer / Persistent Data Structures):

• When modifying an object, unchanged branches are reused directly by reference.
• Only modified nodes and their parent ancestor chain are re-allocated.
• Delivers instant immutable updates with $O(\log N)$ memory overhead rather than full deep copies.

Answer:
A Higher-Order Function is a function that either:

1. Accepts one or more functions as input arguments (e.g., Array.prototype.map, filter, reduce).
2. Returns a brand new function as its output result (e.g., curry, debounce, throttle).

HOFs enable modular separation of concerns by decoupling control flow (loops, timeouts, caching) from business logic.

Answer:
* Currying: Always transforms a multi-argument function into a chain of unary functions (functions accepting strictly one argument at a time): $$f(a, b, c) \rightarrow f(a)(b)(c)$$ * Partial Application: Fixes a subset of arguments to arbitrary values, producing a function of reduced arity (can accept multiple arguments simultaneously): $$f(a, b, c) \xrightarrow{\text{bind } a} g(b, c)$$

Answer:
An expression is Referentially Transparent if it can be replaced with its evaluated value without altering the behavior of the program:

const add = (a, b) => a + b;
// 'add(2, 3)' can be replaced anywhere with '5' safely!

Optimization Benefits: Referentially transparent expressions allow JIT compilers to perform Constant Folding (pre-computing static values at compile time) and safe Memoization, eliminating repeated runtime CPU operations.

Answer:
A Monad is a design pattern that wraps a value in a context container, allowing chained transformations via a bind or flatMap method without exposing null checks:

class Maybe {
  constructor(value) { this.value = value; }
  static of(val) { return new Maybe(val); }
  isNothing() { return this.value === null || this.value === undefined; }
  map(fn) {
    return this.isNothing() ? this : Maybe.of(fn(this.value));
  }
}

// Chained safely without 'if (user && user.address...)' null guards:
Maybe.of(user)
  .map(u => u.address)
  .map(a => a.city)
  .map(c => c.toUpperCase());

(Modern JS mirrors this natively via Optional Chaining ?. and Nullish Coalescing ??).

Answer:
A Functor is any data structure (container) that implements a map() method adhering to two fundamental algebraic laws:

1. Identity Law: container.map(x => x) must return an equivalent container holding the identical value.
2. Composition Law: container.map(f).map(g) must equal container.map(x => g(f(x))).

JavaScript's built-in Array is the most common functor: [1, 2, 3].map(x => x * 2) maps values inside the container and returns a new container.

Answer:
* reduce: Traverses array elements from left-to-right (Index 0 → $N$). Used for standard accumulator pipelines.
* reduceRight: Traverses array elements in reverse from right-to-left (Index $N$ → 0). Essential for implementing mathematical function compose pipelines where the rightmost function must execute first.

Answer:
A recursive cloner must handle circular references using a WeakMap:

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== "object") return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  if (hash.has(obj)) return hash.get(obj); // Cycle detected!

  const clone = Array.isArray(obj) ? [] : Object.create(Object.getPrototypeOf(obj));
  hash.set(obj, clone);

  for (const key of Reflect.ownKeys(obj)) {
    clone[key] = deepClone(obj[key], hash);
  }
  return clone;
}

Answer:
In pure functional programming, loops are expressed via recursion.

Because V8 does not implement Tail Call Optimization (TCO), deep functional recursions inevitably hit call stack limits (~10,000 frames) and crash with a RangeError: Maximum call stack size exceeded.

Solution: Use Trampolining: wrap recursive steps in thunk functions (functions returning functions) executed inside a flat while loop.

Answer:
A Trampoline intercepts recursive function calls and resolves them in a single iterative loop:

const trampoline = (fn) => (...args) => {
  let result = fn(...args);
  while (typeof result === "function") {
    result = result(); // Unrolls the stack!
  }
  return result;
};

// Return a thunk instead of invoking directly:
const factorial = (n, acc = 1) => {
  if (n <= 1) return acc;
  return () => factorial(n - 1, n * acc); // Returns a thunk function
};

const safeFact = trampoline(factorial);
console.log(safeFact(50000)); // Evaluates without stack overflow!

Answer:
* Pros: High modularity, zero side-effect concurrency safety, simple unit testing, predictable state transitions.
* Cons in V8:

• Higher heap allocation: chaining .filter().map().reduce() creates temporary intermediate arrays and closures for every step.
• Function call overhead: traversing arrays using closures is slightly slower than a raw native for loop with direct memory indexing.
• Currying allocates multiple nested closure scopes on the heap.

Answer:
Whenever an interactive event (e.g., click, keydown) occurs in the browser, the event lifecycle travels through three distinct physical phases:

1. Capturing Phase (Trickling): The event originates at the top window level (Window → Document → <html> → <body>) and trickles downward through ancestors toward the target element. Registered via addEventListener(type, fn, { capture: true }).
2. Target Phase: The event reaches the exact innermost DOM element where the interaction physically occurred (event.target). Listeners registered directly on this target execute.
3. Bubbling Phase: The event travels upward in reverse direction from the target back up through parent container nodes toward the root Window. This is the default phase for listeners registered without capture flags.

Answer:
* event.target: The originator of the event. Points to the physical innermost DOM element that was clicked or triggered (e.g., a child <span> or <i> icon inside a button). It remains constant as the event bubbles.
* event.currentTarget: The element to which the event listener callback is currently attached and executing. It changes dynamically as the event traverses up ancestor nodes.

Relationship: Inside standard (non-arrow) event functions, this === event.currentTarget is always guaranteed.

Answer:
Event Delegation is a technique where a single event listener is attached to a shared parent container rather than attaching hundreds of individual listeners to child nodes:

const listContainer = document.getElementById("todo-list");

listContainer.addEventListener("click", function (event) {
  // Use closest to match target button or child icon clicks cleanly:
  const deleteBtn = event.target.closest(".delete-btn");
  if (deleteBtn && listContainer.contains(deleteBtn)) {
    const itemId = deleteBtn.dataset.id;
    deleteItem(itemId);
  }
});

Architectural Benefits:

• Memory Conservation: Binds 1 listener instead of 10,000 listeners, saving significant V8 heap memory.
• Dynamic Node Handling: Automatically handles dynamically inserted elements without needing to bind new listeners.
• Zero Teardown Overhead: Eliminates memory leaks when child nodes are destroyed or re-rendered.

Answer:
* event.preventDefault(): Cancels the browser's default native behavior for that event (e.g., prevents form submissions, links navigating, checkboxes toggling). Does not stop event bubbling.
* event.stopPropagation(): Halts the event from propagating further up (bubbling) or down (capturing) the DOM tree. However, other sibling event listeners attached to the same element will still execute.
* event.stopImmediatePropagation(): Halts propagation up/down the DOM tree AND immediately prevents all remaining sibling listeners attached to that exact same element from executing.

Answer:
Several core DOM events do not bubble by default (event.bubbles === false):

• focus and blur (Use focusin and focusout instead if bubbling/delegation is required).
• mouseenter and mouseleave (Use mouseover and mouseout for bubbling support).
• Media element events: play, pause, seeking, volumechange.
• Resource lifecycle events: load, unload, abort, error (on elements like <img> or <script>).

Answer:
When listening to touch or wheel events (touchstart, touchmove, wheel):

• The browser's compositor thread must wait for the JavaScript event handler on the main thread to complete to check if code calls event.preventDefault() before scrolling can proceed, causing scroll jank.
• Setting { passive: true } informs the browser in advance that the handler will never call event.preventDefault().
• The compositor thread can scroll the viewport immediately on a background thread without waiting for JavaScript execution, delivering smooth 60/120 FPS scrolling performance. Calling preventDefault() inside a passive listener logs a console warning and is ignored.

Answer:

const parent = document.getElementById("parent");
const child = document.getElementById("child");

parent.addEventListener("click", () => console.log("Parent Capture"), true);
parent.addEventListener("click", () => console.log("Parent Bubble"), false);

child.addEventListener("click", () => console.log("Child Bubble"), false);
child.addEventListener("click", () => console.log("Child Capture"), true);

Output when child is clicked:
Parent Capture → Child Bubble → Child Capture → Parent Bubble

Explanation:

1. Capturing Phase: Travels down from window to parent → logs Parent Capture.
2. Target Phase: On the target element itself (child), listeners execute in the exact order they were registered in code, regardless of the capture boolean flag → logs Child Bubble, then Child Capture.
3. Bubbling Phase: Travels upward → logs Parent Bubble.

Answer:
CustomEvent allows creating and dispatching application-specific synthetic events that can bubble and carry payload data:

const myEvent = new CustomEvent("user:login", {
  detail: { userId: 101, username: "dev_expert" }, // Payload data
  bubbles: true,                                    // Enables DOM bubbling
  cancelable: true                                  // Permits preventDefault()
});

// Dispatch from target node:
const loginBtn = document.getElementById("login");
loginBtn.dispatchEvent(myEvent);

// Listening higher up the DOM tree:
document.body.addEventListener("user:login", (e) => {
  console.log("Logged in user:", e.detail.username);
});

Answer:
Configuring { once: true } ensures that the listener will invoke exactly once and then automatically remove itself from the element:

modalCloseBtn.addEventListener("click", handleModalClose, { once: true });

Eliminates the requirement of writing defensive cleanup code (modalCloseBtn.removeEventListener(...)) inside single-execution workflows (such as opening dialogs, submitting single-use forms, or one-time animations).

Answer:
Modern browsers permit passing an AbortSignal directly to addEventListener:

const controller = new AbortController();
const { signal } = controller;

window.addEventListener("resize", onResize, { signal });
window.addEventListener("scroll", onScroll, { signal });

// Tear down all associated listeners in one single call:
controller.abort();

This provides a standardized, unified mechanism to unbind dozens of disparate event listeners across multiple elements when unmounting a UI component.

Answer:
* event.isTrusted === true: The event was generated directly by genuine physical user interaction (hardware mouse click, keypress, touch gesture).
* event.isTrusted === false: The event was synthetically generated via script (e.g., calling element.click() or dispatchEvent()).

Security Application: Crucial for preventing automated click-fraud, verifying authentic user authorization for privileged Web APIs (like opening popups, copying to clipboard, or entering Fullscreen mode, which require trusted user gestures).

Answer:
If a button contains nested icon tags: <button class="btn"><i>Icon</i> Save</button>, clicking the icon makes event.target point to <i> rather than <button>.

Robust Solution: Use Element.prototype.closest():

container.addEventListener("click", (e) => {
  // Climbs up the DOM tree from event.target to find the matching button ancestor
  const actionButton = e.target.closest(".btn");
  if (!actionButton || !container.contains(actionButton)) return;

  saveData(actionButton.dataset.id);
});

Answer:
When an event originates inside a Web Component's Shadow DOM and bubbles across the shadow boundary into the light DOM:

• To preserve component encapsulation, the browser performs Event Retargeting.
• To listeners outside the component, event.target is rewritten so it points to the custom element host tag rather than the private element inside the shadow root.
• Code needing to inspect the true internal origin node can invoke event.composedPath() (provided the shadow root was created with mode: 'open').

Answer:
Consider this code:

btn.addEventListener("click", () => console.log("clicked"));
btn.removeEventListener("click", () => console.log("clicked")); // FAILS!

removeEventListener requires the exact identical memory reference to the function passed to addEventListener.

Defining an inline arrow or anonymous function creates a brand new function instance in memory with a distinct object identity. The removal call fails silently, leaving the original listener permanently bound in memory.

Answer:
* Physical User Events (Asynchronous): True user gestures (mouse clicks, typing) are queued via the browser event pipeline and picked up as Macrotasks by the Event Loop.
* Synthetic Events (Synchronous): Invoking element.dispatchEvent(event) or element.click() executes listeners synchronously immediately on the active Call Stack. The dispatch method blocks until all attached listener callbacks have completed execution, before continuing to the subsequent script line.

Answer:
* Debounce: Groups a burst of rapid events into a single execution. Guarantees that the action is invoked only after a specified quiet delay has elapsed since the last event trigger. Best for search autocomplete inputs, window resize completion, and autosave forms.
* Throttle: Enforces a maximum execution frequency limit. Guarantees that the action is invoked at most once per designated time interval (e.g., once every 200ms), irrespective of how many events fire. Best for continuous real-time events like scroll progress tracking, mouse drag tracking, and game physics.

Answer:

function debounce(fn, delay = 300, immediate = false) {
  let timerId = null;

  return function (...args) {
    const context = this;
    const callNow = immediate && !timerId;

    clearTimeout(timerId);

    timerId = setTimeout(() => {
      timerId = null;
      if (!immediate) {
        fn.apply(context, args);
      }
    }, delay);

    if (callNow) {
      fn.apply(context, args);
    }
  };
}

Answer:

function throttle(fn, limit = 200) {
  let lastRan = 0;
  let timerId = null;

  return function (...args) {
    const context = this;
    const now = performance.now();

    if (now - lastRan >= limit) {
      if (timerId) {
        clearTimeout(timerId);
        timerId = null;
      }
      fn.apply(context, args);
      lastRan = now;
    } else if (!timerId) {
      // Trailing edge guarantee
      timerId = setTimeout(() => {
        fn.apply(context, args);
        lastRan = performance.now();
        timerId = null;
      }, limit - (now - lastRan));
    }
  };
}

Answer:
Layout Thrashing occurs when JavaScript reads geometry properties immediately after writing styles inside an iterative loop:

// BAD: Interleaving writes and reads forces sync layout calculations repeatedly
for (let i = 0; i < elements.length; i++) {
  elements[i].style.width = "100px";               // Write
  const height = elements[i].offsetHeight;         // Read (Forces instant layout calculation!)
}

How it degrades performance: The browser normally batches style updates lazily. Reading offsetHeight, clientWidth, or getBoundingClientRect() forces the browser to flush the style queue and compute layout synchronously on the spot, multiplying CPU execution time.

Fix: Batch reads first, then batch writes (or leverage FastDOM).

Answer:
The browser rendering pipeline travels through: JavaScript → Style → Layout → Paint → Composite.

• Layout triggers (Slowest): width, height, top, left, margin, fontSize (forces full recalculation of page geometry).
• Paint triggers: color, background, box-shadow, visibility (re-rasterizes pixels, skipping layout).
• Composite triggers (Fastest, GPU-accelerated): transform (e.g., translate3d, scale) and opacity. These bypass layout and paint entirely, executing calculations directly on the GPU compositor thread.

Answer:
Legacy lazy loading checked element coordinates via getBoundingClientRect() inside scroll event listeners, creating CPU bottlenecks and main thread contention.

IntersectionObserver:

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // Lazy load image
      obs.unobserve(img);
    }
  });
}, { rootMargin: "200px" });

document.querySelectorAll("img[data-src]").forEach(img => observer.observe(img));

Calculates visibility asynchronously off the main thread inside the browser engine, eliminating scroll jank entirely.

Answer:
Rendering 100,000 items in a list creates 100,000 physical DOM tree nodes, consuming hundreds of megabytes of RAM and freezing scrolling.

DOM Virtualization (e.g., react-window, TanStack Virtual):

• Renders only the small visible slice of items currently inside the visible viewport (e.g., 20 items) plus a tiny overscan buffer.
• Calculates an absolute container height matching the full virtual list using empty padding.
• As the user scrolls, existing DOM nodes are recycled and repositioned, maintaining a constant DOM node count ($O(1)$) regardless of list size.

Answer:
Appending elements directly to the live DOM one by one triggers multiple layout recalculations.

A DocumentFragment is a lightweight, minimal document container stored entirely in memory that is not part of the active DOM tree:

const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const li = document.createElement("li");
  li.textContent = `Item ${i}`;
  fragment.appendChild(li); // Zero DOM reflows!
}

document.getElementById("myList").appendChild(fragment); // Single reflow/paint!

Answer:
ResizeObserver observes dimensional changes on specific individual DOM elements (unlike window.onresize):

const ro = new ResizeObserver(entries => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    adjustLayout(entry.target, width);
  }
});
ro.observe(document.getElementById("resizable-card"));

Loop Protection: If a callback triggers a mutation that alters the observed element's dimensions again, the browser halts processing for that frame and defers notifications to the next frame to prevent fatal infinite layout recursion loops.

Answer:
* LCP (Largest Contentful Paint ≤ 2.5s): Measures loading performance. Heavy synchronous scripts in the <head> block HTML parsing and defer LCP image rendering.
* INP (Interaction to Next Paint ≤ 200ms): Measures user interface responsiveness. Long Tasks (> 50ms) blocking the main thread prevent the browser from rendering the visual frame following user clicks/taps.
* CLS (Cumulative Layout Shift ≤ 0.1): Measures visual stability. Dynamically injecting DOM nodes above existing content or un-sized images pushes content downward, triggering layout shifts.

Answer:
* Standard <script src>: HTML parsing is completely paused while the script is downloaded and executed immediately.
* async: Downloads asynchronously in parallel with HTML parsing. As soon as the file finishes downloading, HTML parsing pauses to execute the script immediately. Execution order is non-deterministic (whichever downloads first runs first). Best for independent analytics trackers.
* defer: Downloads in parallel with HTML parsing. Execution is deferred until HTML parsing completes (right before DOMContentLoaded). Preserves source code execution order. Best for application bundles.
* type="module": Automatically behaves as defer by default.

Answer:
Setting will-change: transform gives the browser a hint ahead of time that an element will animate:

• The browser promotes the element to its own dedicated GPU Compositor Layer in advance, avoiding rendering lag when the animation begins.
• Memory Hazard: Every compositor layer consumes substantial physical GPU memory (VRAM). Applying will-change indiscriminately to dozens of elements or large DOM subtrees causes high VRAM consumption, memory paging, and mobile browser crashes.

Answer:
PerformanceObserver captures real-time user performance metrics programmatically:

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    // Detect long tasks:
    if (entry.entryType === "longtask") {
      console.warn(`Long task detected: ${entry.duration}ms`);
    }
  });
});

observer.observe({ entryTypes: ["longtask", "largest-contentful-paint", "layout-shift"] });

Answer:
In high-frequency real-time applications (HTML5 games, WebSockets, streaming analytics):

Allocating 10,000 temporary objects per second forces continuous Scavenger and Full GC sweeps, causing frame drops (jank).

An Object Pool pre-allocates a fixed array of reusable object instances at startup:

• Code borrows an object from the pool instead of invoking new.
• When processing completes, the object fields are reset and the instance is returned to the pool.
• Maintains a stable, flat memory allocation profile with zero runtime GC pauses.

Answer:
The FLIP (First, Last, Invert, Play) technique animates expensive layout transitions smoothly using only composite properties:

1. First: Measure the initial geometric position of the element using getBoundingClientRect().
2. Last: Apply the state class (e.g., expanded) and measure the final geometric position.
3. Invert: Use transform: translate(dx, dy) scale(sx, sy) to invert the element back to look like it is still at the initial position.
4. Play: Enable transition: transform and remove the inversion transform.

The entire physical layout animation is rendered strictly on the GPU compositor thread at 60 FPS without touching layout geometry during animation frames.