Top 50 JavaScript Interview Questions & Answers (2026 Advanced Guide)
JavaScript is the undisputed language of the web. Whether you are applying for a Frontend (React/Angular/Vue) or Backend (Node.js) role, a deep understanding of JavaScript's quirky mechanics is mandatory in 2026.
Interviewers are no longer asking basic syntax questions. They want to know if you understand the Event Loop, memory leaks, closures, and prototypical inheritance. Here are the Top 50 Advanced JavaScript Interview Questions to help you crush your next interview.
⚡ Part 1: Core Mechanics & Type Coercion
1. What is the difference between `var`, `let`, and `const`?
var is function-scoped and allows hoisting (its declaration is moved to the top, initialized as undefined). let and const are block-scoped (scoped to the nearest curly brackets {}) and are hoisted but remain in the "Temporal Dead Zone" until their definition is evaluated. const prevents reassignment but does not make objects immutable.
2. What is Type Coercion in JavaScript?
Type coercion is the automatic conversion of values from one data type to another. For example, '5' + 1 results in '51' (string concatenation), but '5' - 1 results in 4 (numeric subtraction) because the minus operator triggers numeric coercion.
3. Explain `==` vs `===`.
== is the loose equality operator. It performs type coercion before comparing (so 1 == '1' is true). === is the strict equality operator. It checks for both value and type, so 1 === '1' evaluates to false. You should almost always use ===.
4. What is Hoisting?
Hoisting is JavaScript's default behavior of moving variable and function declarations to the top of their respective scopes during the compilation phase. Only the declarations are hoisted, not the initializations.
5. What are the Primitive Data Types in JS?
There are 7 primitive types: String, Number, BigInt, Boolean, Undefined, Symbol, and Null. Everything else (Arrays, Functions) is conceptually an Object.
6. Difference between `null` and `undefined`?
undefined means a variable has been declared but has not yet been assigned a value. null is an assignment value; it is an explicit representation of "no value" or "empty". Interestingly, typeof null returns "object" due to a legacy bug in JS.
7. What is NaN?
NaN stands for "Not-a-Number". It represents the result of an invalid mathematical operation (e.g., "apple" / 2). Paradoxically, typeof NaN evaluates to "number". Also, NaN === NaN evaluates to false; you must use Number.isNaN() to check it.
8. How do you check if an object is an Array?
You cannot use typeof because typeof [] returns "object". The safest and standard way is to use Array.isArray(myVar).
9. What is Strict Mode?
Invoked by adding "use strict"; at the top of a file or function, strict mode eliminates some JavaScript silent errors by changing them to throw errors. For example, it prevents you from using undeclared variables.
10. What are truthy and falsy values?
In boolean contexts (like an `if` statement), values evaluate to true or false. The falsy values in JavaScript are exactly six: false, 0, "" (empty string), null, undefined, and NaN. Everything else is truthy.
Ready to test your Coding skills? 🚀
Practice these exact questions and thousands more on the TechQuiz app. Track your progress and crush your FAANG interview.
⚙️ Part 2: Functions, Scope & Closures
11. What is a Closure in JavaScript?
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives an inner function access to an outer function's scope, even after the outer function has finished executing.
12. Explain the "this" keyword.
In JavaScript, this refers to the object that is executing the current function. Unlike other languages, its value is determined by how a function is called, not where it was declared. In the global scope, it refers to the `window` object.
13. What is the difference between Call, Apply, and Bind?
All three change the context of this. call() executes the function immediately and takes arguments separated by commas. apply() executes immediately but takes arguments as an array. bind() does not execute immediately; it returns a new function with the this context permanently bound.
14. How do Arrow Functions differ from regular functions?
Arrow functions provide a shorter syntax, but most importantly, they do not have their own this context. They inherit this lexically from their parent scope. Additionally, they cannot be used as constructors (no new keyword) and don't have an arguments object.
15. What are Higher-Order Functions?
A higher-order function is a function that either takes one or more functions as arguments (like callbacks), or returns a function as its result. Common examples include map(), filter(), and reduce().
16. What is Currying?
Currying is a functional programming technique where a function that takes multiple arguments is transformed into a sequence of nested functions that each take a single argument. E.g., add(a, b) becomes add(a)(b).
17. What is an IIFE (Immediately Invoked Function Expression)?
An IIFE is a function that executes immediately after it is created. It is commonly used to create a private scope and prevent variables from polluting the global namespace. Syntax: (function() { ... })();
18. Explain the difference between function declaration and function expression.
A function declaration (def foo():) is fully hoisted, meaning you can call it before it is defined in the code. A function expression (const foo = function():) acts like a variable declaration; the function is not hoisted and cannot be called before it is defined.
19. What is a Callback function?
A callback is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action (often used heavily before Promises were introduced).
20. What is "Callback Hell"?
Also known as the Pyramid of Doom, it is the result of deeply nesting multiple asynchronous callbacks inside each other, making the code extremely difficult to read, debug, and maintain.
👇 Dominate System Design & JS Frameworks 👇
Join thousands of engineers using TechQuiz to master JavaScript and land jobs at top tier tech companies.
⏱️ Part 3: Promises, Async/Await & Event Loop
21. Explain the JavaScript Event Loop.
JavaScript is single-threaded. The Event Loop monitors the Call Stack and the Callback Queue. If the Call Stack is empty, it takes the first event from the Callback Queue and pushes it to the Call Stack to be executed, enabling non-blocking concurrency.
22. What is a Promise?
A Promise is an object representing the eventual completion (or failure) of an asynchronous operation. It has three states: Pending, Fulfilled (resolved), and Rejected.
23. What is the difference between Microtasks and Macrotasks?
Microtasks (like Promise `.then()`) have higher priority than Macrotasks (like `setTimeout`). The Event Loop will always empty the entire Microtask Queue before moving on to process the next Macrotask.
24. Explain Async / Await.
Introduced in ES2017, they act as syntactic sugar on top of Promises. `async` makes a function return a Promise, and `await` pauses the execution of that specific async function until the Promise resolves, making async code look synchronous and readable.
25. What is `Promise.all()`?
It takes an array of Promises and executes them concurrently. It resolves only when ALL promises in the array resolve, or rejects immediately if ANY of the promises reject (fail-fast).
26. What is `Promise.allSettled()`?
Unlike `Promise.all()`, `allSettled()` waits for all promises to finish regardless of whether they resolve or reject. It returns an array of objects describing the outcome of each promise.
27. What is `Promise.race()`?
It takes an array of Promises and returns a Promise that resolves or rejects as soon as the FIRST promise in the iterable finishes. It is useful for timeout scenarios.
28. Why does `setTimeout(fn, 0)` not execute immediately?
Because it places the callback into the Macrotask Queue. Even with a delay of 0 milliseconds, the Event Loop must first finish all synchronous code in the current Call Stack before processing the timer callback.
29. How do you handle errors in Async/Await?
Because there are no `.catch()` blocks implicitly chained, you must wrap your `await` expressions in standard `try...catch` blocks to handle rejected promises safely.
30. What is a Web Worker?
Web Workers allow you to run JavaScript code in a background thread, completely separate from the main execution thread. This is the primary way to perform heavy CPU computations in the browser without freezing the UI.
🏗️ Part 4: Objects & Prototypal Inheritance
31. Explain Prototypal Inheritance.
Unlike classical OOP (Java/C++), objects in JS inherit directly from other objects via a hidden `[[Prototype]]` linkage. When you access a property on an object, if JS doesn't find it, it looks up the "prototype chain" until it finds it or reaches null.
32. What is the difference between `__proto__` and `prototype`?
`__proto__` is an internal reference that points to the prototype of the object it was created from. `prototype` is a property specific to Functions (classes). When you use `new`, the new object's `__proto__` is assigned to the constructor function's `prototype`.
33. What are ES6 Classes?
ES6 `class` syntax is primarily "syntactic sugar" over JavaScript's existing prototypal inheritance. Under the hood, classes are still just constructor functions, but they provide a cleaner, more Java-like syntax for developers.
34. How does `Object.create()` work?
It creates a brand new empty object, and permanently links its internal prototype (`__proto__`) to whichever object you pass in as the first argument, allowing for pure prototypal inheritance without constructor functions.
35. Deep Copy vs Shallow Copy in JavaScript?
A shallow copy (using `Object.assign` or `...` spread) only copies the first level of references. Nested objects will still share the same memory. A deep copy (traditionally using `JSON.parse(JSON.stringify(obj))` or modern `structuredClone(obj)`) creates entirely distinct clones of nested data.
36. What is `Object.freeze()`?
It makes an object completely immutable. You cannot add, delete, or change properties of a frozen object. However, note that it is a *shallow* freeze; nested objects inside it can still be modified.
37. What is `Object.seal()`?
It prevents the addition or deletion of properties, but unlike `freeze()`, it *allows* the modification of existing property values.
38. Explain the `new` keyword.
When invoked, `new` does four things: 1) Creates a blank JS object. 2) Links this object to the constructor function's prototype. 3) Binds the `this` keyword to the new object. 4) Returns `this` implicitly.
39. What is the Map object?
Unlike standard Objects where keys must be Strings or Symbols, a `Map` is a collection of key-value pairs where the key can be *any* data type (including functions or other objects). Maps also maintain insertion order.
40. What is a WeakMap?
A `WeakMap` is similar to a Map, but keys must be objects, and it holds "weak" references to those keys. If there are no other references to the key object, it will be automatically Garbage Collected, preventing memory leaks.
🚀 Part 5: Modern ES6+ & Performance
41. What is Destructuring?
An ES6 feature that allows you to extract properties from objects or items from arrays and bind them to distinct variables in a single line. Example: `const { name, age } = userObject;`
42. Explain the Spread (`...`) syntax.
It allows an iterable (like an array or object) to be expanded in places where zero or more arguments or elements are expected. Often used to clone arrays (`[...arr]`) or merge objects.
43. What is Debouncing?
A performance optimization technique. It ensures a function (like a search input handler) is not called again until a certain amount of time has passed without it being called. It prevents rapid-fire API calls.
44. What is Throttling?
Similar to debouncing, but throttling guarantees that a function executes at a regular, fixed rate (e.g., exactly once every 100ms) regardless of how many times the user fires the event (like scrolling).
45. Event Delegation in the DOM?
Instead of adding event listeners to 100 individual list items, you add a single event listener to their parent `
- ` container. Because events "bubble up" the DOM tree, the parent can catch and handle clicks for all its children.
46. What is the Optional Chaining (`?.`) operator?
It permits reading the value of a property located deep within a chain of connected objects without having to check if each reference in the chain is valid. E.g., `user?.address?.zipcode` returns undefined instead of throwing an error if address is missing.
47. Nullish Coalescing (`??`) operator?
It is a logical operator that returns its right-hand operand when its left-hand side is `null` or `undefined`. It is superior to `||` when you specifically want `0` or `false` to be treated as valid values.
48. Difference between LocalStorage and SessionStorage?
Both store strings in the browser. LocalStorage persists data indefinitely, even if the user closes the browser or restarts the computer. SessionStorage clears the data the moment the specific browser tab is closed.
49. What are Modules in JS (import/export)?
ES Modules allow you to split your JS code into separate files. You `export` functions/variables from one file and `import` them into another. This keeps code maintainable, prevents global namespace pollution, and enables tree-shaking (removing unused code during build time).
50. What is a Service Worker?
A script that your browser runs in the background, separate from a web page. They open the door to features like push notifications and background sync, and are the core technology that enables Progressive Web Apps (PWAs) to work completely offline.
🔥 Explore More Interview Guides
Preparing for multiple roles? Check out our other in-depth technical interview guides:
Comments
Post a Comment