Debounce is a sliding window: algorithms for frontend engineers
You already ship algorithms, even if you've never called them that. These 50 questions connect five of them to code you write every day: stable sorting and locale-aware collation in data tables, sliding windows and two pointers in debounce, throttle, and infinite scroll, memoization that grows into dynamic programming (from useMemo to overlapping subproblems), edit distance and fuzzy matching in "did you mean…?" and fuzzy finders, and the greedy, backtracking, and line-breaking algorithms inside CSS. Every answer has been checked and links to MDN, Wikipedia, or a primary source so you can verify it yourself.
Questions
- Not answered. What makes a sorting algorithm stable?
- Not answered. A user sorts a table by Name, then clicks the Date header. Why do rows with the same date stay in name order only if the sort is stable?
- Not answered. What's the bug in
array.sort((a, b) => a < b)? - Not answered. Why does
[1, 2, 10, 20, 3].sort()produce[1, 10, 2, 20, 3]instead of numeric order? - Not answered. French users report that
"éclair"sorts after"zebra"in your list. What's the right fix? - Not answered. Since ES2019,
Array.prototype.sortis guaranteed stable. What exactly does the spec require? - Not answered. Which statements about stable sorting and comparators are true?
- Not answered. Which of these comparators correctly sort an array of numbers in ascending order?
- Not answered. Which
Intl.CollatorandlocaleComparebehaviors are real and useful for ordering UI lists? - Not answered. Type the value at index
1(the second element) of[1, 2, 10, 20, 3].sort(). - Not answered. What's the core difference between debounce and throttle?
- Not answered. A two-pointer or sliding-window scan replaces a brute-force nested loop. What does that usually do to the time complexity?
- Not answered. A fixed-window rate limiter (say, 100 requests per clock minute) has a well-known flaw that a sliding-window limiter fixes. What is it?
- Not answered. What behavior does a token-bucket limiter allow that a strict, perfectly even rate does not?
- Not answered. In a virtualized list, what's the point of overscan, rendering a few extra rows just outside the viewport?
- Not answered. Which scenario is the textbook fit for debounce rather than throttle?
- Not answered. Which statements about windowing techniques in the browser are true?
- Not answered. Which tasks are better served by throttle than by debounce?
- Not answered. Which problems can a sliding-window or two-pointer approach solve in a single O(n) pass?
- Not answered. With a sliding window, what's the length of the longest substring of
"abcabcbb"with no repeating characters? - Not answered.
useMemo,React.memo, and reselect selectors all use the same classic technique. Which one? - Not answered. Which two properties does a problem need for dynamic programming to be the right tool?
- Not answered. What distinguishes top-down memoization from bottom-up tabulation?
- Not answered. When can wrapping a value in
useMemomake a component slower? - Not answered. Why does this
useMemorecompute on every render? - Not answered. Naive recursive
fib(n)(two recursive calls, no cache) takes exponential time. What does memoization bring it down to? - Not answered. Which statements about memoization and dynamic programming are true?
- Not answered. What makes a correct memoization cache key?
- Not answered. Which trade-offs between top-down memoization and bottom-up tabulation are real?
- Not answered. You climb a staircase 1 or 2 steps at a time. How many distinct ways are there to climb 5 stairs?
- Not answered. What does the Levenshtein (edit) distance between two strings count?
- Not answered. What does computing Levenshtein distance with the classic DP grid cost, for strings of length n and m?
- Not answered. In an fzf-style fuzzy finder, why does typing
"fb"match"FooBar"? - Not answered. Why can naive fuzzy search over a large list be slow, around O(n·m) work per keystroke?
- Not answered. Good autocomplete ranks matches instead of just filtering them. For the query
"cap", which match should usually rank highest? - Not answered. Which statements about edit distance and fuzzy matching are true?
- Not answered. If fuzzy matching is a case-insensitive subsequence test, which queries match
"FooBar"? - Not answered. Which of these are real properties of practical fuzzy finders such as fzf and VS Code's Quick Open?
- Not answered. What is the Levenshtein distance between
"kitten"and"sitting"? - Not answered. What is the Levenshtein distance between
"flaw"and"lawn"? - Not answered. When flex items grow to fill a row, how does the browser share out the leftover space?
- Not answered. How does a browser's default line-breaking algorithm decide where to wrap a paragraph?
- Not answered. TeX's Knuth–Plass algorithm wraps paragraphs more evenly than greedy wrapping. Which technique does it use?
- Not answered. What does
text-wrap: prettyactually do in Chrome today? - Not answered. When matching a selector like
.menu li aagainst an element, in which direction does a CSS engine check the parts, and why? - Not answered. Why can a regex like
/^(a+)+$/freeze the main thread on an input such as"aaaaaaaaaaaaaaaaaaaa!"? - Not answered. What characterizes a backtracking algorithm?
- Not answered. Which statements about greedy behavior in CSS layout are true?
- Not answered. Which of these involve backtracking?
- Not answered. Which statements about line breaking and text wrapping on the web are true?