JavaScript Cheat Sheet

Variables & Scope

// Prefer const by default; let when rebinding is needed
const PI = 3.14159;           // block-scoped, can't reassign
let count = 0;                // block-scoped, can reassign
var legacy = "avoid";         // function-scoped, hoisted — avoid

// Destructuring
const { name, age = 0 } = user;          // object (with default)
const [first, ...rest] = items;           // array + rest
const { a: renamed } = obj;              // rename on destructure

// Nullish coalescing & optional chaining
const val = obj?.nested?.value ?? "default";

Data Types

Array Methods

const nums = [1, 2, 3, 4, 5];

// Transform
nums.map(n => n * 2);             // [2, 4, 6, 8, 10]
nums.filter(n => n > 2);          // [3, 4, 5]
nums.reduce((acc, n) => acc + n, 0); // 15
nums.flatMap(n => [n, n * 2]);    // [1,2, 2,4, 3,6, 4,8, 5,10]

// Find
nums.find(n => n > 3);            // 4 (first match)
nums.findIndex(n => n > 3);       // 3 (index of first match)
nums.some(n => n > 4);            // true
nums.every(n => n > 0);           // true
nums.includes(3);                 // true

// Mutate (changes original)
nums.push(6);                     // add to end
nums.pop();                       // remove from end
nums.unshift(0);                  // add to start
nums.shift();                     // remove from start
nums.splice(1, 2);                // remove 2 at index 1
nums.sort((a, b) => a - b);       // sort numerically

// Copy / combine (immutable patterns)
const copy = [...nums];
const merged = [...a, ...b];
const sliced = nums.slice(1, 3);  // [2, 3] (end exclusive)

Objects

// Shorthand properties & methods
const x = 1, y = 2;
const point = { x, y, toString() { return `(${this.x},${this.y})`; } };

// Spread & merge (shallow)
const merged = { ...defaults, ...overrides };

// Dynamic keys
const key = "name";
const obj = { [key]: "Alice" };   // { name: "Alice" }

// Useful Object methods
Object.keys(obj)                  // ["name"]
Object.values(obj)                // ["Alice"]
Object.entries(obj)               // [["name","Alice"]]
Object.fromEntries(entries)       // reverse of entries
Object.assign({}, a, b)          // merge (mutates first arg)
Object.freeze(obj)                // make immutable (shallow)
structuredClone(obj)              // deep clone (modern)

Functions & Closures

// Declaration (hoisted)
function add(a, b) { return a + b; }

// Expression (not hoisted)
const add = function(a, b) { return a + b; };

// Arrow (lexical this, implicit return for single expression)
const add = (a, b) => a + b;
const double = n => n * 2;       // parens optional for 1 param

// Default parameters & rest
function greet(name = "World", ...tags) { ... }

// Closures
function counter() {
  let n = 0;
  return { inc: () => ++n, get: () => n };
}
const c = counter();
c.inc(); c.inc(); c.get();       // 2

// IIFE (immediately invoked)
const result = (() => 42)();

Promises & Async/Await

// Promise
fetch("/api/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err))
  .finally(() => setLoading(false));

// Async / Await (same thing, cleaner syntax)
async function loadData() {
  try {
    const res = await fetch("/api/data");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    return data;
  } catch (err) {
    console.error(err);
  } finally {
    setLoading(false);
  }
}

// Parallel execution
const [users, posts] = await Promise.all([
  fetchUsers(),
  fetchPosts(),
]);

// Race / any
const first = await Promise.race([slow(), fast()]);
const anyOne = await Promise.any([p1, p2, p3]);

ES2015–2024 Highlights

Error Handling

// try / catch / finally
try {
  riskyOperation();
} catch (err) {
  if (err instanceof TypeError) { /* handle */ }
  console.error(err.message, err.stack);
} finally {
  cleanup();
}

// Custom errors
class AppError extends Error {
  constructor(message, public code: number) {
    super(message);
    this.name = "AppError";
  }
}

// Error types
new TypeError("wrong type");
new RangeError("out of range");
new ReferenceError("not defined");
new SyntaxError("invalid syntax");

DOM Quick Reference

// Select
document.querySelector(".class")        // first match
document.querySelectorAll("p")          // NodeList
document.getElementById("id")

// Create & insert
const el = document.createElement("div");
el.textContent = "Hello";
el.classList.add("active");
el.setAttribute("data-id", "42");
parent.append(el);                      // insert at end
parent.prepend(el);                     // insert at start
ref.before(el); ref.after(el);          // siblings

// Events
el.addEventListener("click", (e) => {
  e.preventDefault();
  e.stopPropagation();
});
el.removeEventListener("click", handler);

// Styles
el.style.color = "red";
el.style.cssText = "color:red; font-size:16px";
getComputedStyle(el).getPropertyValue("color");