ADVERT

JavaScript Cheatsheet

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

Reference index

Search JavaScript patterns

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

JavaScript code

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.

Search snippets by syntax, meaning, or notes to find the pattern you need quickly.
Use the section links to jump between basics, arrays, async workflows, and DOM examples.
Run and edit code in the in-browser playground, then copy snippets or output as needed.

Includes common language constructs, array transforms, async control flow, and DOM event patterns.
Every row pairs code syntax with intent and practical usage context.
One-click copy actions reduce friction while building or reviewing features.

The playground executes JavaScript in-browser so you can validate snippets quickly.
Load sample map, reduce, or async snippets as starting points for experiments.
Return values are stringified for easy inspection and sharing.

Does the playground execute code server-side?: No. Execution happens in the browser with local state updates for result and error output.
Can I run async code in the playground?: Yes. The runner supports async snippets, so await-based examples work directly.
Is this a full JavaScript specification?: No. It is a practical cheatsheet focused on common production patterns and quick lookup use cases.

ADVERT