DEVPREP CODEX · #11

JavaScript Interview Questions

171 curated questions graded from Foundations (Easy) to Practical Patterns (Medium) and Internals & Architecture (Hard).

TOTAL QUESTIONS

171

THEORY QUESTIONS

150

IMPLEMENTATION FOLIOS

FREE QUESTIONS

5 / Level

Easy Level·57 Questions Total

Foundations & Core Concepts

Open Full Easy List

Q1Explain the differences between Primitive and Reference types. How are they stored in memory, and how does `typeof` differ from `instanceof`?

Primitive Types: undefined, null, boolean, number, string, symbol, and bigint. Stored directly in the stack memory. They are immutable and compared by value.
Reference Types: Objects, arrays, functions, maps, and sets. Stored in the heap memory; the variable in the stack holds a pointer/reference to the heap location. They are mutable and compared by reference pointer.
typeof: An operator that returns a string representing the data type of an unevaluated operand. Best for primitives (e.g., typeof "hello" === "string"), but returns "object" for null, arrays, and plain objects.
instanceof: An operator that tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object (e.g., arr instanceof Array === true). Only works for objects/reference types.

Q2What is Scope in JavaScript? Compare Global, Function, and Block scopes.

Scope: Determines the accessibility (visibility) of variables within different parts of the code.
Global Scope: Variables declared outside any function or block. Accessible from anywhere in the application.
Function (Local) Scope: Variables declared inside a function (using var, let, or const). Accessible only within that function.
Block Scope: Variables declared inside a block {} using let or const. They cannot be accessed outside that block. var does not respect block scope.

Q3Explain Hoisting and the Temporal Dead Zone (TDZ).

Hoisting: The default behavior of the JS interpreter where variable and function declarations are moved to the top of their containing scope before code execution.
var hoisting: Initialized with undefined. Accessible before declaration.
let/const hoisting: Hoisted but not initialized. Accessing them before declaration throws a ReferenceError.
Function hoisting: Full function declarations are hoisted, making them callable before their definition in the code. Function expressions are not.
Temporal Dead Zone (TDZ): The period between block entry and variable initialization where accessing a let or const variable throws a ReferenceError.

Q4Compare `var`, `let`, and `const` in terms of scoping, hoisting, and re-assignment.

Feature	`var`	`let`	`const`
Scope	Function scope	Block scope	Block scope
Hoisting	Yes (initialized as `undefined`)	Yes (uninitialized, TDZ active)	Yes (uninitialized, TDZ active)
Re-assignment	Allowed	Allowed	Not Allowed
Redeclaration	Allowed within same scope	Not Allowed	Not Allowed

Q5What is a Closure? Provide a short example of why it is useful.

Closure: A function that retains access to its lexical scope (outer variables) even when the function is executed outside that scope.
Mechanism: Created automatically when an inner function is defined inside an outer function, capturing the outer function's environment.
Use Cases: Data privacy/encapsulation (private variables), state maintenance, currying, and memoization.

Example:

function createCounter() {
  let count = 0;
  return () => ++count;
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

52 More Easy Questions Locked

Unlock the complete JavaScript Easy question bank

Get instant access to all 57 questions, in-depth model answers, code sandboxes, and all 27+ technologies for a single one-time payment.

Unlock All — One-time payment · Lifetime access

Medium Level·57 Questions Total

Mechanisms & Practical Patterns

Open Full Medium List

Q1Explain the Event Loop architecture in detail. Describe execution priority between Macrotasks, Microtasks, and Browser Rendering.

Event Loop: Monitors the Call Stack. If the stack is empty, it flushes the Microtask Queue before running the next Macrotask.
Macrotasks: Timer callbacks (setTimeout, setInterval), I/O, UI rendering events, setImmediate (Node).
Microtasks: High-priority callbacks (Promise.then/catch/finally, MutationObserver, queueMicrotask, process.nextTick in Node).
Execution Priority:
1. Run a single Macrotask (e.g., initial script file execution).
2. Run all microtasks in the Microtask Queue until it is completely empty. New microtasks added during execution are also run in the same cycle.
3. Perform browser rendering updates (layout, paint, style recalculation) if a frame refresh is scheduled.
4. Move to the next Macrotask in the queue.

Q2How does Prototypal Inheritance work? Compare `__proto__` and `prototype`.

Prototypal Inheritance: Objects inherit properties and methods from other objects via a prototype chain. When accessing a property, JS travels up __proto__ links until it finds the property or reaches null.
__proto__: An accessor property on object instances pointing to their active prototype link (used for runtime lookup).
prototype: A property that exists only on constructor functions and classes. It becomes the __proto__ of any instance created with new.
ES6 Classes compilation: Syntactic sugar over prototype delegation. It compiles to constructor functions with methods attached to .prototype.

Q3How is the `this` keyword resolved at runtime? List the exact priority rules.

Definition: this refers to the execution context. Its value is determined at call-time based on the following rules:
1. new Binding: If called with new, this points to the new instance.
2. Explicit Binding: If called with .call(), .apply(), or .bind(), this points to the specified object.
3. Implicit Binding: If called as a method (e.g., obj.method()), this points to obj.
4. Default Binding: If called stand-alone, this is undefined in strict mode, or the global object (window/global) in non-strict mode.
5. Arrow Functions: Bypass these rules; they inherit this lexically from their outer block scope.

Q4Explain Lexical Scoping and Closures under the hood. How does the execution context maintain references?

Lexical Scoping: The scope of a variable is determined by its physical position in the source code during compiling, not execution.
Execution Context: Consists of a Variable Environment and a Lexical Environment. When a function is invoked, its execution context is pushed onto the call stack.
Closure under the hood: When a function returns an inner function, the inner function holds a reference to the outer Lexical Environment via [[Scopes]]. This prevents the garbage collector from freeing the memory of the outer environment, maintaining access to outer variables.

Q5What is Currying? How does it differ from Partial Application?

Currying: A functional programming pattern that transforms a function taking multiple arguments f(a, b, c) into a chain of nested unary functions returning one another, e.g., f(a)(b)(c).
Partial Application: Fixing a subset of arguments on a function, returning a new function that takes the remaining arguments, e.g., converting f(a, b, c) into g(b, c) by pre-filling a.

52 More Medium Questions Locked

Unlock the complete JavaScript Medium question bank

Get instant access to all 57 questions, in-depth model answers, code sandboxes, and all 27+ technologies for a single one-time payment.

Unlock All — One-time payment · Lifetime access

Hard Level·57 Questions Total

Internals & System Architecture

Open Full Hard List

Q1Explain Memory Management and Garbage Collection in the V8 engine. How are young and old spaces handled?

Generational Hypothesis: Most objects die young. V8 divides its heap accordingly:
New Space (Young Generation): Holds short-lived objects (1MB - 64MB). Uses Cheney's copying algorithm (Scavenger). Splits memory into active "From" and inactive "To" semispaces. Fast, frequent collections copy surviving objects to the "To" space, swap the spaces, and promote long-surviving objects to the Old Space.
Old Space (Old Generation): Holds long-lived objects. Uses the Mark-Sweep-Compact algorithm:
- Marking: Traverses GC roots (stack, globals, DOM) to recursively mark reachable objects.
- Sweeping: Iterates unreferenced memory to free unreachable space.
- Compacting: Shifts remaining active blocks together to eliminate memory fragmentation.
Incremental & Concurrent Marking: V8 runs marking in small slices in parallel with main-thread execution to prevent long UI freeze pauses.

Q2How do `WeakMap` and `WeakSet` prevent memory leaks compared to standard collections?

Strong References: Standard Map and Set hold strong references to their entries. If an object is used as a key/member, it cannot be garbage-collected, even if all other external references to it are deleted.
Weak References: WeakMap and WeakSet hold weak references to their object keys.
GC Interaction: If no strong references to a key object remain outside the weak collection, the garbage collector will reclaim the object's memory and automatically destroy the corresponding map entry during the next GC cycle.
Use Cases: Storing private DOM element metadata, or memoizing expensive computational results without blocking memory cleanup.

Q3Explain the V8 compilation pipeline: JIT, Ignition, TurboFan, Hidden Classes, and Inline Caches.

V8 Pipeline: Source -> AST -> Ignition Interpreter -> Bytecode -> TurboFan Optimizer -> Machine Code.
Ignition: Quickly generates lightweight bytecode for rapid initial app startup.
TurboFan: Monitors execution profiles. Hot functions with stable parameter types are compiled into native machine code. If parameter types mutate later, TurboFan performs a Deoptimization and falls back to bytecode.
Hidden Classes (Shapes): V8 assigns hidden classes to objects. If objects add identical properties in the same order, they share a shape, allowing JIT to locate properties via memory offsets rather than slow hash lookups.
Inline Caches (ICs): ICs speed up property lookups by caching physical memory offsets of properties mapped to specific object shapes directly at the property access call site.

Q4Detail the Binary Data Pipeline and Stream architecture in modern JS.

ArrayBuffer: Represents a fixed-length, contiguous block of raw binary data. Cannot be read or modified directly.
TypedArrays: Views (e.g., Uint8Array, Float64Array) providing typed numeric read/write capabilities on an ArrayBuffer.
DataView: A flexible view capable of reading/writing heterogeneous numeric types at arbitrary byte offsets inside an ArrayBuffer, with explicit Big-Endian/Little-Endian control.
Blob: Immutable container for raw, file-like binary data.
Streams API: Processes data incrementally (in chunks) to reduce memory footprints:
- ReadableStream: Emits chunks of incoming data (e.g., active fetch payloads).
- WritableStream: Directs sequential data chunks to a target destination.
- TransformStream: Connects readable and writable streams, modifying chunks mid-transit.

Q5Explain the Proxy and Reflect APIs. How do they build reactivity?

Proxy: Wraps a target object and intercepts low-level meta-operations (e.g., get, set, deleteProperty, apply).
Reflect: A global object providing static methods that match every Proxy trap. Replaces older object manipulations, handles receiver context binding, and returns boolean statuses rather than throwing exceptions on failures.
Reactivity Pattern (e.g., Vue 3):
- Get trap: Track dependencies. Records the active execution context (the "effect") as a dependent of that property.
- Set trap: Trigger updates. Runs all recorded dependent effects when the property value changes.