• `undefined` means a value was not provided / missing.
• `null` is an explicit “no value” assignment.
• `typeof undefined` → `"undefined"`, `typeof null` → `"object"`.

• `let` can be reassigned.
• `const` cannot be reassigned (but objects/arrays can still be mutated).
• Both are block scoped.

const person = { name: 'Ava' };
person.name = 'Noah'; // ok (mutation)
person = { name: 'Mia' }; // error (reassign)

Declarations are moved to the top of their scope before code runs. For variables declared with `var`, initialization becomes `undefined`. `let`/`const` are in the temporal dead zone until initialized.

• `==` performs type coercion before comparison.
• `===` checks type and value without coercion.
• Prefer `===` for predictable behavior.

• `typeof null` → `"object"`
• `typeof undefined` → `"undefined"`
• `typeof []` → `"object"` (use `Array.isArray` to detect arrays)

• Arrow functions don’t have their own `this` (they capture from outer scope).
• Arrow functions don’t have `arguments`.
• Arrow functions can’t be used as constructors (`new`).

A closure is a function that retains access to variables from its outer scope even after the outer function has finished.

function makeCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const c = makeCounter();
console.log(c()); // 1
console.log(c()); // 2

• Objects can inherit properties via `[[Prototype]]`.
• If a property isn’t found on the object, JS checks its prototype, then prototype of the prototype, etc.
• This is how inheritance and method lookup work in JS.

• Both do shallow copies.
• Spread and `Object.assign` handle property copying similarly, but spread syntax can be clearer for merging.
• Both copy enumerable own properties.

• Debounce: delays execution until events stop firing.
• Throttle: limits execution to once per time window.
• Debounce is common for search-after-typing; throttle for scroll/resize.

console.log('A');

setTimeout(() => console.log('B'), 0);

Promise.resolve()
  .then(() => console.log('C'))
  .then(() => console.log('D'));

console.log('E');

A, E, C, D, B

var x = 10;

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

test();

It throws a ReferenceError due to the temporal dead zone for the inner `let x`.

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

3, 3, 3 (because `var` is function-scoped and `i` ends as 3).

const p = Promise.resolve('X');

p.then(v => {
  console.log(v);
  return 'Y';
}).then(v => console.log(v));

console.log('Z');

Z, X, Y

How would you investigate?

• Identify when growth starts and reproduce with a profiling run
• Heap snapshots (baseline → after user flows → later) and compare retained size
• Look for detached DOM nodes and growing object types
• Check event listeners (accidental re-binding), timers, and intervals
• Confirm leaks vs caching by validating object retention paths

What do you do first?

• Record a Performance profile while reproducing
• Find long tasks (main thread blocking), GC pauses, and forced reflows
• Check for expensive renders, large JSON parsing, and synchronous loops
• Use flame chart to locate top CPU consumers
• Mitigate: chunk work, debounce/throttle, virtualize lists, move work off main thread

How would you narrow down the cause?

• Confirm event fires and handler runs (logging/Breakpoints)
• Verify state/store update occurs and UI is subscribed/reacting
• Check immutability assumptions (mutating in place vs replacing references)
• Inspect async races: stale closures, out-of-order responses
• Use network traces + source maps + tracing spans to verify ordering

What’s your debugging approach?

• Reproduce with throttling (network conditions) and vary latency/bandwidth
• Inspect fetch/XHR retry logic and timeout settings
• Validate request sequencing and cancellation (AbortController)
• Check for large payloads, slow parsing, and JSON reviver overhead
• Confirm server responses are timely and not hanging under load

How would you respond?

• Classify the error type and attach context (request ID, user flow)
• Find where the promise is created vs where it’s awaited
• Add missing `catch` or ensure awaited calls are inside try/catch
• Check for swallowed errors in `async` functions and event handlers
• Fix root logic and add regression coverage

How do you investigate?

• Reproduce by correlating with specific routes/actions and device types
• Instrument with guard logs (input shape, timing, feature flags)
• Look for race conditions (async updates after component unmount)
• Check for optional fields and partial API responses
• Fix by validating data contracts and improving state initialization

What metrics and tools do you use?

• Use Performance panel to find layout thrashing and long tasks
• Inspect rendering: images, reflows, style recalculation triggers
• Check for expensive scroll handlers (missing passive listeners)
• Use transforms/opacity over top/left where possible
• Virtualize long lists and avoid measuring DOM repeatedly

How would you debug?

• Confirm binding logic: are handlers re-attached on rerenders?
• Check for missing cleanup in effects (removeEventListener / clearTimeout)
• Look for duplicate components mounting/unmounting
• Verify framework-specific patterns (dependency arrays, keys)
• Use breakpoints on event listener registration to track the source

Walk through:

• Root Cause
• Investigation
• Tools Used
• Final Fix

Explain the debugging and mitigation plan.

• Identify impact window and affected user segments
• Check caching layers: CDN, browser cache, service worker, app state
• Inspect network responses and headers (ETag/Cache-Control)
• Verify cache invalidation and versioning logic
• Hotfix: force refresh, bump cache keys, rollback if needed

How do you detect and fix it?

• Reproduce by changing input quickly or simulating latency
• Capture request/response order and correlate with UI state
• Use request cancellation (AbortController) and ignore stale responses
• Ensure state updates are based on latest input version/token
• Add tests for out-of-order resolution

What’s your response workflow?

• Identify where untrusted input enters the DOM
• Confirm whether `innerHTML`/dangerous rendering is used
• Replace with safe rendering or sanitize appropriately
• Add security tests and validate CSP configuration
• Patch and audit other similar code paths

How do you systematically debug?

• Compare environments: build flags, polyfills, bundling output
• Use browser-specific console errors + source maps
• Check for missing polyfills and unsupported features
• Validate CORS, CSP, and asset loading differences
• Reproduce using production build and matching browser versions

What causes this and how do you fix it?

• Requests not canceled on unmount/navigation
• State updates after unmount causing errors or retries
• Use AbortController and cancellation-safe state management
• Guard against stale updates using mounted flags/version tokens
• Add integration test around navigation/unmount

How do you investigate?

• Confirm source of truth (backend vs client computed)
• Verify transport: request parameters, filters, pagination, units
• Check optimistic UI and reconciliation logic
• Inspect timezones and rounding/format conversions
• Write a minimal reproduction with captured inputs and responses

What questions do you ask and what do you check?

• Is the loading state set/reset in all code paths (success, error, timeout)
• Are promises always awaited or are rejections uncaught?
• Is there a missing `finally` block for async flows?
• Check for conditional rendering gates that block completion
• Audit telemetry: correlate loading start/finish events

How do you diagnose and improve it?

• Use Lighthouse/Web Vitals + bundle analyzer
• Identify heavy dependencies and unused exports
• Apply code splitting and lazy loading on route boundaries
• Optimize assets (compression, image formats, caching)
• Reduce blocking scripts and confirm improvements in RUM

What’s your approach?

• Inspect scroll trigger conditions and thresholds
• Check for duplicate fetches and missing “in-flight” guards
• Ensure dedupe by request key and cancel older requests
• Backoff/retry strategy and server-side limits
• Add monitoring for requests per session and latency percentiles

console.log(typeof null);
console.log(typeof undefined);
console.log(typeof []);

object, undefined, object

console.log(0 == false);
console.log(0 === false);
console.log('0' == 0);
console.log('0' === 0);

true, false, true, false

let a = 1;

if (true) {
  let a = 2;
  console.log(a);
}

console.log(a);

2 then 1

console.log('start');

queueMicrotask(() => console.log('micro 1'));

Promise.resolve()
  .then(() => console.log('promise then'))
  .then(() => console.log('promise then 2'));

setTimeout(() => console.log('timeout'), 0);

console.log('end');

start, end, micro 1, promise then, promise then 2, timeout

async function run() {
  console.log(1);
  await Promise.resolve();
  console.log(2);
}
run();
console.log(3);

1, 3, 2

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 10);
}
console.log('done');

done then 3, 3, 3

console.log(a);
let a = 1;

ReferenceError (accessing `a` before initialization)

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

obj.f();

undefined (or error depending on environment), because `this` inside the normal function isn’t `obj`.

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

const obj = {
  x: 10,
  f: function () {
    setTimeout(() => {
      console.log(this.x);
    }, 0);
  }
};

• Capturing: event travels from window/document down to target.
• Bubbling: event travels from target up to ancestors.
• Default is bubbling; capturing can be enabled with

  { capture: true }

  .
• `event.stopPropagation()` stops further propagation.

• Task queue handles macrotasks (e.g., `setTimeout`, `setInterval`).
• Microtask queue handles microtasks (e.g., `Promise.then`, `queueMicrotask`).
• Microtasks run after the current call stack, before the next task.
• This ordering affects promise vs timeout output.

• Synchronous: caught by surrounding try/catch in the same call stack.
• Asynchronous: must be handled where the promise is resolved/rejected (then/catch) or awaited in try/catch.
• Uncaught async errors often appear as unhandled promise rejections.

function safeAsync(fn) {
  return async (...args) => {
    try {
      return await fn(...args);
    } catch (err) {
      // log, report, or return a fallback
      console.error('safeAsync caught:', err);
      throw err; // or return { ok:false, err }
    }
  };
}

JavaScript variables can hold two categories of values:

• Primitive Types: Numbers, Strings, Booleans, null, undefined, Symbols, and BigInt. They are immutable and stored directly on the Stack because they have fixed memory sizes.
• Reference Types: Objects, Arrays, Functions, Maps, and Sets. They are mutable and stored in the Heap because their sizes are dynamic. The variable on the Stack only holds a reference (pointer) to the heap memory address.

// Primitive value copy
let a = 10;
let b = a;
b = 20; // 'a' is still 10

// Reference value copy
let obj1 = { name: 'Alice' };
let obj2 = obj1;
obj2.name = 'Bob'; // obj1.name is now 'Bob' because both share the same reference!

Copying objects can be done at different depths:

• Shallow Copy: Copies the top-level properties. If a property is a reference type (like a nested object), it only copies the reference pointer, meaning the copy shares nested objects with the original. Common methods: spread operator {...obj}, Object.assign().
• Deep Copy: Recursively copies all properties, creating entirely new objects in memory for all nested layers. Common methods: structuredClone() (modern ES), JSON.parse(JSON.stringify(obj)) (has limitations).

const original = { name: 'Alice', details: { age: 30 } };

// Shallow Copy
const shallow = { ...original };
shallow.details.age = 40; // original.details.age is now 40!

// Deep Copy
const deep = structuredClone(original);
deep.details.age = 50; // original.details.age is still 40!

JavaScript modules allow code segregation. The two main systems are:

• ES Modules (ESM): The standard module format. Uses import and export statements. It is statically analyzed, resolving dependencies at compile time, which enables tree-shaking. Runs asynchronously.
• CommonJS (CJS): The Node.js legacy module format. Uses require() and module.exports. It is dynamic, loading scripts synchronously at runtime.

Optional Chaining and Nullish Coalescing simplify nested property accesses and fallback assignments:

• Optional Chaining (?.): Safely reads nested values. If a parent reference is null/undefined, it returns undefined instead of throwing a TypeError.
• Nullish Coalescing (??): Returns the fallback value only when the left expression is nullish (null or undefined).
• Comparison with OR (||): The OR operator returns the fallback for any falsy value (such as 0, "", or false), whereas ?? respects these values.

const config = { count: 0, text: '' };

const count1 = config.count || 10; // returns 10 because 0 is falsy
const count2 = config.count ?? 10; // returns 0 because 0 is not nullish

Event Delegation is a pattern where you attach a single event listener to a parent element rather than attaching listeners to individual children. Due to Event Bubbling, events fired on child elements bubble up to parent containers where they can be intercepted.

• Memory Savings: Reduces the number of event listeners in memory, which is critical for large tables or list elements.
• Dynamic Elements: Automatically listens to new child elements added to the DOM dynamically without needing to bind listeners to them manually.

// Single listener on parent ul container
document.getElementById('myList').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('Item clicked:', event.target.innerText);
  }
});

ES6 introduced Map and Set structures to resolve limitations in Objects and Arrays:

• Map vs Object: Objects only support string or symbol keys; Maps support any data type as key (including objects, functions). Maps preserve insertion order and provide size properties out of the box.
• Set vs Array: Arrays allow duplicate values and index-based lookups. Sets are collections of unique values, offering faster lookup times using set.has().

These methods are used to set the this context of a function call explicitly:

• call(): Invokes the function immediately, passing arguments individually: fn.call(context, arg1, arg2).
• apply(): Invokes the function immediately, passing arguments as an array: fn.apply(context, [arg1, arg2]).
• bind(): Returns a new function instance with this permanently bound, allowing it to be called later.

function greet(greeting, punctuation) {
  return `${greeting}, ${this.name}${punctuation}`;
}
const user = { name: 'Alice' };

// Immediate execution
greet.call(user, 'Hello', '!'); // 'Hello, Alice!'
greet.apply(user, ['Hi', '.']); // 'Hi, Alice.'

// Deferred execution
const bound = greet.bind(user);
bound('Welcome', '?'); // 'Welcome, Alice?'

These concepts define how variables are resolved and how functions execute:

• Lexical Scope: The scoping model where variable visibility is determined by their physical location in the source code during compilation. Nested functions can access variables from outer scopes.
• Execution Context: An environment created by the JS engine to execute code. It contains the local variables, the scope chain, and the this binding. It has two phases: creation (hoisting, scope building) and execution.
• Call Stack: A LIFO stack that tracks active execution contexts. When a function is called, its context is pushed onto the stack. When it returns, it is popped off.

WeakMap and WeakSet differ in how they hold references to keys and values, which prevents memory leaks:

• WeakMap: Keys must be objects or non-registered symbols. The references to the keys are held **weakly**. If a key object has no other active references, it can be garbage-collected, and its value will be removed from the WeakMap automatically.
• WeakSet: Similar behavior, storing unique objects weakly.
• Memory Leaks: Standard Maps hold strong references. If you delete a key reference from your variables but forget to clear it from the Map, the object stays in memory, creating a memory leak.

let user = { name: 'John' };
const wm = new WeakMap();
wm.set(user, 'profile info');

user = null; // The object is now eligible for Garbage Collection!
// In a standard Map, the object would stay in memory until the Map is cleared.

AbortController is a built-in browser API that allows you to abort one or more Web requests dynamically.

• Controller: Instantiate new AbortController() to get an object containing an abort() method and a signal property.
• Signal Binding: Pass the signal reference as an option to your fetch() request.
• Trigger: Calling controller.abort() cancels the request, causing the fetch promise to reject with an AbortError.

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

fetch('/api/heavy-data', { signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch request was successfully aborted.');
    }
  });

// Abort the request after 2 seconds
setTimeout(() => controller.abort(), 2000);

Generators and Iterators enable custom traversal of data structures:

• Iterator: An object containing a next() method that returns `{ value, done }`.
• Generator: A function declared using function* that returns a generator iterator. It uses the yield keyword to pause execution and emit values lazily.
• Lazy Evaluation: They only compute values when requested, making them ideal for handling infinite data streams or reading large files line by line without holding them in memory.

function* numberGenerator() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const gen = numberGenerator();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1

A Symbol is a unique primitive value introduced in ES6.

• Guaranteed Uniqueness: Every Symbol() call returns a unique value, preventing key collisions in objects.
• Hidden Properties: Symbol properties do not appear in Object.keys() or for...in loops. They are only readable using Object.getOwnPropertySymbols().
• Well-Known Symbols: JavaScript engines use built-in symbols like Symbol.iterator or Symbol.toStringTag to define core object protocols.

const privateKey = Symbol('id');
const user = {
  [privateKey]: 'secret-101',
  name: 'Alice'
};
console.log(Object.keys(user)); // ['name']
console.log(user[privateKey]); // 'secret-101'

The V8 Engine uses a generational garbage collector to reclaim unused heap memory. Memory is split into two generations:

• Young Generation (New Space): Small space where new objects are created. Collected frequently using the Scavenger algorithm (Cheney's copying algorithm), which splits space in half and copies surviving objects over. Surviving objects are eventually promoted to Old Space.
• Old Generation (Old Space): Large space where surviving objects reside. Collected less frequently using the Mark-Sweep-Compact algorithm: Marks reachable references, Sweeps unmarked objects, and Compacts fragmented memory slots.

Both limit execution rate, but behave differently:

• Debounce: Delays execution until events have stopped firing for a set time (e.g. autocomplete input).
• Throttle: Restricts execution to once per time window (e.g. scroll tracking, resizing).

function debounce(fn, delay) {
  let timerId = null;
  return function (...args) {
    if (timerId) clearTimeout(timerId);
    timerId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

Currying transforms a function that takes multiple arguments into a chain of nested functions that each take a single argument: fn(a, b, c) becomes fn(a)(b)(c). This enables partial function application, which helps build re-usable configuration functions.

// Currying helper
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return function(...args2) {
      return curried.apply(this, args.concat(args2));
    };
  };
}

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

The Critical Rendering Path (CRP) is the sequence of steps the browser takes to convert HTML, CSS, and JS into visible pixels on the screen:

• DOM: Browser parses HTML and builds the Document Object Model tree.
• CSSOM: Browser parses CSS and builds the CSS Object Model tree.
• Render Tree: DOM and CSSOM are combined, filtering out invisible elements (e.g. display: none).
• Layout (Reflow): Calculates the geometry, position, and size of elements.
• Paint: Fills in pixels (colors, borders, text styles) into layers.
• Composite: Sends layers to the GPU to be composited and drawn onto the screen.

Web Workers allow running scripts in background threads, isolated from the browser's main thread.

• No UI Access: Workers cannot access the DOM or window properties directly. They communicate with the main thread using postMessage() and onmessage.
• Use Cases: Performing CPU-intensive tasks (e.g. data processing, image filtering, parsing large files) without blocking the UI main thread.

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ number: 40 });
worker.onmessage = (e) => {
  console.log('Result from worker:', e.data.result);
};

// worker.js
self.onmessage = (e) => {
  const result = fibonacci(e.data.number);
  self.postMessage({ result });
};

These methods restrict modifications to objects at different levels:

• Object.preventExtensions(): Prevents adding new properties. Existing properties can be modified or deleted.
• Object.seal(): Prevents adding or deleting properties. Sets all properties as non-configurable, but existing property values can still be updated.
• Object.freeze(): Prevents adding, deleting, or updating properties. Makes all properties read-only. This creates a shallow freeze (nested objects can still be mutated).

The Proxy and Reflect APIs work together to intercept and customize operations on objects:

• Proxy: Wraps a target object and intercepts operations (like property access, assignment, function calls) using handler traps (e.g. get, set).
• Reflect: A global object containing methods that match Proxy traps, which forwards intercepted operations to the target object.
• Reactivity: In reactive frameworks (like Vue 3), a Proxy intercepts property sets. When a property is updated, the Proxy triggers change notifications and UI re-renders, while Reflect updates the actual object state.

const target = { count: 0 };
const proxy = new Proxy(target, {
  get(target, prop, receiver) {
    console.log(`Accessing property: ${prop}`);
    return Reflect.get(target, prop, receiver);
  },
  set(target, prop, value, receiver) {
    console.log(`Setting property: ${prop} = ${value}`);
    // Trigger side-effects here (e.g. UI re-renders)
    return Reflect.set(target, prop, value, receiver);
  }
});
proxy.count = 5; // logs 'Setting property: count = 5'

1. Parser: Converts JavaScript source code into an Abstract Syntax Tree (AST).
2. Ignition Interpreter: Generates bytecode from the AST and starts running it quickly.
3. Sparkplug & Maglev: Fast, mid-level compilers that generate non-optimized machine code to speed up hot execution paths.
4. TurboFan Optimizer: The optimizing compiler. It takes hot functions and builds highly optimized machine code using execution feedback. If assumptions fail (e.g. types change), it de-optimizes back to Ignition bytecode.

• Hidden Classes (Shapes): JavaScript lacks static typing, but V8 creates internal 'hidden classes' (shapes) to track object properties. If objects share the same properties in the same order, they share a shape, allowing V8 to optimize property accesses.
• Inline Caches (IC): V8 caches property offsets directly in function calls. If objects share the same shape, property lookups bypass slow dictionary hash tables, executing instantly.

The Event Loop processes asynchronous tasks sequentially:

• Macrotasks: Scheduled tasks like setTimeout, setInterval, postMessage, and standard DOM events. They run one at a time.
• Microtasks: High-priority tasks like Promise.then(), queueMicrotask, and MutationObserver. The microtask queue is **flushed completely** after the current execution context, before returning control to the Event Loop.
• Rendering: Browser layout and repaint cycles happen after all microtasks have run, before processing the next macrotask.

1. Execute a macrotask (e.g., initial script).
2. Run all microtasks until the queue is empty.
3. Check if rendering is needed and repaint if necessary.
4. Fetch the next macrotask from the queue.

Build a Promise class implementing states (PENDING, FULFILLED, REJECTED) and managing handlers dynamically. It must execute handlers asynchronously (using microtasks) to comply with standard specs.

class MyPromise {
  constructor(executor) {
    this.state = 'PENDING';
    this.value = null;
    this.handlers = [];

    const resolve = (val) => {
      if (this.state !== 'PENDING') return;
      this.state = 'FULFILLED';
      this.value = val;
      this.handlers.forEach(h => h.onFulfilled(val));
    };

    const reject = (err) => {
      if (this.state !== 'PENDING') return;
      this.state = 'REJECTED';
      this.value = err;
      this.handlers.forEach(h => h.onRejected(err));
    };

    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }
}

Modern ECMAScript specifications introduce features that simplify common patterns:

• Promise.withResolvers(): Returns a Promise along with its resolve and reject functions, which avoids nesting resolve logic inside executor callbacks.
• Object.groupBy() / Map.groupBy(): Groups iterable elements by criteria keys.
• Iterator Helpers: Adds utility methods (like map, filter, take, drop) directly to JS generators and iterators.
• Temporal API: A modern date/time library replacing the buggy legacy Date object.

// Promise.withResolvers
const { promise, resolve, reject } = Promise.withResolvers();
setTimeout(() => resolve('done'), 1000);

// Object.groupBy
const list = [{ role: 'admin' }, { role: 'user' }];
const grouped = Object.groupBy(list, x => x.role);

Security requires multi-layered defensive validation:

• XSS Mitigation: Never insert untrusted strings directly into HTML rendering methods (e.g. element.innerHTML). Sanitize inputs using libraries like DOMPurify and configure strict Content Security Policies (CSP).
• CSRF Mitigation: Store authentication tokens in HTTP-only, secure cookies with the SameSite=Strict attribute. Attach anti-CSRF tokens to API requests and verify them on the server.

Memoization is an optimization technique that caches function results based on input parameters. If a function is called with cached inputs, it returns the result instantly without re-calculating.

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

V8 optimizes arrays dynamically based on their elements' type:

• Smi Elements: Small Integers. Stored as contiguous arrays of unboxed integers (fastest).
• Double Elements: Floating-point numbers. Stored as unboxed floating-point arrays.
• Dictionary Elements: Stored as slow hash tables. This occurs when arrays are sparse or contain mixed types (e.g. objects, strings).
• Holes (Sparse Arrays): Deletes elements or leaves holes (e.g. [1,,3]). This de-optimizes arrays, forcing V8 to check prototype chains for missing values, which degrades performance.

These updates represent different stages of browser rendering:

• Reflow (Layout): Recalculates the geometry and layout of elements. Changing properties like width, height, top, or margin forces a reflow, which is expensive because it affects parent and sibling elements.
• Repaint: Redraws elements without changing their layout. Triggered by changes to properties like color, visibility, or background-color. Faster than a reflow.
• Layout Thrashing: Occurs when you repeatedly read and write to the DOM in rapid succession (e.g. inside loops). This forces the browser to recalculate layouts synchronously on every iteration.

• Batch DOM reads and writes: read properties first, then apply all style updates.
• Use DocumentFragments or wrap DOM mutations in requestAnimationFrame().
• Use GPU-accelerated CSS properties (like transform and opacity) to bypass reflows and repaints.

Before native ES Modules, closures and IIFEs were used to manage scoping:

• Module Pattern: Encapsulates private state and behavior inside an IIFE, returning a public API object.
• Revealing Module Pattern: Similar structure, but declares all functions and variables locally in the closure, returning an object with pointers to private members. This keeps syntax clean.
• Modern Alternative: ES Modules with const/let block scoping replace IIFE module patterns, resolving dependency imports natively at compile time.

const CounterModule = (function () {
  let privateCount = 0; // Private state
  
  function increment() { privateCount++; }
  function getCount() { return privateCount; }
  
  return {
    increment,
    count: getCount // Reveal public pointers
  };
})();

A complete deep copy implementation must handle non-JSON types (like Date, Map, RegExp) and prevent infinite recursion by tracking visited objects using a WeakMap cache.

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); // Resolve circular ref
  
  const clone = Array.isArray(obj) ? [] : Object.create(Object.getPrototypeOf(obj));
  hash.set(obj, clone);
  
  // Handle Map and Set
  if (obj instanceof Map) {
    obj.forEach((val, key) => clone.set(deepClone(key, hash), deepClone(val, hash)));
    return clone;
  }
  if (obj instanceof Set) {
    obj.forEach(val => clone.add(deepClone(val, hash)));
    return clone;
  }
  
  Reflect.ownKeys(obj).forEach(key => {
    clone[key] = deepClone(obj[key], hash);
  });
  return clone;
}

The differences lie in host environments and runtime targets:

• Browser Web APIs: Handle DOM events, timers, and animations. The event loop coordinates tasks with rendering repaints.
• Node.js (Libuv): A C++ library providing asynchronous I/O (files, networking) and managing a thread pool (4 threads by default) for heavy blocking tasks.
• Event Loop Phases: Node.js has specific execution phases (timers, pending callbacks, poll, check, close callbacks), whereas the browser uses simple macrotask/microtask queues.

A micro-frontend shell requires a decoupled, secure event bus for cross-application communication:

• Decoupling: Apps should communicate strictly via event messages, avoiding direct dependencies or shared variables.
• Type-Safety: Use TypeScript interfaces to enforce event payload contracts, preventing applications from sending invalid data shapes.
• Memory Management: Event handlers must be unregistered when micro-frontends unmount to prevent memory leaks.

class EventBus {
  private listeners = new Map();

  publish(event, payload) {
    const handlers = this.listeners.get(event);
    if (handlers) {
      handlers.forEach(fn => fn(payload));
    }
  }

  subscribe(event, callback) {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, new Set());
    }
    this.listeners.get(event).add(callback);
    return () => this.listeners.get(event).delete(callback); // Return unsubscribe fn
  }
}

While SOLID was created for statically typed languages, its principles are highly relevant to JavaScript development:

• Single Responsibility: Modules should export single functions or classes focused on a single task, avoiding bloated utility scripts.
• Open/Closed: Extend component behaviors using functional delegation or composition instead of modifying original constructor definitions.
• Liskov Substitution: Ensure subclasses respect the parent class's contract, avoiding overriding methods with incompatible argument signatures.
• Interface Segregation: JS lacks native interfaces, but we can enforce contracts using duck typing or parameter validation checks.
• Dependency Inversion: Inject dependencies as parameters or use DI containers rather than importing concrete service classes directly.

An offline-first architecture uses service workers and local databases to handle network connectivity shifts:

• Service Worker: Intercepts network fetches. Uses caching strategies like Stale-While-Revalidate or Cache-First for static assets.
• IndexedDB: Stores structured application data locally (e.g. drafts, logs) because LocalStorage is synchronous and size-limited.
• Sync Engine: Uses the browser's Background Sync API to queue actions while offline, sending them to the server automatically when connection is restored.

A performance library must capture browser metric shifts without impacting page loading performance:

• PerformanceObserver: Use this API to listen to performance events (like paint events, layout shifts, user interactions) asynchronously.
• Beacon API: Send collected data using navigator.sendBeacon(). This sends data asynchronously in the background when the user closes the page, preventing request cancellation.

// Listen for cumulative layout shifts (CLS)
let clsScore = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      clsScore += entry.value;
    }
  }
}).observe({ type: 'layout-shift', buffered: true });

// Send results on page exit
window.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/api/analytics', JSON.stringify({ cls: clsScore }));
  }
});

Building a compiler requires three main pipeline steps:

• Lexical Analyzer (Lexer): Scans the source code string and breaks it down into a list of syntax tokens (e.g. keyword, identifier, operator).
• Syntactic Analyzer (Parser): Processes tokens sequentially and builds an Abstract Syntax Tree (AST) representing the code structure.
• Evaluator (Interpreter): Recursively traverses the AST nodes to execute code instructions, or generates target assembly/JS bytecode.

A secure authentication flow requires splitting token responsibilities:

• Access Token: Short-lived JWT (e.g. 15 minutes). Stored in memory (JavaScript variable) to prevent XSS theft. Passed in the Authorization: Bearer header.
• Refresh Token: Long-lived token. Stored in an HttpOnly, Secure, SameSite=Strict cookie, making it inaccessible to client-side scripts (XSS proof).
• Silent Refresh: When the access token is about to expire, the client sends a background request to the token endpoint. The browser automatically appends the refresh cookie, generating a new access token without requiring user interaction.

60fps rendering requires drawing a new frame every 16.6ms. To prevent rendering lag:

• OffscreenCanvas: Render charts on an OffscreenCanvas inside a Web Worker, freeing up the main thread to handle user interactions.
• Avoid Object Allocation: Avoid creating new object instances (e.g. coordinate objects, arrays) in the rendering loop to prevent garbage collection pauses. Use pre-allocated, flat TypedArrays instead.
• RequestAnimationFrame: Coordinate main-thread drawings with the browser's refresh rate using requestAnimationFrame().

A DI container resolves class dependencies recursively based on registered token maps:

• Registry: A map storing provider tokens linked to factory functions or class definitions.
• Resolution: A method that parses class constructor parameters (using reflection metadata or parameter parsing) and instantiates them recursively, caching singleton instances.

class Injector {
  private registry = new Map();
  private singletons = new Map();

  register(token, klass) {
    this.registry.set(token, klass);
  }

  resolve(token) {
    if (this.singletons.has(token)) return this.singletons.get(token);
    const klass = this.registry.get(token);
    // Determine constructor dependencies recursively
    const instance = new klass(); 
    this.singletons.set(token, instance);
    return instance;
  }
}

By default, Array.prototype.sort() converts elements to strings and compares their UTF-16 code unit values. Because "10" starts with "1", it is sorted before "2" alphabetically.

Solution: Pass a custom comparison function: arr.sort((a, b) => a - b).

These properties serve different roles in prototype inheritance:

• prototype: A property on constructor functions used to define methods shared by all instances created with new.
• __proto__: A getter/setter accessor on objects pointing to their active prototype instance.
• V8 De-optimization: Modifying __proto__ at runtime alters an object's prototype chain dynamically. This invalidates all optimized machine code and shapes (hidden classes) cached by V8, forcing execution back to the slow bytecode interpreter.

In ECMAScript, NaN (Not-a-Number) represents invalid numerical calculations, but its primitive type is still numeric. According to IEEE 754 floating-point standards, NaN compares unequally to all values, including itself.

Solution: Use Number.isNaN(val), which verifies if the value is NaN without coercion. Avoid global isNaN() because it coerces inputs to numbers, producing false positives (e.g. isNaN('hello') is true).

JavaScript numbers are stored as 64-bit floating-point values according to IEEE 754 standards. Values like 0.1 and 0.2 cannot be represented exactly in binary fractional notation, which leads to rounding errors (e.g. 0.1 + 0.2 yields 0.30000000000000004).

Solutions: Compare differences against a small tolerance value: Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON, or multiply values to integers before calculations. Use libraries like decimal.js for financial operations.

These variables handle scope and binding differently inside loops:

• var: Function-scoped. The loop shares a single variable binding in memory. All closures created inside the loop point to this single reference, which holds the final loop value.
• let: Block-scoped. The engine creates a new variable binding for each loop iteration, copying the previous value over. Each closure captures a unique block scope containing that iteration's value.

This unexpected result is caused by argument mismatches between the two functions:

• map() passes three arguments to its callback: (value, index, array).
• parseInt() accepts two arguments: (string, radix).
• During execution, map passes indices to parseInt as radix arguments:
  - Index 0: parseInt('1', 0) → Radix 0 defaults to base 10 (returns 1).
  - Index 1: parseInt('2', 1) → Radix 1 is invalid (returns NaN).
  - Index 2: parseInt('3', 2) → '3' is invalid in binary (returns NaN).

Fix: Explicitly pass arguments: arr.map(num => parseInt(num, 10)).

The Temporal Dead Zone (TDZ) is the period from the start of a block scope until the variable is initialized.

• Undeclared Variables: Resolves dynamically. Since the engine has no reference to it, typeof safely returns "undefined".
• Declared with Let/Const: The compiler registers the variable but places it in the TDZ. Accessing it (even via typeof) before its initialization throws a ReferenceError.

The JSON standard only supports basic data types (strings, numbers, booleans, objects, arrays, and null). Because functions, symbols, and undefined values are not part of the JSON specification, JSON.stringify() strips them from object properties (or converts them to null inside arrays).

Serialization: Pass a custom replacer function as the second argument to JSON.stringify() to format these values manually. For example, convert functions to string templates.

A single-page application experiences slow performance over time. Heap snapshots show that DOM nodes deleted from the page are still retained in memory.

Detached DOM nodes occur when an HTML element is removed from the DOM tree, but a JavaScript reference (like an active event listener or global variable) still points to it. Because of this reference, the garbage collector cannot reclaim the memory, leading to a memory leak.

• Remove event listeners using removeEventListener before removing elements from the DOM.
• Use weak references (WeakRef or WeakMap) when binding metadata to DOM elements.

Users typing in a search bar report that the results shown sometimes match older search queries rather than their final query.

API requests resolve at different times depending on network latency. If an earlier request (e.g. search for 'abc') takes longer than a subsequent request (e.g. search for 'abcd'), the first request will resolve last, overwriting the UI with outdated results.

• Cancel pending requests when triggering new ones using AbortController.
• If using RxJS, use the switchMap operator to automatically cancel previous request streams.

A dashboard application freezes for several seconds when loading heavy reports, making the page unresponsive to clicks.

JSON.parse() is synchronous and runs on the browser's main thread. Parsing massive JSON payloads (e.g. 50MB reports) blocks the main thread, stopping the event loop and freezing user interactions.

• Offload parsing to a **Web Worker**, resolving the parsed objects back to the main thread via message channels.
• Use streaming JSON parsers to parse chunks of data progressively.

An image-sharing portal frequently crashes on mobile browsers (especially Safari on iOS) when loading high-resolution images.

Creating image object URLs using URL.createObjectURL(blob) caches the blob data in memory. Unlike standard variables, these URL references are not garbage-collected automatically when DOM elements are removed. If they are not revoked, memory usage accumulates, crashing mobile browsers with strict memory limits.

• Revoke image URLs using URL.revokeObjectURL(url) once the image element has finished loading.
• Convert blobs to Base64 data URLs or use streams to minimize memory usage.

A security audit reveals that a malicious script injected via an XSS exploit was able to steal user session tokens and hijack accounts.

The application stored JWT session tokens in LocalStorage. Because LocalStorage is accessible by any script running on the page, the XSS exploit was able to read the token using localStorage.getItem('token') and send it to an attacker's server.

• Store session tokens in secure, HttpOnly cookies to prevent access via JavaScript.
• If cookies cannot be used, store tokens in memory (JavaScript state variables) and use silent refresh endpoints to fetch new tokens.

A data visualization app freezes and crashes with a RangeError: Maximum call stack size exceeded when copying complex data models.

The deep copy function recursively copies nested properties. If an object contains a circular reference (pointing back to itself or a parent element), the function recurses indefinitely, exhausting the call stack.

• Track visited objects using a WeakMap cache. If an object has already been copied, return the cached clone instead of recursing again.
• Use built-in alternatives like structuredClone(), which handle circular references automatically.

Write a throttle function that restricts execution rate, support options for leading (run at the start of the window) and trailing (run at the end of the window) executions.

function throttle(fn, wait, options = {}) {
  let timerId = null;
  let lastArgs = null;
  let lastThis = null;
  let lastCallTime = 0;

  const invoke = () => {
    fn.apply(lastThis, lastArgs);
    lastCallTime = Date.now();
    timerId = null;
  };

  return function (...args) {
    lastArgs = args;
    lastThis = this;
    const now = Date.now();
    const remaining = wait - (now - lastCallTime);

    if (remaining <= 0) {
      if (timerId) {
        clearTimeout(timerId);
        timerId = null;
      }
      if (options.leading !== false) {
        invoke();
      }
    } else if (!timerId && options.trailing !== false) {
      timerId = setTimeout(invoke, remaining);
    }
  };
}

Implement a queue manager that accepts an array of asynchronous task factories and executes them, ensuring that no more than N tasks run concurrently.

async function limitConcurrency(tasks, limit) {
  const results = [];
  const executing = new Set();

  for (const [index, task] of tasks.entries()) {
    const p = Promise.resolve().then(() => task()).then(res => {
      results[index] = res;
      executing.delete(p);
    });
    executing.add(p);
    
    if (executing.size >= limit) {
      await Promise.race(executing); // Wait for any task to finish
    }
  }
  await Promise.all(executing); // Wait for remaining tasks
  return results;
}

Create a pub/sub event dispatcher class supporting on(), off(), once(), and emit() methods.

class EventEmitter {
  constructor() {
    this.events = new Map();
  }

  on(name, listener) {
    if (!this.events.has(name)) this.events.set(name, new Set());
    this.events.get(name).add(listener);
    return this;
  }

  emit(name, ...args) {
    const listeners = this.events.get(name);
    if (listeners) {
      listeners.forEach(fn => fn(...args));
    }
  }

  off(name, listener) {
    const listeners = this.events.get(name);
    if (listeners) {
      listeners.delete(listener);
    }
  }

  once(name, listener) {
    const wrapper = (...args) => {
      this.off(name, wrapper);
      listener(...args);
    };
    this.on(name, wrapper);
  }
}

Write a recursive function that flattens a nested object structure, concatenating nested keys using dot notation.

function flattenObject(obj, prefix = '') {
  const result = {};
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      const newKey = prefix ? `${prefix}.${key}` : key;
      if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
        Object.assign(result, flattenObject(obj[key], newKey));
      } else {
        result[newKey] = obj[key];
      }
    }
  }
  return result;
}

Promise.allSettled() waits for all promises to resolve or reject, returning an array of objects detailing the outcome of each promise. To implement it using Promise.all(), map input promises to wrapper promises that resolve successfully, returning status and value payloads.

function allSettled(promises) {
  const wrappedPromises = promises.map(p => 
    Promise.resolve(p).then(
      value => ({ status: 'fulfilled', value }),
      reason => ({ status: 'rejected', reason })
    )
  );
  return Promise.all(wrappedPromises);
}

Implement these methods on Array.prototype without using built-in array methods. Use loops and respect original argument signatures.

Array.prototype.myMap = function(callback, thisArg) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    if (i in this) {
      result[i] = callback.call(thisArg, this[i], i, this);
    }
  }
  return result;
};

Using the delete keyword on object properties de-optimizes property accesses in V8:

• Shape Invalidation: Objects share internal shape maps (hidden classes) to speed up property accesses. Deleting a property changes the object structure, invalidating its shape map.
• Dictionary Mode: V8 transitions the object to **Dictionary Mode** (slow key-value hash map lookup) to prevent shape-change cascades. Property lookups bypass optimizations, running significantly slower.

Instead of deleting, assign properties to undefined or use destructuring to create a new object shape without the target property.

V8 uses **Inline Caching (IC)** to optimize property accesses by caching property offsets for specific hidden classes (shapes).

• Polymorphism: If elements in an array have different shapes (e.g. properties added in different order), the inline cache becomes polymorphic or megamorphic.
• Performance: V8 must check multiple shape signatures at runtime, which slows down property lookups compared to monomorphic cache access.

A generator maintains a reference to its local execution scope (closure) while it is paused. If an asynchronous loop pulls values from a generator but exits early (e.g. via break or return) without executing to completion, the generator remains suspended. Because it is suspended, V8 preserves its entire scope closure (including variables, arguments, and in-flight promises) in memory, creating a memory leak.

Resolution: Always call generator.return() in cleanup blocks or use for await...of loops, which trigger generator disposal automatically on break.

Altering prototypes at runtime using Object.setPrototypeOf() is a slow operation in all modern JavaScript engines. It invalidates cached prototype chains and object shape lookups throughout the application. All functions that have optimized access to the object are de-optimized and compiled back to slower execution paths.

Alternative: Define prototype structures at creation time using Object.create() instead of modifying them later.

Calling eval() or new Function() compiles strings to machine code dynamically at runtime. Executing this in a loop prevents V8's optimizing compilers (TurboFan) from performing compile-time optimizations (like inline caching, scope parsing, or dead-code elimination) because scopes and variables change on every run.

In older V8 engines, passing the arguments object outside a function (e.g. Array.prototype.slice.call(arguments)) caused 'arguments leakage'. Because the arguments object provides dynamic access to local scope properties, passing it outside prevented V8 from optimizing variable allocations on the stack, forcing it to allocate scope on the heap instead.

Modern V8: The optimizing compiler now supports rest parameters (...args) natively, which optimizes array allocations without heap escape analysis issues.

Array.from() builds a complete, contiguous array in memory synchronously. For massive lengths, this blocks the main thread during allocation and initialization, freezing user interactions.

Generators: By yielding values lazily using generator functions, you process elements one at a time without allocating large arrays in memory, keeping execution light and responsive.

Historically, V8's optimizing compiler (Crankshaft) did not support try/catch blocks. Any function containing a try/catch block was marked as de-optimized and could not be inlined into parent call stacks. This introduced function call overhead and restricted compiler optimizations.

Modern V8: The TurboFan compiler supports try/catch natively, but keeping try/catch blocks small remains a best practice to avoid de-optimizations in hot loops.

V8 allocates arrays as contiguous memory slots to speed up index lookups. If you assign an element to a large index (e.g. arr[1000000] = 1) on a small array, allocating a million empty memory slots is highly inefficient. V8 converts the array to **Dictionary Mode**, storing index-value pairs as a hash table in memory. While this saves memory, it makes index lookups significantly slower.

A standard Map maintains strong references to both its keys and values. If you delete all variables referencing a key object, the Map still holds a reference to it in memory. As a result, the key object and its value cannot be garbage-collected, which leads to a memory leak. Use a WeakMap instead to allow garbage collection.

Browsers preserve references to objects logged in the developer console so users can inspect their properties dynamically. Because the console holds active references, the logged objects cannot be garbage-collected. Logging objects repeatedly inside high-frequency loops causes memory usage to grow continuously, which can crash the browser tab.

The event loop runs microtasks continuously until the microtask queue is empty. If an asynchronous function repeatedly schedules new microtasks (e.g. recursive Promise resolves), the event loop remains stuck in the microtask phase. Because it is stuck, it never reaches the macrotask or rendering phases, which freezes the browser and stops layout updates.

Macrotask Scheduling: Using setTimeout yields execution control back to the event loop, allowing the browser to render updates between iterations.

These module systems handle imports and bindings differently:

• ES Modules (ESM): Resolves imports as **read-only live bindings**. During static analysis, module references are linked before code execution. This allows circular imports to resolve correctly once modules evaluate.
• CommonJS (CJS): Evaluates modules sequentially. require() returns a copy of the exported object. If circular dependency occurs, require returns an incomplete, partially evaluated object, leading to undefined exports.

Spectre side-channel attacks exploit timing differences in CPU caches to read secure memory values. Attackers require high-precision timers to execute these exploits. To mitigate this risk, browser vendors reduce the precision of performance.now() (e.g. rounding timestamps to the nearest 5-10 microseconds) and introduce random jitter to prevent micro-timing attacks.

Creating functions or closures inside a high-frequency rendering loop (running 60 times per second) allocates new function objects in memory on every frame. This rapid object allocation quickly fills the young generation memory space, triggering frequent scavenger garbage collection runs (GC thrashing). This blocks the main thread, causing frame rate drops (jank) and laggy animations.

Resolution: Define helper functions outside the rendering loop and pass necessary data as arguments to avoid creating closures on every frame.

Calling Function.prototype.bind.call() creates direct, optimized context bindings in the engine. This avoids the overhead of creating additional JavaScript closures and wrapping nested functions, allowing V8 compilers to inline function executions directly.

According to ECMAScript specifications, object properties are ordered based on key type during iteration (e.g. Object.keys(), JSON.stringify()):

• Integer keys: Sorted in ascending numerical order.
• String keys: Ordered in chronological insertion order.
• Symbol keys: Sorted in chronological insertion order.

The Trap: Mixing numeric and string keys can lead to unexpected property ordering during serializations.