JavaScript in the browser

your loop over ten thousand rows froze the whole tab, including the scroll and the spinner.

Main thread

the error trace reads bottom to top and shows you every function that was still waiting when it threw.

Call stack

your `setTimeout(fn, 0)` did not run immediately, it ran after the browser got a chance to paint.

Task

the promise callback ran before the timeout you scheduled first, and before the browser painted anything.

Microtask

you moved the animation out of `setInterval` and it finally stopped stuttering at odd moments.

requestAnimationFrame

you deferred the analytics work until the browser said it had nothing better to do.

requestIdleCallback

you moved the parsing off to another thread and the interface kept responding while it ran.

Web worker

you clicked the button and the click handler on its container ran too, without you binding anything there.

Event bubbling

you passed `{ capture: true }` and your handler ran before the one on the element that was actually clicked.

Event capturing

you put one click handler on the list and read `event.target` to work out which row was clicked.

Event delegation

you stopped the form from navigating away but the parent's handler still ran.

preventDefault

you stopped the click from reaching the document and three unrelated features quietly broke.

stopPropagation

the console warned that your scroll handler blocked scrolling, so you marked it passive.

Passive event listener

you wait until the user stops typing for three hundred milliseconds and only then send the request.

Debounce

you let the scroll handler run at most once every hundred milliseconds no matter how fast the events arrive.

Throttle

the callback still had the variable from the function that created it, long after that function returned.

Closure

the interval you set up on mount kept logging the count as zero no matter how many times you clicked.

Stale closure

you passed the method as a callback and it lost the object it belonged to.

this binding

you called the function on line three and it worked, even though it is declared on line forty.

Hoisting

you got 'cannot access before initialization' on a `const` that is clearly declared right there in the file.

Temporal dead zone

the object did not have the method but calling it worked anyway, because something further up did.

Prototype chain

the object had exactly the same contents as last render and the component re-rendered anyway.

Referential equality

the comparison checked each top-level property and still said unchanged, because the nested object was mutated in place.

Shallow equality

you compared the two API responses field by field, all the way down, to decide whether to update.

Deep equality

you posted the object to a worker and got a real deep copy on the other side, but the functions were gone.

Structured clone

memory in the tab keeps climbing across navigations and never comes back down.

Garbage collection

you removed the element from the page but a variable still points at it, so it never gets collected.

Detached DOM node

the component unmounted mid-request, so you cancelled the fetch instead of letting it resolve into nothing.

AbortController

the request failed and nothing happened at all — no error boundary, no message, just a line in the console.

Unhandled rejection