ivangdavila_web/javascript.md

JavaScript Patterns and Traps

Type Coercion

• == vs === — Always use ===; "0" == false is true, "0" === false is false
• typeof null — Returns "object" (bug from JS v1); check with === null
• NaN !== NaN — Use Number.isNaN() not === NaN
• Array in boolean context — Empty array [] is truthy; check .length for emptiness

Async

• forEach doesn't await — Use for...of loop or Promise.all(arr.map(async...)) for parallel
• Unhandled rejection — Always .catch() or wrap in try/catch; uncaught rejections crash Node
• async function returns Promise — Even if you return a value, caller gets a Promise
• Race conditions — Multiple setState calls can overwrite; use functional updates or refs

DOM

• querySelector returns null — Check before accessing properties; document.querySelector('.x').classList crashes if .x missing
• Event delegation — Add listener to parent, check e.target; better than listeners on each child
• innerHTML security — Never insert user content with innerHTML; use textContent or sanitize
• Live vs static NodeLists — getElementsByClassName is live (updates); querySelectorAll is static

Objects/Arrays

• Shallow copy — {...obj} and [...arr] are shallow; nested objects share references
• Array holes — Array(5) creates holes; .map() skips them; use Array(5).fill() instead
• delete on array — Creates hole, doesn't shift; use .splice() to remove elements
• Object key order — Guaranteed insertion order for string keys; numeric keys sort ascending

Functions

• this in arrow functions — Lexically bound; can't be changed with .bind(), .call(), .apply()
• Default parameters evaluate — fn(x = Date.now()) evaluates on each call, not definition
• Rest parameters must be last — fn(...rest, other) is syntax error