const x = 10 Block-scoped constant
let y = 20 Block-scoped variable
typeof x Get type as string
const { a, b } = obj Object destructuring
const [a, b] = arr Array destructuring
const merged = { ...obj1, ...obj2 } Spread/merge objects
const copy = [...arr] Spread/copy array
x ?? fallback Nullish coalescing (null/undefined only)
obj?.prop?.nested Optional chaining
[1, 2, 3] Create an array
arr.push(item) Add item to end
arr.pop() Remove and return last item
arr.shift() / arr.unshift(item) Remove first / add to start
arr.map(x => x * 2) Transform each element
arr.filter(x => x > 0) Filter elements by condition
arr.reduce((acc, x) => acc + x, 0) Reduce to single value
arr.find(x => x.id === 1) Find first matching element
arr.findIndex(x => x > 5) Find index of first match
arr.some(x => x > 0) Check if any element matches
arr.every(x => x > 0) Check if all elements match
arr.includes(item) Check if item exists
arr.flat(Infinity) Flatten nested arrays
arr.sort((a, b) => a - b) Sort numerically ascending
arr.slice(1, 3) Get subarray (non-mutating)
arr.splice(1, 2, ...items) Remove/insert at index (mutating)
[...new Set(arr)] Remove duplicates
Array.from({ length: 5 }, (_, i) => i) Create array from range
const obj = { key: "value" } Create an object
Object.keys(obj) Get array of keys
Object.values(obj) Get array of values
Object.entries(obj) Get array of [key, value] pairs
Object.assign({}, obj1, obj2) Merge objects (shallow)
structuredClone(obj) Deep clone an object
Object.freeze(obj) Make object immutable (shallow)
"key" in obj Check if key exists
delete obj.key Delete a property
const { unwanted, ...rest } = obj Omit a key via destructuring
function fn(x) { return x } Function declaration
const fn = (x) => x * 2 Arrow function
const fn = (x = 10) => x Default parameter
const fn = (...args) => args Rest parameters
fn(1, ...arr) Spread arguments
setTimeout(fn, 1000) Delay execution by ms
setInterval(fn, 1000) Repeat execution every ms
function* gen() { yield 1 } Generator function
async function fn() {
const res = await fetch(url);
return res.json();
} Async/await function
fetch(url).then(r => r.json()) Fetch with .then() chain
Promise.all([p1, p2]) Wait for all promises
Promise.race([p1, p2]) First promise to resolve/reject
Promise.allSettled([p1, p2]) Wait for all (resolved or rejected)
new Promise((resolve, reject) => { ... }) Create a new promise
try {
await fn();
} catch (e) {
console.error(e);
} Async error handling
`Hello ${name}` Template literal
s.includes("sub") Check if substring exists
s.startsWith("pre") / s.endsWith("suf") Check start/end
s.split(",") Split into array
s.trim() Remove whitespace from both ends
s.replace(/regex/g, "new") Replace with regex (global)
s.padStart(5, "0") Pad start to length
s.repeat(3) Repeat string N times
s.match(/pattern/g) Find all regex matches
s.at(-1) Get last character
document.querySelector(".class") Select first matching element
document.querySelectorAll("div") Select all matching elements
el.addEventListener("click", fn) Add event listener
el.classList.add("active") Add CSS class
el.classList.toggle("hidden") Toggle CSS class
el.textContent = "text" Set text content (safe)
el.setAttribute("data-id", "5") Set HTML attribute
el.style.color = "red" Set inline style
el.remove() Remove element from DOM
const m = new Map() Create a Map (any key type)
const s = new Set([1, 2, 3]) Create a Set (unique values)
for (const [k, v] of map) {} Iterate over Map entries
for (const item of iterable) {} for...of loop
Symbol("desc") Create unique symbol
import { fn } from "./module.js" ES module import
export default fn Default export
const proxy = new Proxy(target, handler) Create a Proxy
JavaScript Cheat Sheet — JS Reference & Syntax Guide
JavaScript landed in Netscape Navigator in 1995, written in ten days as a scripting layer for the browser, and has since accreted modules, classes, arrow functions, async/await and optional chaining — but the original equality rules, the original `this` binding and the original number type are still right there underneath. The reference below covers 75+ snippets across variables, arrays, objects, functions, promises, strings, DOM and ES6+. Most trouble in real code doesn't come from forgetting syntax. It comes from quirks that look ordinary but bite. `==` does type coercion and quietly returns true for `0 == ""`, which is why `===` is the default in lint configs. The keyword `this` inside a regular function callback refers to the global object or `undefined` in strict mode, not the surrounding instance — arrow functions exist mostly to fix that. `0.1 + 0.2` returns `0.30000000000000004` because floating point is binary, not decimal. These are the snippets reached for when debugging exactly that — the strict comparison, the arrow callback, the destructure that strips a key — without rereading the ECMAScript spec each time.
Common pitfalls in JavaScript
A few patterns earn their place on the first screen of any JavaScript file. `const` and `let` replace `var` because they respect block scope and don't hoist as `undefined` — a habit that prevents whole classes of bug from ever happening. Optional chaining `obj?.prop?.nested` short-circuits on `null` or `undefined` instead of throwing, and pairs naturally with the nullish coalescing operator `??` which only falls back on `null`/`undefined` (not `0` or `""`). `structuredClone(obj)` deep-clones an object without the JSON round-trip that loses dates, regexes and Maps. And `Array.from({ length: n }, (_, i) => i)` is the cleanest way to build a numeric range without a `for` loop. Async errors deserve a `try/catch` around `await` rather than a dangling `.catch()` — the stack traces are dramatically more useful. The cheatsheet groups all of this into variables, arrays, objects, functions, promises, strings, DOM and ES6+ so the right section is one click away.
- 75+ practical JavaScript snippets
- 9 categories including DOM and ES6+
- Search across code and descriptions
- Filter by category
- One-click copy to clipboard
- Covers modern ES2023+ features
Free. No signup. Your inputs stay in your browser. Ads via Google AdSense (consent required).