Back to the Catalog
algorithms
performance
frontend
javascript

Big-O You Can Feel: Complexity Through Re-renders and DOM Work

30 questions · by Quizbun

Algorithms for frontend engineers — taught entirely through the costs you actually pay in the browser, so you feel asymptotic complexity instead of memorizing it. Three connected arcs build the intuition: reading Big-O straight off real render code (a .find() inside a .map(), querySelectorAll in a loop, layout thrashing from interleaved reads and writes, and the best, worst, and amortized cases plus the constant factors that bite the main thread); why array.includes() inside a filter quietly turns a list quadratic and how a Set or Map collapses the same lookup to O(1); and the binary search hiding in plain sight behind virtualized lists, sorted inserts, and lower-/upper-bound queries. Aimed at frontend developers who want to connect classic algorithms and data structures to the React, DOM, and rendering work they already do every day — and finally read complexity off code instead of textbook pseudocode.

Start

Questions

  1. Not answered. This list render runs one .find() for every row it .map()s. It feels instant with 10 rows but freezes at 10,000. Why?
  2. Not answered. Why is this loop slow even though it touches each element only once?
  3. Not answered. What is the running time of calling document.querySelectorAll('.cell') once per row?
  4. Not answered. For array.find(predicate) on an unsorted array of n items, which best/worst-case description is correct?
  5. Not answered. You push n items onto a JavaScript array one at a time. What is the amortized cost per push?
  6. Not answered. Two functions are both O(n) over the same list. Why might one still cause visible jank while the other does not?
  7. Not answered. Select every snippet whose running time is O(n²). Assume each array has length n.
  8. Not answered. Which statements about estimating complexity from real frontend code are true? Select all that apply.
  9. Not answered. Read the snippet and type its overall time-complexity class, for example O(n).
  10. Not answered. Read the snippet and type its worst-case time-complexity class, for example O(n).
  11. Not answered. What is the average time complexity of arr.includes(x) for an array of n elements?
  12. Not answered. A table renders n rows and stores the selected ids in an array selectedIds of length m. What is the cost of rows.filter(r => selectedIds.includes(r.id))?
  13. Not answered. What is the average time complexity of set.has(x) for a Set?
  14. Not answered. Which UI tasks get faster or simpler when backed by a Set instead of an array?
  15. Not answered. By what rule does a Set decide that two values are the same, and therefore duplicates?
  16. Not answered. Which expression removes duplicate primitives from arr in O(n) average time?
  17. Not answered. Which are genuine advantages of a Map over a plain {} object for an id → entity lookup table?
  18. Not answered. Using a plain {} as a string-keyed dictionary has footguns that a Map avoids. Which statements are true?
  19. Not answered. You hold an array of n entities and must look many of them up by id. Which statements are correct?
  20. Not answered. In the worst case, how many element comparisons does includes make in total? Enter the number.
  21. Not answered. A teammate runs a binary-search helper on an array that isn't actually sorted. The value is present. What's the most likely result?
  22. Not answered. With inclusive bounds (hi = arr.length - 1), which loop condition correctly searches for an exact match?
  23. Not answered. Filling the blank, why is lo = mid + 1 correct while lo = mid is a bug?
  24. Not answered. What does a lower-bound binary search return for a target x in a sorted array?
  25. Not answered. react-window and @tanstack/virtual render only the visible rows. With variable row heights, how do they find the first visible row for a given scrollTop?
  26. Not answered. You keep an array sorted by inserting each new item at the position a binary search finds, via splice. What's the cost of one insertion, and what dominates?
  27. Not answered. Select every task that is really a binary search over sorted data, even if it's never called that.
  28. Not answered. Which statements about binary search are true? Select all that apply.
  29. Not answered. Worst case, how many comparisons (halving steps) does binary search make on a sorted array of n = 1,000,000 items? Enter a whole number.
  30. Not answered. The list grows from 1,000,000 to 2,000,000 items. How many additional worst-case comparisons does binary search now need? Enter a whole number.