ADVERT

🧠 JavaScript Cheatsheet

Modern JavaScript reference packed with syntax basics, array helpers, async patterns, modules, and DOM tips.

Interactive JavaScript cheat sheet with searchable snippets, one-click copy, and a local code playground for quick validation.

JS Playground

Run snippets locally in-browser. Return a value to inspect output.

Declarations, functions, and object/array ergonomics.

Snippet	What it does	Why it matters
`const answer = 42;`	Block-scoped constant	Default to const and switch to let only when reassignment is required.
`let total = 0;`	Mutable binding	Keep mutable scope tight to reduce side-effects.
`const sum = (a, b) => a + b;`	Arrow function	Lexical this and concise expressions for callbacks.
`const { id, name } = user;`	Destructuring	Pull only required fields to keep code explicit.

Transform, filter, and summarize collections.

Snippet	What it does	Why it matters
`items.map((item) => item.id)`	Projection	Creates a new array without mutating source values.
`items.filter((item) => item.active)`	Selection	Use for UI filtering, guards, and feature flags.
`items.reduce((sum, n) => sum + n, 0)`	Accumulation	Build aggregates, maps, and grouped results.
`[...new Set(items)]`	Deduplication	Fast unique list generation for primitives.

Promise workflows and resilient fetch handling.

Snippet	What it does	Why it matters
`const data = await fetch(url).then((r) => r.json());`	Async data loading	Wrap in try/catch for robust error handling.
`const results = await Promise.all(tasks);`	Parallel tasks	Use allSettled when partial failures are acceptable.
`const controller = new AbortController();`	Request cancelation	Abort stale requests in interactive UIs.
`try { ... } catch (error) { ... }`	Error boundaries	Capture context before rethrowing or surfacing messages.

Vanilla browser interactions for fast interfaces.

Snippet	What it does	Why it matters
`document.querySelector('[data-role="button"]')`	Element selection	Prefer stable selectors over brittle class-name chains.
`button.addEventListener('click', handleClick)`	Event binding	Remove listeners during cleanup in dynamic screens.
`requestAnimationFrame(render)`	Smooth frame updates	Use for animation and layout-sensitive updates.
`element.dataset.state = 'open'`	Dataset API	Useful for stateful CSS hooks and instrumentation.

ADVERT