JavaScript Fundamentals and Modern ECMAScript

What is the difference between client-side and server-side JavaScript

Client-side JavaScript runs inside the browser environment (V8, SpiderMonkey) manipulating the DOM, handling user interactions, and initiating HTTP requests. Server-side JavaScript (Node.js, Deno) executes on server operating systems, performing file I/O, database queries, and network socket management.

var, let, and const in modern JavaScript

• var: Function-scoped, hoisted with undefined initialization, can be re-declared.
• let: Block-scoped, hoisted into Temporal Dead Zone (TDZ), cannot be re-declared.
• const: Block-scoped, must be initialized at declaration, creates an immutable variable binding.

What is the Temporal Dead Zone (TDZ)

The state between entering a scope and the variable declaration where let or const variables cannot be accessed. Attempting to read or write them throws a ReferenceError.

The difference between == and === operators

== performs type coercion before comparison (e.g., '5' == 5 is true). === (Strict Equality) checks both value and data type without coercion (e.g., '5' === 5 is false).

What are JavaScript Closures

A closure is the combination of a function bundled together with references to its surrounding lexical state (lexical environment), allowing an inner function to access variables from an outer enclosing scope even after the outer function has finished executing.

What is the JavaScript Event Loop

The concurrency mechanism that continuously monitors the Call Stack and the Callback / Task Queue (and Microtask Queue). When the Call Stack is empty, it pushes waiting callbacks onto the stack for execution.

Macro-tasks and Micro-tasks in the Event Loop

• Micro-tasks: Have higher priority; execute immediately after the current script finishes before rendering (e.g., Promise.then, queueMicrotask, MutationObserver).
• Macro-tasks: Scheduled after microtasks (e.g., setTimeout, setInterval, I/O, UI rendering).

What are Arrow Functions and how does their this binding differ from regular functions

Arrow functions have a compact syntax () => {} and do not possess their own `this` binding. Instead, they capture the this value of the enclosing lexical scope, preventing common scoping bugs in asynchronous callbacks.

JavaScript Prototype and Prototypal Inheritance

Every JavaScript object has an internal [[Prototype]] link pointing to another object. When a property or method is accessed on an object, the engine searches the object itself, then follows the prototype chain upward until the property is found or null is reached.

What is the difference between null and undefined in JavaScript

• undefined: Represents a variable that has been declared but not assigned any value (default engine state).
• null: An intentional assignment representing the explicit absence of any object value.

Compare Asynchronous Patterns in JavaScript: Callbacks, Promises, and Async/Await

The Document Object Model (DOM) and Window Object Hierarchy

Browser Object Hierarchy

• Window Object: The top-level global execution context in a browser representing the browser tab itself.
• Document Object: Represents the root HTML document. Allows programmatic node querying (querySelector), DOM tree manipulation (createElement, appendChild), and event listener attachment (addEventListener).

Functional Array Operations in ES6: map(), filter(), reduce(), and forEach()

Core Functional Array Methods

1. `map(fn)`: Pure, non-mutating method that creates a new array populated with the results of calling a provided transformation function on every element.
2. `filter(fn)`: Pure, non-mutating method creating a new array with all elements that pass the truthy predicate test.
3. `reduce(fn, init)`: Executes an accumulator function over each element, reducing the array to a single composite output value (sum, grouped object, histogram).
4. `forEach(fn)`: Imperative iteration executing side-effects for each element; returns undefined.

Detail Modern ECMAScript Features: Destructuring, Spread/Rest Operator, and Modules

Modern ES6+ Toolset

• Destructuring Assignment: Unpacking properties from objects or values from arrays into distinct variables:

const { name, age } = user; const [first, ...rest] = items;

• Spread Operator (`...`): Expands an iterable into individual elements (e.g., shallow cloning { ...obj }, array merging [...arr1, ...arr2]).
• Rest Parameters (`...`): Condenses multiple function arguments into a single formal array parameter.
• ES Modules (ESM): Official standard for modular JavaScript using import { func } from './module.js' and export const func = () => {} with static compile-time graph analysis.

Event Propagation in the DOM: Capturing Phase, Target Phase, and Bubbling Phase

DOM Event Flow

1. Capturing Phase (Trickling): Event travels down from window through ancestors to the target element.
2. Target Phase: Event reaches the actual target element that triggered the action.
3. Bubbling Phase: Event bubbles upwards from target through ancestors back to window.

• event.stopPropagation() halts traversal; event.preventDefault() stops default browser action.

Provide an In-Depth Architectural Analysis of the V8 JavaScript Engine and the Microtask/Macrotask Event Loop Model

V8 Engine & Event Loop Execution Mechanics

1. The V8 Compilation Pipeline

• Ignition: Fast bytecode interpreter that parses AST and begins immediate execution without compilation latency.
• TurboFan: Optimizing JIT compiler that takes hot bytecode, observes runtime types (Inline Caching), and compiles highly optimized machine code. If type assumptions are violated, TurboFan de-optimizes back to Ignition bytecode.

2. Event Loop Execution Order Rule

1. Execute all synchronous code currently on the Call Stack until empty.
2. Execute ALL tasks in the Microtask Queue until completely drained. If a microtask schedules another microtask, it executes in the same cycle.
3. Re-render DOM / execute requestAnimationFrame.
4. Take ONE task from the Macrotask Queue and push it onto the Call Stack.
5. Return to Step 1 and repeat indefinitely.

Design and Build a Robust Asynchronous Data Pipeline in Modern JavaScript with Concurrency Control and Exponential Backoff Retries

Enterprise Async Pipeline Implementation

Analyze JavaScript Memory Management, Garbage Collection Algorithms (Mark-and-Sweep), and Memory Leak Patterns

Memory Management & Leak Profiling

1. Generational Garbage Collection in V8

• Scavenger (Young Generation): Uses Cheney's copying algorithm. Memory is partitioned into From-Space and To-Space. Active objects are copied to To-Space during minor GC; stale objects are discarded instantly in milliseconds.
• Mark-Sweep-Compact (Old Generation): For long-lived objects. Traces root pointers, marks reachable objects, sweeps dead memory blocks, and compacts fragmented heap.

2. Critical Memory Leak Patterns in Real Apps

• Accidental Global Variables: Assigning bar = 'data' without const/let attaches references to window forever.
• Forgotten Timers / Intervals: A setInterval holding references to outer scoped variables never collected if clearInterval() is omitted.
• Dangling Event Listeners: Attaching listeners to DOM elements that are later removed from the page without calling removeEventListener().
• Detached DOM Trees: Keeping JavaScript variable references to removed DOM nodes prevents the browser from freeing their entire subtree.

Examiners frequently evaluate: var vs let vs const and TDZ (5 marks), Closures and lexical scope (5/10 marks), and Event Loop Microtask vs Macrotask execution (10/15 marks).