JavaScript · Advanced interview

Synchronous code runs on the call stack. When it empties, the engine drains all microtasks (promises, queueMicrotask), then in a browser may perform rendering (style, layout, paint, often aligned with requestAnimationFrame), then takes one macrotask (timer, I/O, event) and repeats. Long synchronous tasks block both microtasks and rendering, which is why heavy work freezes the UI — you break it up or offload to a worker.

An iterator is an object with a next() method returning { value, done }; an iterable has a [Symbol.iterator] returning one, which is what for...of consumes. A generator function (function*) is a convenient way to write iterators: yield pauses and resumes execution, preserving local state between calls. Generators enable lazy sequences, custom iteration, and were the basis for async patterns before async/await.

function* gen() { yield 1; yield 2; }
for (const x of gen()) console.log(x);

async/await is syntactic sugar over promises and generator-like suspension: an async function returns a promise, and each await suspends the function, registering a continuation on the awaited promise's microtask. When the promise settles, the function resumes from where it paused. So awaiting doesn't block the thread — it yields control back to the event loop and continues later as a microtask.

A Proxy wraps an object and intercepts fundamental operations (get, set, has, deleteProperty, etc.) via trap functions, enabling validation, reactivity (Vue 3's reactivity is built on Proxy), logging, and virtual objects. Reflect provides the default implementations of those operations as functions, so inside a trap you call Reflect.get/set to perform the normal behaviour cleanly. They're the toolkit for metaprogramming object behaviour.

new Proxy(obj, { get(t, k, r) { log(k); return Reflect.get(t, k, r); } });

Every property has a descriptor controlling its value, writable, enumerable, and configurable flags, or get/set accessor functions, set via Object.defineProperty. Getters/setters let a property run code on read/write, and the flags control enumeration and mutability. They power computed properties, immutability (writable: false), hiding internals (enumerable: false), and were how reactivity worked before Proxy.

A Symbol is a unique, immutable primitive often used as a non-colliding property key — useful for adding metadata to objects without clashing with string keys. Well-known symbols like Symbol.iterator, Symbol.asyncIterator, and Symbol.toPrimitive let your objects hook into language protocols (iteration, coercion). Implementing Symbol.iterator, for example, makes a custom object usable with for...of and spread.

Currying transforms a function of many arguments into a chain of single-argument functions, so f(a, b, c) becomes f(a)(b)(c). Partial application fixes some arguments now and returns a function taking the rest. Both rely on closures and are used to build specialized functions from general ones and to compose pipelines.

const add = a => b => a + b;
const add5 = add(5); add5(3); // 8

Composition combines small functions so the output of one feeds the next — compose(f, g)(x) = f(g(x)) — building complex behaviour from simple, testable pieces. Pure functions (no side effects, output depends only on input) are predictable, cacheable, and easy to test and parallelize, which makes them ideal building blocks for composition and reasoning about state.

Debounce delays running a function until a pause in calls — reset a timer on each call and only fire after N ms of quiet; good for search-as-you-type or resize end. Throttle runs at most once per interval no matter how many calls — good for scroll or mousemove handlers. Both use closures to hold the timer/last-run state.

const debounce = (fn, ms) => { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; };

JavaScript uses a mark-and-sweep collector: objects reachable from roots (globals, the stack) survive; unreachable ones are freed. Leaks happen when you unintentionally keep references — forgotten timers/intervals, event listeners never removed, detached DOM nodes still referenced, growing global caches, and closures holding large objects. The fix is to release references: clear timers, remove listeners, and bound caches.

A WeakMap holds keys weakly, so if the only reference to a key object is the WeakMap, it can be garbage-collected — perfect for attaching metadata or caches to objects without preventing their cleanup (e.g. private data keyed by instance). WeakRef holds a weak reference to an object you can sometimes still access. They prevent the leaks that a normal Map or strong reference would cause for object-keyed caches.

Measure first with the profiler to find the real hotspot. Then reduce work: avoid layout thrash by batching DOM reads then writes (and using requestAnimationFrame), minimize allocations and GC pressure in tight loops, keep object shapes stable so the JIT can optimize, debounce/throttle expensive handlers, and move heavy computation to Web Workers. Micro-optimize only what the profiler proves matters.