JavaScript Cheat Sheet
A searchable, printable reference of modern JavaScript — syntax, arrays, strings, objects, async/await, DOM and ES2022+ features. Free.
Variables & types
10let x = 1;
Block-scoped, reassignable variable
const PI = 3.14;
Block-scoped constant binding
typeof value
Returns the type as a string
Number('42')
Convert a string to a number
String(42)
Convert a value to a string
parseInt('42px', 10)
Parse a leading integer (base 10)
Boolean(0)
Coerce a value to true/false
value ?? 'default'
Nullish coalescing (null/undefined only)
a?.b?.c
Optional chaining, short-circuits on null
Array.isArray(x)
Check whether a value is an array
Functions
9function add(a, b) { return a + b; }
Named function declaration
const add = (a, b) => a + b;
Arrow function with implicit return
const f = (a = 1) => a;
Default parameter value
function f(...args) {}
Rest parameters collect into an array
f(...arr)
Spread an array into arguments
const { a, b } = obj;
Object destructuring
const [x, y] = arr;
Array destructuring
(function(){})()
Immediately-invoked function (IIFE)
fn.bind(this)
Bind a fixed this context
Strings
10`Hello ${name}`
Template literal interpolation
str.length
Number of characters
str.includes('a')
Check if a substring exists
str.slice(0, 3)
Extract part of a string
str.replace(/a/g, 'b')
Replace matches (regex)
str.split(',')
Split into an array
str.trim()
Remove surrounding whitespace
str.toUpperCase()
Convert to upper case
str.padStart(3, '0')
Pad the start to a length
str.at(-1)
Character at index (supports negatives)
Arrays
11arr.map(x => x * 2)
Transform each element
arr.filter(x => x > 0)
Keep matching elements
arr.reduce((a, b) => a + b, 0)
Reduce to a single value
arr.find(x => x.id === 1)
First matching element
arr.some(x => x > 0)
True if any element matches
arr.every(x => x > 0)
True if all elements match
arr.includes(3)
Check for a value
arr.sort((a, b) => a - b)
Numeric ascending sort
[...new Set(arr)]
Remove duplicate values
arr.flat(Infinity)
Fully flatten nested arrays
arr.at(-1)
Last element (negative index)
Objects
9Object.keys(obj)
Array of own enumerable keys
Object.values(obj)
Array of own values
Object.entries(obj)
Array of [key, value] pairs
{ ...a, ...b }
Merge objects (spread)
Object.assign({}, a, b)
Copy/merge into a target
Object.freeze(obj)
Make an object immutable
{ [key]: value }
Computed property name
obj.hasOwnProperty('x')
Check for an own property
structuredClone(obj)
Deep clone an object
Async & promises
9async function f() {}
Declare an async function
await fetch(url)
Pause until a promise resolves
Promise.all([p1, p2])
Wait for all to resolve
Promise.allSettled([p1, p2])
Wait for all to settle
Promise.race([p1, p2])
Resolve with the first to settle
new Promise((res, rej) => {})
Create a promise manually
try { await f(); } catch (e) {}
Handle async errors
setTimeout(fn, 1000)
Run after a delay (ms)
queueMicrotask(fn)
Schedule a microtask
Control flow
9if (a) {} else if (b) {} else {}
Conditional branches
a ? b : c
Ternary expression
switch (x) { case 1: break; }
Multi-way branch
for (const x of arr) {}
Iterate values (iterables)
for (const k in obj) {}
Iterate object keys
while (cond) {}
Loop while a condition holds
arr.forEach((x, i) => {})
Run a callback per element
break / continue
Exit or skip a loop iteration
label: for (...) { break label; }
Break out of nested loops
DOM & events
10document.querySelector('.x')
First matching element
document.querySelectorAll('.x')
All matching elements (NodeList)
el.addEventListener('click', fn)
Attach an event listener
el.classList.toggle('active')
Toggle a CSS class
el.dataset.id
Read a data-id attribute
el.textContent = 'hi'
Set text safely (no HTML)
el.setAttribute('aria-hidden', true)
Set an attribute
e.preventDefault()
Cancel the default action
el.closest('.parent')
Nearest matching ancestor
document.createElement('div')
Create a new element
Classes & modules
9class A extends B {}
Class with inheritance
constructor() { super(); }
Initialize and call the parent
#private = 1;
Private class field
static create() {}
Static method on the class
get value() {}
Getter accessor
export default fn;
Default module export
export { a, b };
Named module exports
import x, { y } from './m.js'
Default + named imports
const m = await import('./m.js')
Dynamic import
No entry matches “:q”.
Need help?
Found an issue with this tool? Let our team know.