The language primitives, DOM operations, async patterns and pitfalls you actually use in vanilla JS. All rows are plain text - search to filter, click Copy to grab the pattern.
Reference rack
STATUSREADY
ROWS54
NETWORKLOCAL
MODEREFERENCE
| Item / pattern | What it means / how to use it | |
|---|---|---|
| let / const / var | Block-scoped / block-scoped immutable binding / legacy function-scoped var. | |
| console.log(x) | Basic debug output; use console.table for arrays and objects. | |
| typeof x / x instanceof C | Primitive type check / prototype-chain check. | |
| === vs == | Strict equality (no coercion) versus loose equality (coerces types); nearly always use ===. | |
| `${name}`-template literals | String interpolation and multi-line strings with backticks. | |
| Array.map / filter / reduce | map=project, filter=keep matches, reduce=aggregate to one value. | |
| Array.find / findIndex / some / every | Predicate searches: first match, its index, any, and all. | |
| Object.keys / values / entries | Iterate an object's enumerable keys, values, or both. | |
| Spread ... / rest ...args | Copy and merge arrays/objects; collect the rest of function args. | |
| const { a, b } = obj | Destructuring pulls named properties or array indexes into variables. | |
| x ?? fallback / x?.prop | Nullish coalescing (fallback only for null/undefined) and optional chaining. | |
| class Foo extends Bar | ES6 class syntax with inheritance; super() before this. | |
| try / catch / finally | Error handling; catch receives the error, finally always runs. | |
| throw new Error("...") | Raise a custom error with a message and stack. | |
| new Promise((resolve, reject)) | Create an async value; settle exactly once. | |
| async / await | Sugar over promises; await pauses the async function until the promise settles. | |
| Promise.all / Promise.allSettled | Parallel promises; all rejects fast, allSettled always resolves with results. | |
| fetch(url, options) | Network call returning a Promise<Response>; await then read .json(). | |
| JSON.parse / JSON.stringify | Parse strings to objects and serialize objects back to strings. | |
| document.querySelector(sel) | First element matching a CSS selector. | |
| document.querySelectorAll(sel) | NodeList of all matches; wrap in Array.from() to use array methods. | |
| document.getElementById(id) | The fastest lookup by id. | |
| textContent vs innerHTML | textContent is safe plain text; innerHTML parses markup and can create XSS. | |
| el.addEventListener(type, fn) | The preferred way to attach events, over inline onclick. | |
| el.classList.add / remove / toggle | Class manipulation with no string handling. | |
| setAttribute / getAttribute / el.dataset | Attribute access; dataset maps data-* keys. | |
| document.createElement("div") | Create an element programmatically. | |
| document.createTextNode("...") | A safe text node - insert untrusted strings this way. | |
| appendChild / insertBefore / replaceChild | Node tree manipulation. | |
| el.closest(sel) | Walk up the tree until the selector matches or hit the root. | |
| Event delegation | Attach one listener on a parent and use e.target.closest() for dynamic children. | |
| e.preventDefault() / e.stopPropagation() | Stop default behavior / stop the event from bubbling. | |
| setTimeout(fn, ms) / setInterval(fn, ms) | One-shot and repeating timers. | |
| requestAnimationFrame(fn) | Schedule work before the next repaint - smooth 60fps animation. | |
| localStorage.setItem / getItem / removeItem | Persistent string key/value storage; JSON encode objects. | |
| sessionStorage | Same API but clears when the tab closes. | |
| navigator.clipboard.writeText(...) | Async clipboard copy; requires a secure context. | |
| URL.createObjectURL(blob) | Makes a blob URL for downloads or media; revoke with revokeObjectURL. | |
| el.scrollIntoView({ block: "nearest" }) | Scroll an element into view. | |
| IntersectionObserver | Callback when an element enters or exits the viewport - lazy loading, tracking. | |
| WebSocket(url) | Full-duplex persistent connection for real-time features. | |
| new FormData(form) | Collect form fields to send as multipart in fetch(). | |
| structuredClone(value) | Deep-clone objects, arrays and even circular structures - safer than JSON tricks. | |
| new AbortController() | Cancel fetch or timeouts via the signal option. | |
| export / import | Share code between modules: import { x } from "./m.js". | |
| "use strict" | Opt a script or function into strict mode (no silent failures). | |
| Date / Intl.DateTimeFormat | Date handling; Intl gives locale-aware formatting. | |
| 123n BigInt / Number.isFinite | Arbitrary-precision integers; robust number checks. | |
| Symbol | "Symbol()" creates unique immutable keys for objects. | |
| WeakMap / WeakSet | Auto-garbage-collected dictionaries keyed by objects - good for caches. | |
| RegExp.test / exec | test = boolean match; exec = full match with groups. | |
| function* gen() + yield | Generator functions that pause and resume iteration. | |
| Proxy / Reflect | Trap object operations for validation, observation, defaults. | |
| MutationObserver | Watch DOM changes - new nodes, removed nodes, attribute edits. |