cheat sheet
JavaScript Cheat Sheet
Every method, pattern, and ES6+ feature. Searchable, filterable by level, copy-ready.
/ to focus
JS Snippet Explainer
paste any JS expression
Snippet
Breakdown
Variables & Data Types
Quick reference
Declare constant
const name = 'value'
Declare variable
let count = 0
Check type
typeof value
Type conversion
Number('42')
Declarations
beginner
var, let, const - choosing the right declaration
const pi = 3.14; // block-scoped, never reassigned
let count = 0; // block-scoped, can be reassigned
var legacy = 'avoid'; // function-scoped, hoisted
Primitive data types
const str = 'hello'; // string
const num = 42; // number
const big = 9007199254740991n;// bigint
const bool = true; // boolean
const undef = undefined; // undefined
const empty = null; // null
const sym = Symbol('id'); // symbol
typeof and null gotcha
typeof 'hello' // → 'string'
typeof 42 // → 'number'
typeof true // → 'boolean'
typeof undefined // → 'undefined'
typeof null // → 'object' ← historical bug
typeof {} // → 'object'
typeof [] // → 'object' (use Array.isArray)
Type conversion
Number('42') // → 42
Number('') // → 0
Number(null) // → 0
Number(undefined)// → NaN
String(123) // → '123'
Boolean(0) // → false (falsy)
Boolean('') // → false (falsy)
Boolean([]) // → true (truthy!)
Operators & Equality
beginner
== vs === (always use ===)
1 == '1' // → true (coerces types)
1 === '1' // → false (strict, no coercion)
null == undefined // → true
null === undefined // → false
NaN === NaN // → false (use Number.isNaN)
Always use === unless you explicitly need type coercion
Nullish coalescing & optional chaining
const val = user?.name ?? 'Guest';
// ?. → short-circuits if null/undefined
// ?? → fallback only for null/undefined (not 0, '')
user?.address?.city // deep optional chain
arr?.[0] // optional index access
fn?.() // optional call
Logical assignment operators
a ||= 'default'; // assign if a is falsy
a &&= transform(a); // assign if a is truthy
a ??= 'fallback'; // assign if a is null/undefined
Functions
Quick reference
Arrow function
const fn = (x) => x * 2
Default param
function greet(name = 'World') {}
Destructure params
const { a, b } = obj
Explicit this
fn.call(ctx, arg1, arg2)
Function Types
beginner
Function declaration vs expression
// Declaration - hoisted, callable before definition
function add(a, b) { return a + b; }
// Expression - not hoisted
const add = function(a, b) { return a + b; };
// Arrow - no own 'this', implicit return
const add = (a, b) => a + b;
Default parameters & rest params
function greet(name = 'World') {
return `Hello, ${name}!`;
}
function sum(...nums) { // rest collects args
return nums.reduce((a, b) => a + b, 0);
}
IIFE - immediately invoked function
(function() {
// runs immediately, own scope
const private = 'hidden';
})();
// Arrow IIFE
(() => {
const local = 42;
})();
call, apply, bind
function greet(greeting, punct) {
return `${greeting}, ${this.name}${punct}`;
}
const user = { name: 'Alice' };
greet.call(user, 'Hi', '!'); // spread args
greet.apply(user, ['Hi', '!']); // array args
const bound = greet.bind(user, 'Hey'); // new fn, fixed this
Closures & Scope
intermediate
Closure - function retaining outer scope
function makeCounter() {
let count = 0;
return {
inc: () => ++count,
get: () => count,
};
}
const c = makeCounter();
c.inc(); c.inc();
c.get(); // → 2
Memoization with closure
function memoize(fn) {
const cache = new Map();
return function(...args) {
const key = JSON.stringify(args);
if (cache.has(key)) return cache.get(key);
const result = fn.apply(this, args);
cache.set(key, result);
return result;
};
}
Arrays
Quick reference
Transform items
arr.map(x => x * 2)
Filter items
arr.filter(x => x > 0)
Reduce to value
arr.reduce((acc, x) => acc + x, 0)
Merge arrays
[...arr1, ...arr2]
Core Methods
beginner
Add / remove elements
arr.push(item) // add to end → new length
arr.pop() // remove from end → removed item
arr.unshift(item) // add to start → new length
arr.shift() // remove from start → removed item
arr.splice(2, 1) // remove 1 item at index 2
map, filter, reduce
const doubled = arr.map(x => x * 2);
const evens = arr.filter(x => x % 2 === 0);
const sum = arr.reduce((acc, x) => acc + x, 0);
// Chain them
const result = arr
.filter(x => x > 0)
.map(x => x * 2)
.reduce((a, b) => a + b, 0);
Searching arrays
arr.find(x => x > 3) // first match or undefined
arr.findIndex(x => x > 3) // index or -1
arr.includes(5) // true/false
arr.indexOf(5) // index or -1
arr.some(x => x > 3) // any match?
arr.every(x => x > 0) // all match?
flat, flatMap, from
[1, [2, [3]]].flat() // → [1, 2, [3]]
[1, [2, [3]]].flat(Infinity) // → [1, 2, 3]
arr.flatMap(x => [x, x * 2]) // map + flatten 1 level
Array.from({ length: 3 }, (_, i) => i)
// → [0, 1, 2]
Sorting & Transforming
intermediate
Sorting (always provide comparator)
// Numbers
arr.sort((a, b) => a - b); // ascending
arr.sort((a, b) => b - a); // descending
// Strings
arr.sort((a, b) => a.localeCompare(b));
// Objects by property
arr.sort((a, b) => a.age - b.age);
sort() mutates the original array - use [...arr].sort() for immutable sort
Remove duplicates
// Primitives
const unique = [...new Set(arr)];
// Objects by property
const unique = arr.filter((v, i, a) =>
a.findIndex(t => t.id === v.id) === i
);
Group array items (Object.groupBy)
// ES2024
const grouped = Object.groupBy(
people,
person => person.department
);
// → { Engineering: [...], Design: [...] }
Objects
Quick reference
Destructure
const { a, b } = obj
Merge objects
{ ...obj1, ...obj2 }
Get keys
Object.keys(obj)
Get entries
Object.entries(obj)
Creating & Accessing
beginner
Object literal & shorthand
const name = 'Alice', age = 30;
const user = {
name, // shorthand property
age,
greet() { // shorthand method
return `Hi, I'm ${this.name}`;
},
['key_' + age]: true // computed key
};
Destructuring with defaults & rename
const { name, age = 25, city: location } = user;
// ^^^^ ^^^^^^^^^ ^^^^^^^^^^^^^^^
// key default rename to 'location'
// Nested
const { address: { city, zip } } = user;
// In function params
function show({ name, age = 0 }) { /*...*/ }
Object static methods
Object.keys(obj) // → ['a', 'b', ...]
Object.values(obj) // → [1, 2, ...]
Object.entries(obj) // → [['a',1], ...]
Object.assign({}, obj) // shallow copy
Object.freeze(obj) // immutable (shallow)
Object.fromEntries(pairs) // pairs → object
Deep clone (structured clone)
// Modern - handles Date, Map, Set, etc.
const deep = structuredClone(obj);
// JSON trick - only plain data, loses functions/undefined
const copy = JSON.parse(JSON.stringify(obj));
Map & Set
intermediate
Map - key-value store with any key type
const map = new Map();
map.set('key', 42);
map.get('key'); // → 42
map.has('key'); // → true
map.delete('key');
map.size; // → 0
// Iteration
for (const [k, v] of map) { /*...*/ }
Set - unique value collection
const set = new Set([1, 2, 2, 3]);
set.size; // → 3
set.add(4);
set.has(2); // → true
set.delete(2);
// Set operations
const union = new Set([...a, ...b]);
const inter = new Set([...a].filter(x => b.has(x)));
Strings
Quick reference
Template literal
`Hello, ${name}!`
Split & trim
str.split(',').map(s => s.trim())
Regex replace
str.replace(/pat/g, 'rep')
Pad string
str.padStart(10, '0')
String Methods
beginner
Searching & checking
str.includes('text') // true/false
str.startsWith('http') // true/false
str.endsWith('.js') // true/false
str.indexOf('sub') // index or -1
str.search(/regex/) // index or -1
str.match(/(\d+)/g) // array or null
Transforming strings
str.toUpperCase()
str.toLowerCase()
str.trim() // remove both ends
str.trimStart() // remove leading
str.trimEnd() // remove trailing
str.replace('a', 'b') // first match only
str.replaceAll('a', 'b')
Slicing & splitting
str.slice(1, 4) // chars 1–3
str.slice(-3) // last 3 chars
str.split(',') // array by delimiter
str.split('') // array of chars
str.repeat(3) // 'abc' → 'abcabcabc'
str.padStart(5, '0') // '42' → '00042'
Template literal tags (tagged templates)
function highlight(strings, ...values) {
return strings.reduce((result, str, i) =>
result + str + (values[i] ? `<b>${values[i]}</b>` : '')
);
}
const name = 'Alice';
highlight`Hello, ${name}!`;
Control Flow
Quick reference
Loop array
for (const item of arr) { }
Loop object
for (const [k, v] of Object.entries(obj)) { }
Try/catch
try { } catch (err) { }
Ternary
condition ? 'yes' : 'no'
Loops
beginner
for, for...of, for...in
// Classic for
for (let i = 0; i < arr.length; i++) { }
// for...of - iterables (arrays, strings, maps)
for (const item of arr) { }
// for...in - object keys (avoid for arrays)
for (const key in obj) {
if (obj.hasOwn(key)) { /*...*/ }
}
while & do...while
while (condition) { /* check first */ }
do {
/* runs at least once */
} while (condition);
switch with fall-through guard
switch (status) {
case 'active':
case 'enabled': // fall-through
handleActive(); break;
case 'inactive':
handleInactive(); break;
default:
handleUnknown();
}
Error Handling
beginner
try / catch / finally
try {
riskyOperation();
} catch (err) {
if (err instanceof TypeError) {
// handle type errors
}
console.error(err.message);
} finally {
cleanup(); // always runs
}
Custom error types
class AppError extends Error {
constructor(message, code) {
super(message);
this.name = 'AppError';
this.code = code;
}
}
throw new AppError('Not found', 404);
Async & Promises
Quick reference
Fetch JSON
await fetch(url).then(r => r.json())
Parallel await
await Promise.all([p1, p2])
All results
Promise.allSettled([p1, p2])
First to resolve
Promise.race([p1, p2])
Promises
intermediate
Creating and chaining promises
const p = new Promise((resolve, reject) => {
if (ok) resolve(value);
else reject(new Error('failed'));
});
p.then(val => process(val))
.catch(err => handleErr(err))
.finally(() => cleanup());
Promise combinators
// All must resolve (fails fast)
await Promise.all([p1, p2, p3]);
// All settle - never throws
const results = await Promise.allSettled([p1, p2]);
results.filter(r => r.status === 'fulfilled');
// First to resolve
await Promise.race([p1, timeout]);
// First to resolve (ignores rejections)
await Promise.any([p1, p2]);
async / await
intermediate
async function patterns
async function fetchUser(id) {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) throw new Error(res.statusText);
return res.json();
}
// Arrow async
const fetchUser = async (id) => {
const res = await fetch(`/api/users/${id}`);
return res.json();
};
Parallel vs sequential awaits
// Sequential - each waits for prior (slow)
const a = await fetchA();
const b = await fetchB();
// Parallel - both run simultaneously (fast)
const [a, b] = await Promise.all([fetchA(), fetchB()]);
Use Promise.all when operations are independent
Async iteration
async function* paginate(url) {
let nextUrl = url;
while (nextUrl) {
const res = await fetch(nextUrl);
const data = await res.json();
yield data.items;
nextUrl = data.nextPage;
}
}
for await (const items of paginate('/api/items')) { }
DOM Manipulation
Quick reference
Select element
document.querySelector('.sel')
Add listener
el.addEventListener('click', fn)
Toggle class
el.classList.toggle('active')
Insert HTML
el.insertAdjacentHTML('beforeend', html)
Selecting Elements
beginner
querySelector family
document.querySelector('.btn') // first match
document.querySelectorAll('.item') // NodeList
document.getElementById('main') // by id
document.getElementsByClassName('x') // live HTMLCollection
el.closest('.parent') // traverse up
el.matches('.active') // test selector
Modifying elements
el.textContent = 'safe text'; // no HTML parsing
el.innerHTML = '<b>bold</b>'; // parsed as HTML
el.setAttribute('href', '/path');
el.removeAttribute('disabled');
el.classList.add('active');
el.classList.remove('active');
el.classList.toggle('active');
el.style.display = 'none';
Events
beginner
addEventListener options
el.addEventListener('click', handler);
el.removeEventListener('click', handler);
// Options
el.addEventListener('click', handler, {
once: true, // auto-remove after first call
passive: true, // never calls preventDefault
capture: false, // bubble phase (default)
});
Event delegation
// One listener on parent instead of many children
document.querySelector('#list')
.addEventListener('click', e => {
const item = e.target.closest('[data-id]');
if (!item) return;
handleItem(item.dataset.id);
});
More efficient than adding listeners to each child
Custom events
// Dispatch
el.dispatchEvent(new CustomEvent('my-event', {
detail: { userId: 42 },
bubbles: true,
cancelable: true,
}));
// Listen
el.addEventListener('my-event', e => {
console.log(e.detail.userId);
});
ES6+ Features
Quick reference
Array destructure
const [a, b, ...rest] = arr
Object rest
const { a, ...rest } = obj
ES Module import
import { fn } from './module.js'
Default export
export default function fn() {}
Destructuring & Spread
intermediate
Array destructuring & swap
const [first, second, ...rest] = arr;
const [, , third] = arr; // skip elements
// Swap variables
let a = 1, b = 2;
[a, b] = [b, a];
Spread operator uses
// Copy array / object
const copy = [...arr];
const clone = { ...obj };
// Merge
const merged = [...arr1, ...arr2];
const updated = { ...defaults, ...overrides };
// Spread into function
Math.max(...nums);
fn(...args);
Modules
intermediate
Named and default exports/imports
// math.js - named exports
export const PI = 3.14;
export function add(a, b) { return a + b; }
export default class Calculator { }
// main.js - importing
import Calculator, { PI, add } from './math.js';
import * as math from './math.js'; // namespace
Dynamic import (code splitting)
// Load on demand
const { add } = await import('./math.js');
// Conditional loading
if (needsChart) {
const { Chart } = await import('./chart.js');
new Chart(canvas);
}
Classes
Quick reference
Basic class
class Animal { constructor(name) {} }
Extend class
class Dog extends Animal { }
Static method
static create(data) { }
Private field
#privateField = 'private'
Class Syntax
intermediate
Full class with getters, setters, static
class Person {
#age; // private field
static count = 0;
constructor(name, age) {
this.name = name;
this.#age = age;
Person.count++;
}
get age() { return this.#age; }
set age(v) {
if (v < 0) throw new RangeError('Invalid age');
this.#age = v;
}
static create(data) { return new Person(data.name, data.age); }
}
Inheritance with super
class Animal {
constructor(name) { this.name = name; }
speak() { return `${this.name} makes a noise.`; }
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // must call before this
this.breed = breed;
}
speak() { return `${this.name} barks.`; }
}
Mixins pattern
const Serializable = (Base) => class extends Base {
toJSON() { return JSON.stringify(this); }
static fromJSON(json) { return Object.assign(new this(), JSON.parse(json)); }
};
class User extends Serializable(Person) { }
Advanced Patterns
Quick reference
Debounce
debounce(fn, 300)
Proxy object
new Proxy(obj, handler)
Generator
function* gen() { yield 1; }
Intersection Observer
new IntersectionObserver(cb)
Performance Patterns
advanced
Debounce & throttle
function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
function throttle(fn, limit) {
let inThrottle;
return (...args) => {
if (!inThrottle) {
fn(...args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}
Generators & iterators
function* range(start, end, step = 1) {
for (let i = start; i < end; i += step) {
yield i;
}
}
[...range(0, 10, 2)] // → [0, 2, 4, 6, 8]
for (const n of range(1, 4)) {
console.log(n); // 1, 2, 3
}
Proxy & Reflect
advanced
Proxy for validation & logging
const validator = {
set(obj, prop, value) {
if (prop === 'age' && typeof value !== 'number') {
throw new TypeError('Age must be a number');
}
obj[prop] = value;
return true; // required
}
};
const person = new Proxy({}, validator);
person.age = 30; // ok
person.age = 'x'; // throws TypeError
WeakRef & FinalizationRegistry
const ref = new WeakRef(heavyObject);
// Later:
const obj = ref.deref();
if (obj) { /* still alive */ }
const registry = new FinalizationRegistry(key => {
console.log(`${key} was garbage collected`);
});
registry.register(heavyObject, 'myObj');
Useful Patterns
intermediate
Observer / pub-sub pattern
class EventEmitter {
#handlers = new Map();
on(event, fn) {
if (!this.#handlers.has(event)) this.#handlers.set(event, []);
this.#handlers.get(event).push(fn);
}
emit(event, data) {
this.#handlers.get(event)?.forEach(fn => fn(data));
}
off(event, fn) {
const fns = this.#handlers.get(event) ?? [];
this.#handlers.set(event, fns.filter(f => f !== fn));
}
}
Pipe / compose functions
// pipe - left to right
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
// compose - right to left
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const process = pipe(trim, toLowerCase, removeSpaces);
process(' Hello World '); // → 'helloworld'