Data Structures Hiding in Your Codebase: A Field Guide for Frontend Engineers

60 questions · by Quizbun

Algorithms feel abstract until you spot them in the code you already ship. This quiz is for frontend engineers who want to understand algorithms by recognising the data structures already running their UI: the DOM as a tree, a bundler's imports as a directed graph solved by topological sort, the command palette as a trie, undo/redo as stacks and the task queue as a queue, React's scheduler as a min-heap, and SWR/React Query as LRU caches. Six topics, sixty questions, every answer anchored in real browser and framework behaviour.

Start

Questions

Not answered. Using tree terminology on the DOM, what is a leaf node?
Not answered. element.closest('section') searches which set of nodes?
Not answered. What is the depth of the root node in a tree?
Not answered. document.querySelectorAll('div') returns matches in document order. Which traversal produces that exact order?
Not answered. A file-explorer component renders a folder by rendering each child, and renders each child folder the same way. This self-similar rendering is most naturally expressed with…
Not answered. Walking a deeply nested structure (say, attacker-supplied JSON 50,000 levels deep) with naive recursion risks which runtime failure, and why?
Not answered. Event delegation attaches one listener to a parent instead of many on its children. Which DOM mechanism makes that work?
Not answered. Select every true statement about DOM event propagation (capture, target, bubble).
Not answered. Which of these everyday DOM operations are really tree traversals? Select all that apply.
Not answered. Which statements correctly map tree terminology onto the DOM? Select all that apply.
Not answered. From a bundler's point of view, your import statements across files form which structure?
Not answered. To emit modules so that each one is defined before the modules that import it, the bundler computes a…
Not answered. Why can a circular import (A imports B, B imports A) have no valid topological order?
Not answered. Tree-shaking removes code that's never used. In graph terms, which exports survive?
Not answered. A task runner must run build before deploy, and test before deploy. Computing a legal run order from these 'must-run-before' constraints is exactly…
Not answered. Select every import setup that introduces a cycle in the module graph.
Not answered. Which statements about a DAG (directed acyclic graph) are true? Select all that apply.
Not answered. Select every true statement about dependency resolution in bundlers and package managers.
Not answered. Which of these are genuine ways to produce a topological ordering of a DAG? Select all that apply.
Not answered. Name the classic graph algorithm that emits modules so every dependency precedes its dependents, and orders build tasks from 'must-run-before' constraints. (Two words.)
Not answered. How does a trie (prefix tree) organise a set of strings?
Not answered. Looking up a prefix of length L in a trie costs about…
Not answered. A Cmd-K palette filters 50,000 commands with list.filter(c => c.startsWith(q)) on every keystroke. Why does a trie scale better?
Not answered. Some HTTP routers match URL paths with a radix (compressed) trie. What does the compression actually do?
Not answered. A trie answers which kind of query in O(L)?
Not answered. What's the main price a trie pays for its fast prefix lookups, compared with a plain array of strings?
Not answered. Which statements about tries are true? Select all that apply.
Not answered. Where do tries (or their compressed radix-tree cousins) realistically show up in frontend work? Select all that apply.
Not answered. You need fast prefix queries over 50,000 strings. Which statements are true? Select all that apply.
Not answered. Name the single-character-per-edge tree that backs fast autocomplete and gives O(L) prefix lookup. (One word.)
Not answered. A stack serves its elements in which order?
Not answered. The browser's task/callback queue (and a render queue) serves queued work in which order?
Not answered. Undo/redo is classically two stacks. A new action pushes onto the undo stack. Pressing Undo pops from the undo stack and pushes onto…
Not answered. After several Undos, the user makes a brand-new edit. What must happen to the redo stack?
Not answered. You click through several links, then press the browser's Back button. Back pops from which structure?
Not answered. Undo history is capped at 100 steps. When the 101st action arrives, a well-behaved bounded history should…
Not answered. Which statements about stack and queue operations are true? Select all that apply.
Not answered. Which of these UI/runtime mechanisms behave like a stack (LIFO)? Select all that apply.
Not answered. Select every true statement about a two-stack undo/redo system.
Not answered. Undo, the browser's Back button, and the JavaScript call stack are all the same LIFO structure. Name it. (One word.)
Not answered. A binary min-heap maintains which invariant?
Not answered. Why is reading the most urgent task (peek) an O(1) operation in a min-heap?
Not answered. Inserting a task into a binary heap is O(log n) because…
Not answered. React's scheduler keeps its pending units of work in a min-heap keyed by…
Not answered. Compared with keeping the task list in a fully sorted array, what does a heap trade?
Not answered. A binary heap is a complete binary tree, so it can be stored as a plain array with no pointers. For a node at 0-based index i, where are its children?
Not answered. Which statements about heaps and priority queues are true? Select all that apply.
Not answered. Where do min-heaps / priority queues realistically show up? Select all that apply.
Not answered. A min-heap is stored in a 0-based array. Which statements are true? Select all that apply.
Not answered. A scheduler's binary heap holds n = 1000 pending tasks. What is the heap's height — the number of edges on the longest path from the root down to a leaf? Enter a whole number.
Not answered. A bounded LRU cache is full and a new key arrives. Which entry does it evict?
Not answered. How does a textbook LRU cache get O(1) get and O(1) eviction at the same time?
Not answered. A SWR / React Query entry is gone and a 'fresh' network fetch fires. Besides staleness, which cache behaviour can explain this?
Not answered. You memoize results in a plain Map keyed by argument, and never cap it. Over a long session with varied inputs, what happens?
Not answered. JavaScript Map preserves insertion order. What's the simplest way to cap it at 100 entries with rough-LRU eviction?
Not answered. Match each eviction policy to what it drops. Which statements are correct? Select all that apply.
Not answered. Select every true statement about an LRU cache.
Not answered. Your render reads the same query twice and the second read is instant. Which statements are true? Select all that apply.
Not answered. You're capping a memoization Map at 100 entries. Which approaches are sound? Select all that apply.
Not answered. A cache that evicts the entry left unused the longest follows which policy? Give the three-letter acronym.