JS Patterns

Learn by tweaking values and watching runtime behavior. A curated sandbox for the modern engineer.

Core concepts

EasyMastered

Debounce

Fires only after you stop typing for 300ms. Rapid keystrokes reset the timer.

Debounce

Fires only after you stop typing for 500ms. Rapid keystrokes reset the timer.

delay =ms
0
Keystrokes
0
Fired
MediumIn progress

Throttle

Move your mouse over the box. The handler fires at most once per 120ms.

Throttle

Move your mouse over the box. The handler fires at most once per 500ms.

delay =ms
Move mouse here
0
Mouse events
0
Fired
MediumIn progress

Memoize

Caches results by arguments. Same args -> instant return, no recomputation.

Memoize

Caches results by arguments. Same args -> instant return, no recomputation.

fn = fib  |  n = |  max cache =
0
Cache hits
0
Computed
HardNot started

Lazy Loading

Images are not fetched until they scroll into view. IntersectionObserver swaps data-src -> src on intersection.

Lazy Loading

Images are not fetched until they scroll into view. IntersectionObserver swaps data-src -> src on intersection.

rootMargin =px
8
Total
0
Loaded
8
Pending
image 1 - waiting...Lazy image 1
image 2 - waiting...Lazy image 2
image 3 - waiting...Lazy image 3
image 4 - waiting...Lazy image 4
image 5 - waiting...Lazy image 5
image 6 - waiting...Lazy image 6
image 7 - waiting...Lazy image 7
image 8 - waiting...Lazy image 8
EasyMastered

find() vs filter()

Linear scan vs building a new array — Big-O and early-exit behaviour in interviews.

find() vs filter()

Both iterate & test a predicate. find returns the first match (and stops). filter returns every match (and never stops early).

predicate = u =>
0
find() iters
0
filter() iters
—
find() returned
—
filter() returned
MediumNot started

Code Sandbox

Write any JavaScript. memoize, debounce, and throttle are provided (Monaco: globals; Sandpack: imported from a helper file).