■ JavaScript + React

Frontend Interview
Master Kit

250+ 75+ 2 100%

Questions Code Snippets Core Domains Interview Ready

Domain 1 Domain 2

■ JS Fundamentals & Concepts ■ Problem Solving & Logic Building

Crafted for engineers who want to walk into interviews with zero fear.
Every question tests what interviewers actually care about — not textbook fluff.

JS & React Frontend Interview Master Kit • Page 1

 ■ DOMAIN 1 — JavaScript Fundamentals & Concepts

§ 1.1 Variables, Scope & Hoisting

Q1. Predict the output. What is printed and in what order, and why?
[Link](a); var a = 5; [Link](a);
■ Focus: var hoisting — declaration hoisted, assignment stays

Q2. What happens when you access a let variable before its declaration line? What is the name of this zone?
■ Focus: Temporal Dead Zone (TDZ)

Q3. What does the following print? Explain precisely why each line differs.
var x=1; function f(){ [Link](x); var x=2; } f();
■ Focus: Function-level hoisting shadows outer x

Q4. Three variables are declared with var inside a for-loop. Why do all callbacks print the same value, and how do
you fix it with let or closure?
■ Focus: Loop variable captured by reference vs. block scope per iteration

Q5. Can you reassign a const object's properties? Why or why not? How do you make an object truly immutable?
■ Focus: const ≠ immutable; [Link]()

Q6. What is the difference between global scope, function scope, block scope, and module scope?
■ Focus: Identify which keywords create which scopes

Q7. Explain lexical scoping in one sentence, then trace it through a nested function example.
■ Focus: Scope determined at write-time, not call-time

Q8. What does this output, and why?

let a=10; { let a=20; [Link](a); } [Link](a);

Q9. Is function declaration hoisted differently from a function expression assigned to a var? Demonstrate.
■ Focus: Declaration fully hoisted; expression only hoists the var binding

Q10. What is the output?

[Link](typeof undeclaredVar);
■ Focus: typeof is safe with undeclared identifiers — returns 'undefined'

Q11. What is variable shadowing and when can it cause hard-to-find bugs?

Q12. Explain the difference between undefined and not defined. When does each occur?

§ 1.2 Data Types, Type Coercion & Equality

Q13. List all seven primitive types in JavaScript. Which one was added in ES2015?
■ Focus: string, number, boolean, null, undefined, symbol, bigint

Q14. What is the result of null == undefined vs null === undefined? Why?

Q15. Predict the output of each:

[Link](0 == false); [Link]("" == false); [Link](null == 0); [Link](null ==
false);
■ Focus: Abstract Equality Comparison algorithm

Q16. What does typeof null return and why is it considered a historic bug?

Q17. Explain implicit type coercion. Give two examples where it surprises developers.
■ Focus: + operator with string vs. number

Q18. What is the output?

JS & React Frontend Interview Master Kit • Page 2

 [Link](1 + "2" + 3); [Link](1 + 2 + "3");

Q19. How do you reliably check if a value is NaN? Why is NaN === NaN false?
■ Focus: [Link]() vs global isNaN()

Q20. Explain the difference between Number(), parseInt(), and parseFloat(). When would each produce different
results?

Q21. What is the output and why?

[Link]([] + []); [Link]([] + {}); [Link]({} + []);
■ Focus: Array/Object toString coercion edge cases

Q22. Explain what a truthy and falsy value is. List all six falsy values.

Q23. What is the output?

[Link](Boolean(0), Boolean(""), Boolean([]), Boolean({}));

Q24. What is the difference between deep equality and shallow equality? Write a one-line shallow equality check
for two objects.
■ Focus: [Link] vs reference check vs recursive compare

Q25. How does the + unary operator work for type conversion? Give two examples.

§ 1.3 Functions, Closures & Higher-Order Functions

Q26. What is a closure? Write the simplest possible closure that demonstrates the concept.
■ Focus: Inner function retaining access to outer function's variables after outer returns

Q27. Implement a counter factory using closures that returns increment, decrement, and getValue methods.

Q28. What is the difference between a function declaration and a function expression? List two behavioral
differences.

Q29. Explain arrow functions. In what two ways do they differ from regular functions beyond syntax?
■ Focus: No own 'this', no 'arguments' object, cannot be constructors

Q30. What does arguments object contain? Does it exist in arrow functions?

Q31. What will this print?

const obj = { val:10, fn: () => [Link]([Link]) }; [Link]();
■ Focus: Arrow function this is lexically bound — not obj

Q32. Explain the concept of a pure function. Give one pure and one impure example.

Q33. What is a higher-order function? Name three built-in array methods that are higher-order functions.

Q34. Implement a basic memoize function that caches results for single-argument functions.

Q35. What is function currying? Convert add(a, b, c) into a curried version.

Q36. What is partial application? How is it different from currying?

Q37. What is an IIFE (Immediately Invoked Function Expression)? Give its syntax and one use-case.

Q38. Explain function composition. Write a simple compose(f, g) utility.

Q39. What is the difference between call, apply, and bind? When would you use each?

Q40. What does this print?

function greet(greeting){ return greeting + ', ' + [Link]; } const user = {name:'Alice'};
[Link]([Link](user,'Hello'));

§ 1.4 The 'this' Keyword & Execution Context

JS & React Frontend Interview Master Kit • Page 3

Q41. List the four rules that determine the value of this in JavaScript.
■ Focus: Default, Implicit, Explicit (call/apply/bind), new binding

Q42. What is the value of this inside a method called as a standalone function vs. as an object method?

Q43. In strict mode, what is the value of this in a regular function?

Q44. What does new do step-by-step when creating an object from a constructor function?
■ Focus: Creates object, sets proto, binds this, returns object

Q45. Why can't you use arrow functions as object methods when you need to reference this?

Q46. What is the output?

const obj = { name:'Bob', greet(){ setTimeout(function(){ [Link]([Link]); }, 100); } };
[Link]();
■ Focus: Regular function inside setTimeout loses obj context

Q47. Fix the previous question using an arrow function. Explain why it works.

§ 1.5 Prototypes, OOP & Classes

Q48. What is the prototype chain? How does property lookup traverse it?

Q49. What is the difference between __proto__ and prototype property?

Q50. Explain prototypal inheritance with a working example using [Link]().

Q51. How do ES6 class syntax and constructor functions differ? Is class syntax just syntactic sugar?

Q52. What is the purpose of the super keyword? Where must it be called in a derived class constructor?

Q53. What does hasOwnProperty do? How does it differ from the in operator?

Q54. Explain the difference between [Link]() and the spread operator for copying objects. What is a
shallow copy?

Q55. What are static methods in a class? Can they access instance properties?

Q56. What is method chaining? Design a simple Builder class that supports it.

§ 1.6 Asynchronous JavaScript — Callbacks, Promises, Async/Await

Q57. What is the event loop? Describe its relationship with the call stack, microtask queue, and macrotask queue.
■ Focus: Critical — interviewers love this

Q58. What is the output order?

[Link]("A"); setTimeout(()=>[Link]("B"),0);
[Link]().then(()=>[Link]("C")); [Link]("D");
■ Focus: A D C B — microtasks run before macrotasks

Q59. What is callback hell? Why is it problematic? How do Promises solve it?

Q60. What are the three states of a Promise? Can a settled Promise change its state?

Q61. What is the difference between [Link](), [Link](), [Link](), and [Link]()?

Q62. What happens if you throw an error inside a .then() handler?

■ Focus: It becomes a rejection passed to .catch()

Q63. Can you use await outside of an async function? (ES2022 answer expected)
■ Focus: Top-level await in ES modules

Q64. What does async before a function do to its return value?

■ Focus: Always wraps in a Promise

JS & React Frontend Interview Master Kit • Page 4

Q65. Write an async function that fetches data from an API and handles errors using try/catch.

Q66. What is the output and why?

async function f(){ return 1; } f().then(v => [Link](v));

Q67. Explain the difference between setTimeout(fn, 0) and queueMicrotask(fn).

■ Focus: Macrotask vs microtask queue

Q68. How would you run three async operations in parallel vs. sequentially using async/await?

Q69. What is a memory leak in async code? Give one common example.

§ 1.7 Array & Object Methods

Q70. What is the difference between map, filter, and reduce? Write one example of each.

Q71. What does [Link](Infinity) do? When would you use it?

Q72. Explain [Link](). Give a use-case where it is more efficient than flat + map.

Q73. What is the difference between find() and filter()? Which is more efficient for finding a single match?

Q74. How does [Link]() differ from the spread operator for converting iterables?

Q75. What does [Link](), [Link](), and [Link]() return? Does order matter?

Q76. Explain [Link]() vs every(). What do they return for an empty array?
■ Focus: some([]) → false, every([]) → true (vacuous truth)

Q77. How do you remove duplicates from an array using a Set?

Q78. What is the output?

const arr = [1,2,3]; const result = [Link]((acc, val) => acc + val, 0); [Link](result);

Q79. What does splice() do vs slice()? Which mutates the original array?

Q80. How does sort() behave by default in JS? Why is [10,9,2,1,100].sort() surprising?
■ Focus: Lexicographic sort — always pass a comparator

§ 1.8 ES6+ — Destructuring, Spread, Rest, Template Literals

Q81. Destructure the following object to extract name and age with a default for age.
const user = { name:'Alice' };

Q82. Swap two variables using destructuring without a temporary variable.

Q83. What is the difference between rest parameters (...args) and the arguments object?

Q84. What is the output?

const [a, , b] = [1,2,3,4]; [Link](a, b);

Q85. Explain tagged template literals. Write a simple tag function that uppercases all interpolated values.

Q86. What does the nullish coalescing operator (??) do differently from the OR (||) operator?
■ Focus: ?? only triggers on null/undefined, not 0 or ''

Q87. What is optional chaining (?.)? How does it differ from a manual truthy check?

Q88. What does the logical assignment operator ??= do? Give an example.

§ 1.9 Modules, Imports & Exports

Q89. What is the difference between named exports and a default export? Can a module have both?

JS & React Frontend Interview Master Kit • Page 5

Q90. What are the key differences between CommonJS (require/[Link]) and ES Modules
(import/export)?

Q91. Is the import statement hoisted in ES modules?

■ Focus: Yes — imports are hoisted and resolved before any code runs

Q92. What is dynamic import()? When would you use it over static import?
■ Focus: Code splitting / lazy loading

Q93. What is a barrel file ([Link]) and why can it hurt tree-shaking?

§ 1.10 Error Handling & Debugging

Q94. What are the built-in Error types in JavaScript? Name at least four.
■ Focus: TypeError, ReferenceError, SyntaxError, RangeError, URIError, EvalError

Q95. Explain the try / catch / finally execution flow. What happens to finally if catch rethrows?

Q96. How do you create a custom error class that extends Error?

Q97. What is an unhandled promise rejection? How do you handle it globally in [Link] and in the browser?

Q98. When would you use [Link]() vs throw new Error()?

§ 1.11 Memory, Garbage Collection & Performance

Q99. How does JavaScript garbage collection work? What is the mark-and-sweep algorithm?

Q100. What are common causes of memory leaks in JS? Name three.
■ Focus: Closures holding refs, detached DOM nodes, global variables, forgotten timers

Q101. What is debounce and throttle? Implement both in vanilla JS.

Q102. What is the difference between WeakMap and Map? When is WeakMap useful for memory?

Q103. Explain the concept of lazy evaluation and how generators support it.

Q104. What is memoization and when should you NOT use it?

§ 1.12 Web APIs, DOM & Browser Internals

Q105. What is the difference between localStorage, sessionStorage, and cookies?

Q106. Explain event bubbling and event capturing. How do you stop propagation?

Q107. What is event delegation and why is it a performance optimization?

Q108. What does [Link]() do vs [Link]()?

Q109. What is the difference between innerHTML, textContent, and innerText?

Q110. What is reflow (layout) vs repaint in browser rendering? Which is more expensive?

Q111. Explain what happens from URL entry to page render — the critical rendering path.

Q112. What is a MutationObserver and when would you use it over event listeners?

Q113. What is requestAnimationFrame? Why is it better than setTimeout for animations?

Q114. What is CORS? What is a preflight request?

Q115. Explain the same-origin policy and how you can work around it.

Q116. What is a Service Worker? How is it different from a Web Worker?

Q117. How do you detect if a user is online or offline using the Web API?

JS & React Frontend Interview Master Kit • Page 6

 ■ Focus: [Link] + online/offline events

Q118. What is the Intersection Observer API used for?

§ 1.13 Iterators, Generators & Symbols

Q119. What is an iterator protocol? What two properties must the object returned by next() have?
■ Focus: { value, done }

Q120. Write a generator function that yields an infinite sequence of Fibonacci numbers.

Q121. What is the purpose of [Link]? How do you make a custom object iterable?

Q122. What is the difference between for...of and for...in? When would you use each?

Q123. What is an async generator? When would you use it?

§ 1.14 Proxy, Reflect & Metaprogramming

Q124. What is a Proxy object? Write a simple proxy that logs every property access.

Q125. What traps can a Proxy intercept? Name four.

■ Focus: get, set, has, deleteProperty, apply, construct...

Q126. How is Reflect related to Proxy? Why is it recommended to use Reflect inside traps?

JS & React Frontend Interview Master Kit • Page 7

 ■ DOMAIN 2 — Problem Solving & Logic Building

§ 2.1 String Manipulation

Q127. Reverse a string without using .reverse(). Write two different approaches.

Q128. Check if a string is a palindrome. Handle case-insensitivity and ignore non-alphanumeric chars.

Q129. Count the frequency of each character in a string. Return an object.

Q130. Find the first non-repeating character in a string. Return its index.

Q131. Given a string, find the longest substring without repeating characters. Return its length.
■ Focus: Sliding window approach

Q132. Check whether two strings are anagrams of each other.

Q133. Implement a function that counts words in a sentence (handle multiple spaces).

Q134. Convert a camelCase string to snake_case and vice versa.

Q135. Truncate a string to a given number of words, appending '...' if truncated.

Q136. Write a function to check if one string is a rotation of another (e.g., 'abcd' and 'cdab').

Q137. Find all permutations of a string. How many permutations does a string of length n have?

Q138. Implement [Link]() manually without using the built-in method.

Q139. Count the number of vowels and consonants in a string.

Q140. Write a function that compresses a string: 'aabcccdd' → 'a2b1c3d2'.

Q141. Parse a query string like '?name=Alice&age;=30' into a JavaScript object.

§ 2.2 Numbers, Math & Bit Manipulation

Q142. Check if a number is a prime. Optimize beyond brute force.
■ Focus: Only iterate up to sqrt(n)

Q143. Write a function to find all prime numbers up to n using the Sieve of Eratosthenes.

Q144. Compute the factorial of n both iteratively and recursively.

Q145. Compute the nth Fibonacci number. Write a solution with O(n) time and O(1) space.

Q146. Reverse the digits of an integer without converting to string.

Q147. Check if a number is a palindrome without string conversion.

Q148. Find the GCD (greatest common divisor) of two numbers using the Euclidean algorithm.

Q149. Generate all numbers from 1 to n that are divisible by 3, 5, or both (FizzBuzz). Now generalise it — the
divisors and labels should be configurable.
■ Focus: Go beyond the basic fizzbuzz — show you can abstract it

Q150. Given an integer, count the number of set bits (1s) in its binary representation without built-ins.
■ Focus: Brian Kernighan's algorithm: n & (n-1)

Q151. Implement a power function pow(base, exp) using fast exponentiation (O(log n)).

Q152. Round a floating-point number to n decimal places without floating-point errors.

■ Focus: Use [Link]() then parseFloat, or multiply/divide approach

JS & React Frontend Interview Master Kit • Page 8

Q153. Explain why 0.1 + 0.2 !== 0.3 in JavaScript. How do you compare floats safely?
■ Focus: IEEE 754 floating point; use [Link]

§ 2.3 Array Algorithms

Q154. Find the maximum and minimum values in an array without using [Link]/min.

Q155. Rotate an array by k positions to the right in-place.

Q156. Find the second largest element in an array in O(n) time.

Q157. Given an array of integers, return all pairs that sum to a target value.
■ Focus: Two-pointer or hash map approach

Q158. Remove duplicates from a sorted array in-place and return the new length.

Q159. Flatten a deeply nested array without using [Link]().

Q160. Find the intersection of two unsorted arrays (elements common to both).

Q161. Move all zeroes to the end of an array while maintaining the relative order of non-zero elements.

Q162. Given a sorted array and a target, implement binary search.

Q163. Find the maximum subarray sum (Kadane's algorithm).

Q164. Given an array of coin denominations and a target amount, find the minimum number of coins needed.
■ Focus: Dynamic programming / greedy (greedy fails for arbitrary denominations)

Q165. Merge two sorted arrays into one sorted array without using sort().

Q166. Chunk an array into groups of size n. Return an array of arrays.

Q167. Find the most frequently occurring element in an array.

Q168. Given an array of objects representing people with a name and score, return the top 3 scorers sorted
descending.

Q169. Check if a given array contains any duplicate values. Solve in O(n) time.

Q170. Implement [Link]() from scratch as a standalone function.

Q171. Implement [Link]() from scratch.

Q172. Given an array [1,2,3,4,5], produce all subsets (power set).

§ 2.4 Objects, Maps & Sets

Q173. Deeply clone a JavaScript object without using [Link]/[Link].
■ Focus: Handle Date, RegExp, circular refs — structured clone or recursive

Q174. Merge two objects deeply (recursive merge), not shallowly.

Q175. Group an array of objects by a given key.

groupBy([{type:'a',v:1},{type:'b',v:2},{type:'a',v:3}], 'type') // → { a:[...], b:[...] }

Q176. Implement [Link](obj, keys) that returns a new object with only the specified keys.

Q177. Implement [Link](obj, keys) that returns a new object excluding the specified keys.

Q178. Count the frequency of words in a sentence using a Map.

Q179. Find all unique elements that appear only in one of two arrays (symmetric difference).
■ Focus: Use two Sets

Q180. Implement an LRU (Least Recently Used) cache with get and put operations, each O(1).

JS & React Frontend Interview Master Kit • Page 9

 ■ Focus: Map preserves insertion order — use it cleverly

§ 2.5 Recursion & Divide & Conquer

Q181. Implement a recursive function to calculate the sum of all numbers in a nested array.

Q182. Write a recursive function to find the depth of a nested object.

Q183. Implement merge sort in JavaScript.

Q184. Implement quick sort in JavaScript.

Q185. Solve the Tower of Hanoi for n discs. How many moves does it take?
■ Focus: 2^n - 1 moves

Q186. Given a number n, return all valid combinations of n pairs of parentheses.

Q187. Implement a function that searches a nested object for a given key and returns its value.

Q188. Write a recursive deepFreeze function that freezes all nested objects.

§ 2.6 Functional & Async Patterns

Q189. Implement [Link]() from scratch.

Q190. Implement a function that runs an array of async tasks with a concurrency limit of n.

Q191. Write a retry(fn, n) utility that retries a Promise-returning function up to n times on failure.

Q192. Implement a simple pub/sub (EventEmitter) with on, off, and emit methods.

Q193. Implement debounce(fn, delay) from scratch.

Q194. Implement throttle(fn, interval) from scratch.

Q195. Write a function that executes a list of functions in a pipeline, passing each result to the next.
pipe(double, addOne, square)(3) // → (3*2+1)^2 = 49

Q196. Implement a simple once(fn) utility that ensures a function can only be called once.

§ 2.7 DOM Manipulation & UI Logic

Q197. Implement an infinite scroll feature in vanilla JS. What API would you use to detect when the user reaches
the bottom?

Q198. Write a vanilla JS function that dynamically creates a table from a JSON array of objects.

Q199. Implement a simple client-side search/filter on a list of items rendered in the DOM.

Q200. Write a drag-and-drop reorder list using only vanilla JS events.

Q201. Implement a basic modal (show/hide) using vanilla JS and CSS. Ensure it closes on outside click and
Escape key.

Q202. Build a simple accordion component without any framework.

Q203. Explain and implement virtual DOM diffing at a conceptual level.

■ Focus: Compare two JS objects representing DOM trees, produce a list of patches

§ 2.8 Design Patterns in JavaScript

Q204. Implement the Singleton pattern in JavaScript. When should you avoid it?

Q205. Implement the Observer pattern (different from pub/sub — explain the distinction).

Q206. Implement a simple Command pattern with undo support.

JS & React Frontend Interview Master Kit • Page 10

Q207. Explain the Factory pattern. Write a function that creates different types of notifications.

Q208. What is the Module pattern and how does it relate to IIFE and closures?

Q209. Implement a basic Strategy pattern for sorting (different sort algorithms selectable at runtime).

§ 2.9 API Calls, Data Transformation & State

Q210. Write a fetch wrapper that adds an auth token header and handles 401 responses by refreshing the token.

Q211. Transform a flat array of category items into a nested tree structure based on parent-id.

Q212. Serialize and deserialize a JavaScript object that may contain Date objects through JSON correctly.

Q213. Given a list of users with roles, write a function that groups them by role using reduce().

Q214. Implement a simple client-side pagination function given a data array and page size.

Q215. Write a function that deep-diffs two JSON objects and returns an object describing the changes.

§ 2.10 Classic Logic & Tricky Output Puzzles

Q216. What is the output?
for(var i=0;i<3;i++){ setTimeout(()=>[Link](i), 1000); }
■ Focus: 3 3 3 — classic closure-in-loop gotcha

Q217. What does this print?

[Link](typeof typeof 42);

Q218. What is the output?

[Link]("5" - 3); [Link]("5" + 3); [Link](true + true);

Q219. What is printed?

const obj = {}; obj.__proto__.greet = ()=>'hello'; [Link](({}).greet());

Q220. What does this return?

[1,2,3].map(parseInt)
■ Focus: [1, NaN, NaN] — map passes (elem, index, arr) to parseInt

Q221. What is the output of this code?

function foo(){ return { bar: 1 }; } [Link](foo());
■ Focus: ASI — Automatic Semicolon Insertion after return

Q222. What is printed?

const a = [1,2,3]; const b = a; [Link](4); [Link]([Link]);

Q223. Predict and explain the output:

[Link](1 < 2 < 3); [Link](3 > 2 > 1);
■ Focus: Left-to-right: (1<2)=true → true<3 → 1<3=true; (3>2)=true → true>1 → 1>1=false

Q224. What is the result?

(function(){ var a = b = 3; })(); [Link](typeof a); [Link](typeof b);
■ Focus: b leaks to global; a is local

Q225. What does this print and why?

const arr = [1, [2, [3, [4]]]]; [Link]([Link](1)); [Link]([Link](Infinity));

Q226. What is the output?

[Link](1) .then(x => x + 1) .then(x => { throw x; }) .catch(x => x * 2) .then(x =>
[Link](x));
■ Focus: 4 — error caught, multiplied

JS & React Frontend Interview Master Kit • Page 11

Q227. What prints here, and in what order?
async function main(){ [Link](1); await null; [Link](2); } main(); [Link](3);
■ Focus: 1 3 2 — await yields, sync continues

Q228. What is the output?

const set = new Set([1,1,2,2,3]); [Link]([...set]);

Q229. Write a one-liner to get the unique values from a nested array of numbers.

Q230. Implement a function sleep(ms) that pauses execution for ms milliseconds in an async function.

§ 2.11 Bonus — Senior-Level Challenges

Q231. Implement a simple reactive system (like Vue's reactivity) using Proxy that re-renders when a property
changes.

Q232. Write an immutable update() utility for nested state that updates a value at a given path without mutating.

Q233. Implement a simple templating engine that replaces {{key}} placeholders with values from a data object.

Q234. Build a URL builder class that supports chaining: new

URL().host('[Link]').path('/users').query({id:1}).build().

Q235. Write a function flatten(obj) that flattens a nested object into dot-notation keys.
flatten({a:{b:{c:1}}}) // → { 'a.b.c': 1 }

Q236. Implement a simple state machine in JavaScript that transitions between states based on events.

Q237. Write a function that takes an async iterator and batches items into arrays of size n.

Q238. Implement a simple version of [Link]() that handles objects, arrays, strings, numbers, booleans,
and null.

Q239. Write a type-safe deepGet(obj, path) function where path is a dot-separated string.
deepGet({a:{b:{c:42}}}, 'a.b.c') // → 42

Q240. Implement a zip function that combines multiple arrays element-wise.

zip([1,2,3],['a','b','c']) // → [[1,'a'],[2,'b'],[3,'c']]

Q241. Write a function that takes a list of middleware functions and returns a composed middleware (like Express's
next chain).

Q242. Implement [Link]() from scratch.

Q243. Build a simple task scheduler that runs tasks in priority order using a min-heap.

Q244. Implement a trie data structure with insert and search methods for autocomplete.

Q245. Write a function that checks if a deeply nested object satisfies a given predicate at every leaf node.

Q246. Implement a function that takes a tree (adjacency list) and returns its BFS level-order traversal.

Q247. Write a tagged template literal that prevents XSS by escaping HTML entities in interpolated values.

Q248. Implement a simple Observable class with subscribe, next, error, and complete methods.

Q249. Given a large dataset, implement virtual scrolling — only render items in the visible viewport.
■ Focus: Calculate visible range from scrollTop, itemHeight, containerHeight

Q250. Explain and implement structural sharing for immutable data — how does it save memory?

Q251. Write a function asyncQueue() that queues up async tasks and executes them one at a time.

Q252. Implement a simple in-memory key-value store that supports TTL (time-to-live) expiry on keys.

JS & React Frontend Interview Master Kit • Page 12

■ Quick-Reference Cheat Sheet
Concept Key Point

Hoisting var declarations hoisted; let/const in TDZ

Closure Inner fn accesses outer scope after outer fn returns

this (4 rules) Default → global/undefined | Implicit → obj | Explicit → call/apply/bind | new →

fresh obj

Event Loop Call stack → Microtasks (Promises) → Macrotasks (setTimeout)

== vs === == triggers coercion; === checks type + value

map/filter/reduce map → transform; filter → subset; reduce → accumulate

Promise states pending → fulfilled | pending → rejected

async/await async fn returns Promise; await pauses fn, not thread

Prototype chain Property lookup walks __proto__ until null

Debounce vs Throttle Debounce: fires after quiet period | Throttle: fires at most every interval

var/let/const var: function scope, hoisted | let/const: block scope, TDZ

Spread vs Rest Spread: expand iterable | Rest: collect into array

Deep vs Shallow copy Shallow: top-level copy | Deep: full recursive copy

Set vs Map Set: unique values | Map: key-value with any key type

Generator function* yields values lazily; next() resumes

Proxy Intercepts object operations (get, set, has, etc.)

WeakMap/WeakRef Holds weak refs; entries can be GC'd

typeof null 'object' — historic JS bug

ASI Semicolons inserted after return, break, continue — watch your line breaks

■ Tip: Study the WHY, not just the WHAT. Interviewers want reasoning.

JS & React Frontend Interview Master Kit • Page 13