Loading compiler resources...
Ace senior and staff frontend engineering interviews with 25 deeply technical JavaScript questions and solutions. Covers the Event Loop, microtasks vs macrotasks, V8 hidden classes, closures, prototype pollution, memory leaks, and custom polyfills.
Amit Srivastava
Published on September 30, 2026
Senior and Staff frontend engineering interviews require more than reciting API syntax or writing basic algorithms. Interviewers assess your comprehension of the underlying JavaScript runtime: V8 engine heuristics, execution contexts, Event Loop scheduling phases, prototype delegation, and resilient asynchronous design.
This guide analyzes 25 advanced JavaScript interview questions frequently encountered in technical rounds, paired with concise summaries, architectural breakdowns, runnable code implementations, and key edge cases to look out for.
Quick Answer: The Event Loop executes JavaScript on a single thread by continuously processing:
Promise.then, queueMicrotask, MutationObserver): The microtask queue is drained completely before the browser moves on, even if microtasks schedule more microtasks.requestAnimationFrame): Executed right before the browser calculates style, layout, and repaints (if a render step is due).setTimeout, setInterval, setImmediate, I/O, UI events): Exactly one task is pulled from the macrotask queue.Detailed Breakdown: Consider this classic interview puzzle:
console.log('1: Sync Start');
setTimeout(() => {
console.log('2: setTimeout (Macrotask)');
}, 0);
Promise.resolve().then(() => {
console.log('3: Promise Microtask 1');
queueMicrotask(() => console.log('4: Nested queueMicrotask'));
}).then(() => {
console.log('5: Promise Microtask 2');
});
requestAnimationFrame(() => {
console.log('6: rAF (Render phase)'
Output Order:
1: Sync Start
7: Sync End
3: Promise Microtask 1
4: Nested queueMicrotask
5: Promise Microtask 2
6: rAF (Render phase) // Executes before paint
2: setTimeout (Macrotask)Why?
1 and 7 run synchronously on the call stack.3 executes, enqueuing 4. Next, 4 runs, followed by 5 (the chained promise).requestAnimationFrame (6) fires.2 (setTimeout).Interviewer Trap: Interviewers often ask: "What happens if a microtask recursively enqueues another microtask?" Answer: It starves the Event Loop! The browser will never reach the next macrotask or render phase, completely freezing the UI tab.
async/await function?Quick Answer:
async/await is syntactic sugar built on top of Generators and Promises. When the engine hits an await expr:
expr and wraps the result in Promise.resolve(expr).then() callback on the promise (queued in the Microtask Queue).Code De-sugaring:
// Modern async/await
async function loadUserData(userId) {
console.log('A: Loading');
const user = await fetchUser(userId);
console.log('B: Got User', user);
return user.name;
}
// How the JavaScript engine translates it conceptually:
function loadUserDataDesugared(userId) {
return new Promise((resolve, reject) => {
console.log('A: Loading'); // Runs synchronously until first await!
Promise.resolve(fetchUser(userId))
.
Interviewer Trap: Remember that code before the first
awaitinside anasyncfunction runs synchronously, not asynchronously!
scheduler.yield() solve the Long-Task problem?Quick Answer: Any continuous JavaScript task running on the main thread for more than 50ms is classified by Chromium as a Long Task. Long tasks block the main thread, causing dropped frames (jank) and high INP (Interaction to Next Paint).
Historically, developers yielded back to the browser using setTimeout(fn, 0). However, setTimeout has a minimum 4ms clamp and loses queue priority. Modern web engines provide scheduler.yield(), which yields control to the browser for user input and rendering, and immediately resumes the task as a high-priority task.
// Processing 50,000 heavy records without freezing the UI
async function processMassiveDataset(items) {
for (let i = 0; i < items.length; i++) {
processItem(items[i]);
// Yield every 5ms to maintain 60-120 FPS
if (performance.now() - lastYieldTime > 5) {
if ('scheduler' in window && 'yield' in window.scheduler) {
await window.scheduler.yield(); // Native cooperative multitasking!
} else {
await new Promise((resolve) => setTimeout
Quick Answer: While the browser Event Loop is governed by the WHATWG HTML standard with a single microtask queue and task queue, Node.js uses libuv, which structures execution into distinct sequential phases:
setTimeout and setInterval.setImmediate().socket.on('close')).Furthermore, Node.js features process.nextTick(), which executes in a dedicated nextTickQueue that drains before standard Promise microtasks between each phase!
// Node.js execution puzzle
setImmediate(() => console.log('1: setImmediate'));
setTimeout(() => console.log('2: setTimeout'), 0);
process.nextTick(() => console.log('3: nextTick'));
Promise.resolve().then(() => console.log('4: Promise'));
// Output in Node.js:
// 3: nextTick (Drains first before standard microtasks!)
// 4: Promise (Standard microtask)
// 2: setTimeout or 1: setImmediate (Depends on process startup timing)SharedArrayBuffer, and Atomics achieve thread-safe concurrency in JavaScript?Quick Answer:
JavaScript is single-threaded per realm, but Web Workers run on separate OS threads. Standard workers communicate by copying memory via postMessage (Structured Clone).
For zero-copy high-performance computing, SharedArrayBuffer shares a single block of raw binary memory between threads. To avoid data races, JavaScript provides the Atomics global object, which supplies atomic operations (Atomics.add, Atomics.compareExchange, Atomics.wait, Atomics.notify) that cannot be interrupted by another thread.
// Thread-safe counter across workers
const sharedBuffer = new SharedArrayBuffer(4); // 4 bytes for 1 Int32
const sharedArray = new Int32Array(sharedBuffer);
// Thread 1 (Worker A) atomically increments index 0
Atomics.add(sharedArray, 0, 1);
// Thread 2 (Worker B) atomically reads without race conditions
const value = Atomics.load(sharedArray, 0);
// Thread 3 can pause until notified (available only in Worker threads)
// Atomics.wait(sharedArray, index, expectedValue, timeoutMs);Quick Answer:
LexicalEnvironment, VariableEnvironment, and this binding.var and function declarations. In ES6+, it exists to maintain legacy scoping rules.let, const, class). Whenever a block { ... } begins, a new Lexical Environment is pushed onto the scope chain.The Temporal Dead Zone (TDZ): When an Execution Context is created, all declarations are hoisted:
var variables are hoisted and initialized to undefined.let and const variables are hoisted into the Lexical Environment, but remain uninitialized. Accessing them before their syntactic declaration throws a ReferenceError (TDZ).function scopeProof() {
// TDZ for 'a' starts here
// console.log(a); // ReferenceError: Cannot access 'a' before initialization
console.log(b); // undefined (var is initialized to undefined on creation)
let a = 10; // TDZ ends for 'a'
var b = 20;
}Quick Answer: A closure captures variables by reference, but if an asynchronous callback closes over a variable whose value is later replaced (or if a function captures a primitive value from an earlier scope instantiation), the callback reads the old value.
// The classic stale closure trap
function createRateLimiter(limit) {
let calls = 0;
return function makeCall() {
calls++;
setTimeout(() => {
// If 'calls' is inspected or cached here without care:
console.log('Calls count:', calls);
}, 1000);
};
}The 3 Architectural Solutions:
ref = { current: value }).(prev) => next so the latest state is injected by the consumer at execution time.Quick Answer: V8 uses a Generational Garbage Collector based on the Weak Generational Hypothesis: most objects die young. Memory is divided into:
V8 performs Concurrent Marking and Incremental Marking on background threads to prevent main-thread UI freezing.
Quick Answer:
element.remove(). The entire DOM subtree remains retained in heap memory.setInterval or window.addEventListener holding references to parent components in their closure scope.console.log(largeObject) retains largeObject indefinitely in memory because DevTools holds a live reference to it.const cache = {} instead of WeakMap or an LRU cache with an upper limit.// Memory leak: Detached DOM node retained in memory
let elements = {
button: document.getElementById('submit-btn'),
};
// Even if you remove it from the DOM:
document.body.removeChild(document.getElementById('submit-btn'));
// The DOM node CANNOT be garbage collected because 'elements.button' still holds it!
// Solution: Clean up references
elements.button = null;WeakMap and WeakSet not allow iteration, and why must keys be objects or non-registered symbols?Quick Answer:
In a standard Map, keys are held strongly. In a WeakMap, the reference from key to value is held weakly using Ephemeron tables. If there are no other strong references to the key object, the key and its associated value can be garbage-collected automatically.
Why no iteration or .size?
Whether an unreferenced key has been collected depends on the unpredictable timing of the engine's Garbage Collection passes. If WeakMap supported .keys() or .size, the output would vary depending on whether GC ran 1ms ago. JavaScript forbids non-deterministic API behavior linked to engine GC cycles.
// Storing private component metadata without memory leaks
const privateMetadata = new WeakMap();
class Widget {
constructor(domNode) {
// When domNode is deleted from the page, this entry is automatically GC'd!
privateMetadata.set(domNode, { clickCount: 0 });
}
}__proto__, prototype, and Object.getPrototypeOf().Quick Answer:
prototype: A property found only on functions/classes. It defines the blueprint of properties that will be assigned as the prototype of instances created via new MyFunc().__proto__: An accessor property on Object.prototype that exposes the internal [[Prototype]] link of an instance.Object.getPrototypeOf(obj): The official ECMAScript standard method to inspect an object's prototype.[ instance ] ---> [[Prototype]] ---> [ User.prototype ] ---> [[Prototype]] ---> [ Object.prototype ] ---> nullfunction User(name) { this.name = name; }
User.prototype.sayHi = function() { return this.name; };
const dev = new User('Amit');
console.log(dev.__proto__ === User.prototype); // true
console.log(Object.getPrototypeOf(dev) === User.prototype); // true
console.log(User.prototype.__proto__ === Object.prototype); // true
Quick Answer: JavaScript is dynamically typed, but the CPU needs fixed byte offsets in memory to read properties quickly. V8 solves this by dynamically creating internal Hidden Classes (Shapes).
When properties are added to an object in the same order, objects share the same Shape:
// Monomorphic shape: Consistent property initialization order (C0 -> C1 -> C2)
const p1 = {}; p1.x = 1; p1.y = 2;
const p2 = {}; p2.x = 10; p2.y = 20;
// Divergent shapes: Different property assignment order forces separate transition trees
const p3 = {}; p3.y = 1; p3.x = 2; // Different property order!Inline Caching (IC): V8 caches property lookup offsets at call sites:
Staff Engineer Rule: Never use
delete obj.propin performance-critical code!deletemutates the object shape into dictionary mode. Setobj.prop = undefinedinstead.
this keyword in JavaScript?Quick Answer:
this is evaluated at call time according to a strict 4-tier precedence hierarchy:
new Binding: If called with new, this points to the newly instantiated object..call(ctx), .apply(ctx), or .bind(ctx), this points to ctx.obj.method()), this points to the context object before the dot (obj).The Arrow Function Exception:
Arrow functions do not have their own this binding. They resolve this lexically from their enclosing scope. Because of this, calling .bind(), .call(), or .apply() on an arrow function has zero effect on this!
const obj = {
name: 'DeepFrontend',
getRegular: function() { return this.name; },
getArrow: () => this.name,
};
const detached = obj.getRegular;
console.log(detached()); // undefined (lost implicit binding!)
console.log(obj.getRegular.call({ name: 'Overridden' })); // 'Overridden'
console.log(obj.getArrow.call({ name: 'Overridden' })); // undefined (arrow ignores explicit binding!)Object.create(null) preferred over {} for dictionary maps, and what is Object.hasOwn()?Quick Answer:
A plain object literal {} inherits from Object.prototype. This introduces dangerous flaws when used as a dictionary:
"toString", "valueOf", or "__proto__" already exist on the prototype.obj.hasOwnProperty, breaking validation.Object.create(null) creates a completely pure dictionary with no prototype chain (__proto__ === undefined).
const safeMap = Object.create(null);
safeMap['key'] = 'value';
console.log(safeMap.toString); // undefined! (No prototype pollution)
// Modern standard (ES2022+):
// Object.hasOwn(obj, prop) safely checks property existence without prototype traversal:
const user = { name: 'Amit', hasOwnProperty: null }; // Malicious override
console.log(Object.hasOwn(user, 'name')); // true (Safe!)ToPrimitive algorithm resolve type coercion for + and ==?Quick Answer:
When JavaScript evaluates binary operations like obj1 + obj2 or abstract equality obj == 0, it invokes the internal ToPrimitive(input, preferredType) algorithm:
Symbol.toPrimitive method, it is executed.preferredType is "string": calls .toString() first; if that returns an object, calls .valueOf().preferredType is "number" or default: calls .valueOf() first; if that returns an object, calls .toString().const customObj = {
value: 42,
[Symbol.toPrimitive](hint) {
if (hint === 'number') return this.value;
if (hint === 'string') return `Value is ${this.value}`;
return this.value; // Default hint
},
};
console.log(+customObj); // 42 (hint: "number")
console.log(`${customObj}`); // "Value is 42" (hint: "string")
console.log(customObj + ' items'); // "42 items" (hint: "default")Promise.all() from scratch?Quick Answer:
A proper Promise.all() implementation must:
[] immediately.Promise.resolve(item) (to handle non-promise primitives).function promiseAll(iterable) {
return new Promise((resolve, reject) => {
// 1. Must handle iterables (Array, Set, etc.)
const items = Array.from(iterable);
const total = items.length;
if (total === 0) {
resolve([]);
return;
}
const results = new Array(total);
let completedCount = 0;
items.forEach((item, index
Promise.allSettled() from scratch?Quick Answer:
Unlike Promise.all(), Promise.allSettled() never rejects. It waits for every promise to either resolve or reject, and maps the result into an array of descriptor objects:
{ status: 'fulfilled', value }{ status: 'rejected', reason }function promiseAllSettled(iterable) {
return new Promise((resolve) => {
const items = Array.from(iterable);
const total = items.length;
if (total === 0) {
resolve([]);
return;
}
const results = new Array(total);
let settledCount = 0;
items.forEach((item, index) => {
Promise.
Quick Answer:
When triggering hundreds of asynchronous operations (e.g., uploading 1,000 files or crawling pages), launching all promises simultaneously crashes browser network sockets or hits API rate limits. An Async Pool guarantees that at most N promises run concurrently.
class ConcurrencyLimiter {
constructor(concurrency) {
this.concurrency = concurrency;
this.running = 0;
this.queue = [];
}
run(asyncFn) {
return new Promise((resolve, reject) => {
this.queue.push({ asyncFn, resolve, reject });
this._drain();
});
}
_drain() {
while (this.running < this.concurrency && this
[Symbol.iterator]), and how do they enable Infinite Streams?Quick Answer:
An Iterator is an object conforming to the Iterator protocol: it has a .next() method returning { value, done }.
An Iterable is an object with a [Symbol.iterator]() method returning an Iterator.
A Generator function (function*) compiles into an interruptible state machine. Calling .next() runs code until the next yield, suspends execution, and retains local variables without consuming memory for subsequent items.
// Infinite Fibonacci generator stream (Memory consumption: O(1))
function* fibonacciStream() {
let prev = 0, curr = 1;
while (true) {
yield curr;
[prev, curr] = [curr, prev + curr];
}
}
const fib = fibonacciStream();
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2
console.log(fib.next().value); // 3
console.log(fib.next().value); // 5leading, trailing, and cancel options?Quick Answer:
delay milliseconds have passed since the last call. (Search inputs, window resize).interval milliseconds. (Infinite scroll, mousemove).function debounce(fn, delayMs, { leading = false, trailing = true } = {}) {
let timerId = null;
let lastArgs = null;
let lastThis = null;
const debounced = function (...args) {
lastArgs = args;
lastThis = this;
const callNow = leading && !timerId;
if (timerId) clearTimeout(timerId);
Proxy and Reflect work, and why does Vue 3 use them instead of Object.defineProperty?Quick Answer:
A Proxy wraps a target object and intercepts internal engine operations (called traps), such as get, set, deleteProperty, and has.
Reflect mirrors the internal operations of JavaScript, returning a boolean rather than throwing errors.
Why Vue 3 rewrote reactivity using Proxy:
Object.defineProperty could only observe pre-existing object properties. New properties added later (obj.newKey = 1) or deleted properties were invisible without Vue.set().Object.defineProperty could not intercept direct array mutations by index (arr[0] = 5) or array length changes.Proxy intercepts all property operations dynamically, including arrays and Map/Set structures!const target = { name: 'DeepFrontend' };
const reactive = new Proxy(target, {
get(obj, prop, receiver) {
console.log(`Accessed: ${String(prop)}`);
return Reflect.get(obj, prop, receiver);
},
set(obj, prop, value, receiver) {
console.log(`Mutated: ${String(prop)} = ${value}`);
return Reflect.set(obj, prop, value, receiver);
structuredClone() work, and what are its performance trade-offs vs. JSON.parse(JSON.stringify())?Quick Answer:
structuredClone() is the web standard algorithm for deep-cloning JavaScript values.
Advantages over JSON.parse(JSON.stringify()):
TypeError: Converting circular structure to JSON.Date, RegExp, Map, Set, Blob, ArrayBuffer, and TypedArrays.Limitations:
DataCloneError).{ ...obj }) for simple flat objects.const circular = { id: 1 };
circular.self = circular; // Self-reference!
// Throws TypeError: Converting circular structure to JSON
// JSON.parse(JSON.stringify(circular));
// Successfully cloned with circular reference intact
const cloned = structuredClone(circular);
console.log(cloned.self === cloned); // trueonce listeners?Quick Answer:
An EventEmitter manages a registry mapping event names to arrays of callback functions. Key methods:
on(event, cb): Appends callback to event array.off(event, cb): Filters out the specified callback.emit(event, ...args): Executes all callbacks with provided arguments.once(event, cb): Wraps cb in a function that unsubscribes itself immediately upon execution.class EventEmitter {
constructor() {
this.events = new Map();
}
on(event, listener) {
if (!this.events.has(event)) {
this.events.set(event, []);
}
this.events.get(event).push(listener);
return () => this.off(event, listener); // Returns un-subscriber
}
off(event, listener) {
const listeners = this.events.get
Quick Answer:
Prototype Pollution occurs when an application recursively merges or assigns properties from untrusted user input (like JSON payloads) without validating reserved keys like __proto__, constructor, or prototype.
If an attacker injects { "__proto__": { "isAdmin": true } }, every plain object in the runtime environment inherits isAdmin = true through Object.prototype!
// Vulnerable deep merge implementation:
function unsafeMerge(target, source) {
for (let key in source) {
if (typeof source[key] === 'object' && source[key] !== null) {
if (!target[key]) target[key] = {};
unsafeMerge(target[key], source[key]); // Dangerous recursion!
} else {
target[key] = source[key];
}
}
return target;
}
// Malicious payload:
const payload = JSON.parse('{"__proto__": {"role": "ADMIN"}}'
How to defend against Prototype Pollution:
if (key === '__proto__' || key === 'constructor' || key === 'prototype') continue;Object.create(null) for objects storing user input.Object.freeze(Object.prototype).AbortController and AbortSignal APIs enable composable cancellation across fetch, event listeners, and custom timers?Quick Answer:
Historically, asynchronous cancellation was fragmented: clearTimeout for timers, removeEventListener for events, and no native way to cancel fetch requests.
AbortController standardizes cancellation across the entire web platform. A single AbortSignal can cancel an HTTP request, detach DOM event listeners, and abort long-running tasks simultaneously!
const controller = new AbortController();
const { signal } = controller;
// 1. Automatically cancel fetch request
fetch('/api/heavy-data', { signal }).catch((err) => {
if (err.name === 'AbortError') console.log('Fetch successfully aborted!');
});
// 2. Automatically remove DOM event listener without calling removeEventListener!
window.addEventListener('scroll', onScroll, { signal });
// 3. Modern AbortSignal helpers (ES2023+):
// Auto-timeout after 3 seconds:
const timeoutSignal = AbortSignal.timeout(3000);
// Compose multiple signals:
Want to test your mastery of these concepts with interactive sandboxes and real-world system design scenarios? Explore DeepFrontend's structured tracks:
When answering advanced JavaScript questions in a senior interview loop:
this falls back to window / global. In strict mode ('use strict'), it is undefined.