Interview questions
Top 30 JavaScript Interview Questions (with answers)
Revision list of 30 javascript interview questions for frontend engineers, with concise answers and links to deeper Frontend Beauty guides. Composite list for practice—not a ranked survey.
Composite practice list based on common frontend interview themes and publicly discussed fundamentals. Ordering is editorial for learning, not a statistical “most asked” ranking from a single company.
- 30 questions
- javascript
How to use this list
- Answer out loud in 60–90 seconds, then check the written answer.
- Where a “Deeper guide” link appears, open it after you attempt the answer yourself.
- Pair with DSA, machine coding, and playground drills.
javascript
1.What is the JavaScript event loop?
A single JS agent has one call stack. Host APIs (timers, network, DOM) finish work and queue callbacks. The event loop runs a macrotask until the stack is empty, drains all microtasks, may render, then takes the next macrotask. Workers are separate agents with their own stacks.
2.What is the difference between microtasks and macrotasks?
Microtasks (promise reactions, queueMicrotask, await continuations, MutationObserver) run after the current stack and before the next macrotask or paint. Macrotasks include timers, many DOM events, and other host tasks. That is why Promise.then usually runs before setTimeout(0). Footgun: endless microtasks starve rendering.
3.What is a closure in JavaScript?
A function bundled with its lexical environment—the outer bindings it can still reach. Closures capture bindings, not frozen snapshots of values. Footgun: a long-lived callback that closes over a large object keeps that object alive for GC.
4.What is the difference between var, let, and const?
var is function-scoped and hoisted as undefined. let and const are block-scoped and stay in the temporal dead zone until initialized. const cannot rebind the identifier (object contents can still mutate). Prefer const by default, let when reassignment is needed.
5.What is the temporal dead zone?
From the start of a block until a let/const binding is initialized, accessing it throws ReferenceError. That gap is the TDZ. It prevents using bindings before their declaration runs.
6.How does this binding work in JavaScript?
this is set by the call site: default (undefined in strict, global in sloppy), method call (receiver), call/apply/bind, or new. Arrow functions do not have their own this—they capture lexical this. Footgun: extracting a method loses its receiver unless you bind it.
7.What is the difference between call, apply, and bind?
call and apply invoke a function immediately with a chosen this; apply takes arguments as an array-like. bind returns a new function with bound this (and optional partial args) for later invocation.
8.What is prototypal inheritance?
Objects delegate property lookup along [[Prototype]]. If a property is missing, the engine walks the chain. class is syntactic sugar over constructor functions and prototypes. Footgun: mutating shared prototypes affects all instances.
9.What is the difference between ==, ===, and Object.is?
=== is strict equality without coercion. == applies type coercion and is usually avoided. Object.is is like === except NaN is equal to NaN and +0 is not equal to -0.
10.What is a Promise?
An object for a value that may arrive later: pending, then fulfilled or rejected once. Handlers run as microtasks. async/await is sugar over promises. Footgun: fetch only rejects on network failure—check response.ok for HTTP errors.
11.When do you use Promise.all versus Promise.allSettled?
Promise.all fails fast on the first rejection and is right when any failure should abort the batch. allSettled waits for every promise and reports each status—better when partial success is useful. Neither cancels in-flight work; pair with AbortController when needed.
12.Does async/await block the main thread?
No. await pauses that async function and schedules the continuation as a microtask when the promise settles; the call stack can run other work. Heavy CPU after await still blocks—chunk work or use a worker.
13.What is AbortController and why does it matter?
It provides a signal to cancel abortable operations like fetch. Essential when users type fast, navigate away, or race multiple requests—otherwise stale responses can overwrite newer UI state.
14.What is the difference between debounce and throttle?
Debounce waits until events stop for N ms, then runs once (search boxes). Throttle runs at most once per interval while events continue (scroll sampling). Pick based on whether you care about the trailing quiet moment or a steady sample rate.
function debounce(fn, ms) { let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); }; }15.What is event delegation?
Attach one listener on a parent and use bubbling (and closest) to handle events from dynamic children. Scales better than per-row listeners. Footgun: some events do not bubble (focus uses focusin; check the event).
16.What is the difference between preventDefault and stopPropagation?
preventDefault stops the browser’s default action (e.g. form submit navigation). stopPropagation stops the event from reaching other nodes along the capture/bubble path; listeners on the same element still run unless you use stopImmediatePropagation.
17.How do localStorage, sessionStorage, and cookies differ?
localStorage/sessionStorage are JS-readable string stores (session ends with the tab for sessionStorage). Cookies are sent on HTTP requests and can be HttpOnly (not readable by JS), Secure, and SameSite—use those for session tokens when appropriate. Never store secrets in web storage if XSS is possible.
18.What is the difference between Map and a plain object?
Map accepts any key type, has reliable size, and iterates in insertion order. Objects coerce keys to strings/symbols and inherit Object.prototype keys unless you are careful. Prefer Map for dynamic key-value collections.
19.What is a WeakMap used for?
It holds object keys weakly so entries can be garbage-collected when the key is otherwise unreachable. Useful for private metadata or caches tied to DOM nodes without leaking them.
20.Why is 0.1 + 0.2 not equal to 0.3?
IEEE-754 doubles cannot represent many decimals exactly. For money, use integer cents or a decimal library—not raw floats for equality.
21.What is the difference between null and undefined?
undefined usually means “missing or not initialized.” null is an intentional empty value. Pick one convention for APIs and stick to it; prefer ?? over || when 0 and empty string are valid.
22.What are ES modules and how do they differ from classic scripts?
Modules have their own scope, use import/export, are deferred by default, and run in strict mode. Classic scripts share the global scope and can block parsing without defer/async.
23.What does dynamic import() enable?
import() returns a Promise of the module namespace, so you can load code on demand (route-based splitting, rarely used features). Handle errors and loading UI.
24.What is the difference between for...of and for...in?
for...of iterates values of iterables (arrays, strings, maps). for...in enumerates enumerable keys, including inherited ones—risky for arrays. Prefer for...of, map, or forEach for arrays.
25.How does Array.prototype.sort work by default?
It sorts as strings by default, so [10, 2, 1] becomes [1, 10, 2]. Always pass a comparator for numbers: (a, b) => a - b. Prefer toSorted when you need a copy.
26.What is structuredClone used for?
Deep-cloning many built-in structured types (including Map/Set/Date) better than JSON round-trips. It cannot clone functions or DOM nodes; JSON also drops undefined and functions.
27.What causes common memory leaks in SPAs?
Detached DOM still referenced, forgotten event listeners or intervals, unbounded caches, and closures retaining large objects. Always clean up in effect teardowns and dispose patterns.
28.What is the difference between requestAnimationFrame and setTimeout?
rAF schedules work before the next paint and is vsync-aligned for animations. setTimeout is a timer macrotask and not paint-aligned. Use rAF for visual updates.
29.How does the Fetch API handle HTTP errors?
Network failures reject the promise. HTTP 4xx/5xx still resolve—you must check response.ok or status. Parse the body accordingly and surface errors to users.
30.What is CORS from a frontend perspective?
Browsers enforce cross-origin rules. Servers declare allowed origins and headers; non-simple requests may trigger a preflight OPTIONS check. Frontend cannot “disable CORS” in production browsers.