JavaScript & ECMAScript Technical Interview Master
Curated 80+ senior frontend questions covering V8 engine internals, Event Loop, Closures, Promises, Prototypal Inheritance, and Coding rounds.
Difficulty Filters
Tools & Options
What are JavaScript Data Types? Explain Primitive vs Reference types and memory allocation.
JavaScript has 8 fundamental data types, categorized into Primitives and Reference Types:
1. Primitive Types (7 types):
- string, number, bigint, boolean, undefined, symbol, null.
- Memory Storage: Stored directly in the Call Stack memory space because their sizes are fixed and immutable.
- Assignment: Passed by VALUE (copy of the value is created).
- Immutability: You cannot mutate a primitive value (e.g. str[0] = 'X' silently fails in non-strict mode).
2. Reference Types (Objects):
- Object, Array, Function, Date, RegExp, Map, Set.
- Memory Storage: The actual object data is stored on the Memory Heap (dynamic size). The Call Stack stores only a pointer/reference (memory address) to the heap location.
- Assignment: Passed by REFERENCE (both variables point to the exact same heap memory address). Mutating one variable mutates both!
The typeof null Bug (Classic Interview Question):
typeof null returns "object". This is an acknowledged legacy bug in JavaScript dating back to its first release in 1995. Internally, JS stored type tags in the lower 3 bits of units; object was 000, and null was represented as a NULL pointer (all zeroes), causing the engine to misidentify null as an object.
// 1. Primitive: Passed by Value
let a = 10;
let b = a;
b = 20;
console.log(a); // 10 (Unchanged)
// 2. Reference: Passed by Reference
let user1 = { name: "Alice", role: "Dev" };
let user2 = user1; // Copies pointer address
user2.name = "Bob";
console.log(user1.name); // "Bob" (Mutated!)
// Accurate Type Checking Helper
function getType(val) {
if (val === null) return 'null';
return typeof val;
}Explain the difference between var, let, and const in terms of scope, hoisting, and the Temporal Dead Zone (TDZ).
The introduction of let and const in ES6 (ES2015) modernized variable declarations in JavaScript:
1. Scope:
- var: Function-scoped (or globally scoped). Ignores block boundaries like if, for, while.
- let & const: Block-scoped ({ ... }). Confined strictly to the enclosing curly braces.
2. Hoisting & Initialization:
- var: Hoisted to the top of its enclosing function and immediately INITIALIZED with undefined. You can read it before its declaration line without throwing an error (returns undefined).
- let & const: Hoisted to the top of their block, but NOT INITIALIZED. They remain in an uninitialized state until execution physically reaches the declaration line.
3. Temporal Dead Zone (TDZ):
- The region of code between the start of the enclosing block scope and the line where let or const is declared.
- Attempting to access or read the variable within the TDZ throws a ReferenceError: Cannot access 'x' before initialization.
4. Reassignment & Mutation:
- var: Can be redeclared and reassigned.
- let: Cannot be redeclared within the same scope; can be reassigned.
- const: Cannot be redeclared or reassigned. Must be initialized at declaration.
- Note: const prevents reassigning the variable identifier; it does NOT freeze object contents (object properties remain mutable).
// 1. Scope Demonstration
if (true) {
var globalVar = "I leak outside block";
let blockLet = "I stay inside block";
}
console.log(globalVar); // "I leak outside block"
// console.log(blockLet); // ReferenceError: blockLet is not defined
// 2. Temporal Dead Zone (TDZ)
function testTDZ() {
// --- TDZ for 'myConst' starts here ---
// console.log(myConst); // Throws ReferenceError!
// --- TDZ ends here ---
const myConst = 42;
console.log(myConst); // 42
}
testTDZ();What is Hoisting in JavaScript? How does it treat Variable Declarations vs Function Declarations vs Function Expressions?
Hoisting is the JavaScript engine's compile-phase behavior where variable and function declarations are scanned and allocated in memory before the code is executed line-by-line.
Hoisting Hierarchy:
1. Function Declarations (Full Hoisting):
- Both the function identifier AND its complete body implementation are hoisted into memory during compilation.
- You can invoke a declared function BEFORE its definition in the source code!
2. Variable Declarations with var:
- Only the declaration is hoisted and initialized to undefined. The assignment remains in place.
3. Variable Declarations with let and const:
- The identifier is registered in the lexical scope, but remains in the Temporal Dead Zone (uninitialized) until evaluated.
4. Function Expressions & Arrow Functions:
- Follow standard variable hoisting rules. If assigned to var, the variable is undefined during early calls (invoking it throws TypeError: x is not a function). If assigned to const/let, invoking it early throws a ReferenceError.
// 1. Function Declaration: Works perfectly!
greet(); // "Hello World"
function greet() {
console.log("Hello World");
}
// 2. Function Expression with var: Throws TypeError!
// sayHi(); // TypeError: sayHi is not a function
var sayHi = function() {
console.log("Hi");
};
// 3. Variable Hoisting with var
console.log(num); // undefined (Hoisted, but assignment hasn't run)
var num = 100;
console.log(num); // 100Explain Closures in JavaScript, how they capture lexical scope, and common memory leak pitfalls.
How does the 'this' keyword resolve in JavaScript? Explain the 4 Binding Rules: Default, Implicit, Explicit, and New.
Explain the difference between call(), apply(), and bind() with production code examples.
Explain Type Coercion in JavaScript: Implicit vs Explicit, and == (Loose Equality) vs === (Strict Equality).
Explain Array Prototype Higher-Order Methods: map, filter, reduce, some, every, find, and forEach.
What is the difference between Object.freeze() and Object.seal()?
What is an IIFE (Immediately Invoked Function Expression) and why was it essential before ES6 Modules?
Explain the JavaScript Event Loop, Call Stack, Web APIs, Microtask Queue, and Macrotask Queue in detail.
Explain Promise states, methods (Promise.all, allSettled, race, any), and error handling mechanics.
How does async/await work under the hood? Explain how Generators and Promises compile async functions.
What is Event Bubbling, Event Capturing (Trickling), and Event Delegation? Explain event.stopPropagation() vs event.stopImmediatePropagation().
Explain Debouncing vs Throttling with real-world frontend use cases and implementations.
Explain Prototypal Inheritance, the Prototype Chain, and the difference between __proto__ and prototype.
How do you deep clone an object in JavaScript? Compare JSON.parse(JSON.stringify()), structuredClone(), and custom recursion.
What are ES6 Modules (ESM) vs CommonJS (CJS) and how do their loading and execution models differ?
What is the Proxy and Reflect API in JavaScript and how does it power modern reactivity systems (Vue 3)?
What are WeakMap and WeakSet and how do they differ from Map and Set regarding Garbage Collection?
Explain V8 Engine Internals: Ignition Bytecode Interpreter, TurboFan JIT Compiler, Hidden Classes, and Inline Caching.
Explain Garbage Collection in JavaScript: Mark-and-Sweep algorithm, generational collection (Scavenger vs Mark-Sweep), and common memory leak vectors.
What are Web Workers, SharedArrayBuffer, and Atomics? How do you achieve true multithreading in JavaScript?
Explain requestAnimationFrame vs requestIdleCallback: when should each be used for high-performance frontends?
Explain the Intersection Observer, Mutation Observer, and Resize Observer APIs.
Coding Scenario: Implement a complete Polyfill for Promise.all() adhering to the ECMAScript specification.
Coding Scenario: Implement an LRU (Least Recently Used) Cache with O(1) get() and put() time complexity.
Coding Scenario: Implement an Event Emitter / PubSub class supporting on, emit, off, and once.
Coding Scenario: Implement a Currying function that handles variable arguments: curry(fn).
Coding Scenario: Implement an auto-retry fetch utility with Exponential Backoff and Jitter.
Technical Interview Mastery Blueprint
Proven methodologies and frameworks to succeed in technical and architecture rounds.
1. The Engineering STAR Technique
When responding to architectural or situational questions, structure your answer using Situation, Technical Constraint, Action, and Measurable Result. Rather than jumping straight to syntax, articulate the business problem, why certain patterns (e.g. caching, queuing, immutability) were selected over alternatives, and what latency or throughput improvements were achieved.
2. Defending Architectural Trade-Offs
Senior interviewers evaluate how you weigh trade-offs. Always explain why you chose an approach: e.g., memory overhead vs CPU cycle speed, consistency vs availability (CAP theorem), or normalized schemas vs denormalized fast reads. Stating the drawbacks of your own proposal demonstrates maturity and production experience.
3. Clean Code & Edge-Case Proactivity
In live-coding rounds, communicate your thinking aloud before typing. State edge cases explicitly: null or undefined inputs, extreme boundary values, concurrency races, and network timeouts. Writing modular, well-named functions with deterministic unit tests separates junior candidates from staff-level engineers.
4. Antipatterns to Avoid
Avoid reciting memorized definitions without practical context. Never dismiss non-functional requirements such as security (CSRF, injection, token rotation), observability (logging, metrics), and accessibility (ARIA, semantic standards). Always ask clarifying scope questions before writing complex implementations.
Explore Related Tools
Hand-picked utilities and calculators related to this tool.