JavaScript Cheat Sheet

Variables & Types

Data Types

Type Conversion

String(123)          // "123"
Number("42")         // 42
Number("abc")        // NaN
Boolean(0)           // false
Boolean("")          // false
Boolean(null)        // false
Boolean("hello")     // true
parseInt("42px")     // 42
parseFloat("3.14")   // 3.14
+"42"                // 42 (unary plus shorthand)

Strings

Arrays

Create & Access

const arr = [1, 2, 3];
arr[0]           // 1
arr.at(-1)        // 3 (last element)
arr.length        // 3
Array.isArray(arr) // true
Array.from("abc") // ["a", "b", "c"]
Array(5).fill(0)  // [0, 0, 0, 0, 0]

Mutating Methods

Non-Mutating Methods

// Common patterns
[1,2,3].map(x => x * 2)              // [2, 4, 6]
[1,2,3,4].filter(x => x > 2)           // [3, 4]
[1,2,3].reduce((sum, x) => sum + x, 0) // 6
[1,2,3].find(x => x > 1)               // 2
[...new Set([1,1,2,3])]                 // [1, 2, 3] (dedupe)

Objects

// Create
const obj = { name: "Alice", age: 30 };

// Access
obj.name              // "Alice"
obj["name"]           // "Alice"
obj?.address?.city    // undefined (optional chaining)

// Modify
obj.email = "a@b.com";  // add property
delete obj.age;          // remove property

Map & Set

// Map — key-value pairs (any key type)
const map = new Map();
map.set("key", "value");
map.get("key");        // "value"
map.has("key");        // true
map.delete("key");
map.size;              // 0

// Set — unique values
const set = new Set([1, 2, 2, 3]);
set.add(4);
set.has(2);            // true
set.delete(2);
set.size;              // 3
[...set]               // [1, 3, 4]

Functions

// Function declaration
function add(a, b) { return a + b; }

// Function expression
const add = function(a, b) { return a + b; };

// Arrow function
const add = (a, b) => a + b;
const greet = name => `Hello, ${name}!`;
const getObj = () => ({ key: "value" }); // return object

// Default parameters
function greet(name = "World") { return `Hi ${name}`; }

// Rest parameters
function sum(...nums) { return nums.reduce((a, b) => a + b, 0); }

// IIFE (Immediately Invoked)
(() => { console.log("runs now"); })();

Destructuring & Spread

// Array destructuring
const [a, b, ...rest] = [1, 2, 3, 4];
// a=1, b=2, rest=[3,4]

// Object destructuring
const { name, age, city = "NYC" } = person;
const { name: fullName } = person;  // rename

// Nested destructuring
const { address: { city } } = person;

// Spread operator
const arr2 = [...arr1, 4, 5];       // array spread
const obj2 = { ...obj1, key: "val" }; // object spread

// Function argument destructuring
function greet({ name, age }) {
  return `${name} is ${age}`;
}

Control Flow

// Ternary
const status = age >= 18 ? "adult" : "minor";

// Nullish coalescing (??) — null/undefined only
const val = input ?? "default";

// Logical OR (||) — any falsy value
const val = input || "default";

// Logical AND (&&) — short circuit
isValid && doSomething();

// Optional chaining
user?.address?.city
arr?.[0]
fn?.()

// for...of (iterables: arrays, strings, maps, sets)
for (const item of array) { }

// for...in (object keys)
for (const key in object) { }

// Switch
switch (action) {
  case "start": start(); break;
  case "stop":  stop();  break;
  default: idle();
}

// try/catch/finally
try {
  riskyOperation();
} catch (err) {
  console.error(err.message);
} finally {
  cleanup();
}

DOM Manipulation

Events

el.addEventListener("click", (e) => {
  e.preventDefault();     // prevent default behavior
  e.stopPropagation();    // stop event bubbling
  e.target                // element that triggered event
  e.currentTarget         // element listener is attached to
});

// Common events: click, submit, input, change,
// keydown, keyup, mouseover, mouseout, scroll,
// load, DOMContentLoaded, resize, focus, blur

// Event delegation
document.querySelector("ul").addEventListener("click", (e) => {
  if (e.target.matches("li")) {
    handleClick(e.target);
  }
});

Async / Promises

// Promise
const p = new Promise((resolve, reject) => {
  // async work...
  resolve("done");   // or reject(new Error("fail"))
});

p.then(val => console.log(val))
 .catch(err => console.error(err))
 .finally(() => cleanup());

// async/await
async function fetchData() {
  try {
    const res = await fetch("/api/data");
    const data = await res.json();
    return data;
  } catch (err) {
    console.error(err);
  }
}

// Parallel execution
const [a, b] = await Promise.all([fetchA(), fetchB()]);

// Race — first to settle wins
const result = await Promise.race([fetchA(), timeout(5000)]);

// allSettled — wait for all, never rejects
const results = await Promise.allSettled([p1, p2, p3]);

Fetch API

// GET
const res = await fetch("/api/users");
const users = await res.json();

// POST
const res = await fetch("/api/users", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Alice" }),
});

// Check response
if (!res.ok) throw new Error(`HTTP ${res.status}`);

Classes

class Animal {
  // Private field
  #sound;

  constructor(name, sound) {
    this.name = name;
    this.#sound = sound;
  }

  // Method
  speak() {
    return `${this.name} says ${this.#sound}`;
  }

  // Getter
  get info() { return `${this.name}`; }

  // Static method
  static create(name) { return new Animal(name, "..."); }
}

// Inheritance
class Dog extends Animal {
  constructor(name) {
    super(name, "Woof");
  }

  fetch(item) {
    return `${this.name} fetches ${item}`;
  }
}

Modules

// Named export
export const PI = 3.14;
export function add(a, b) { return a + b; }

// Default export
export default class App { }

// Named import
import { PI, add } from "./math.js";

// Default import
import App from "./App.js";

// Rename import
import { add as sum } from "./math.js";

// Import all
import * as math from "./math.js";

// Dynamic import
const module = await import("./heavy.js");

Useful Patterns

// Debounce
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

// Sleep / delay
const sleep = ms => new Promise(r => setTimeout(r, ms));
await sleep(1000);

// Random integer between min and max (inclusive)
const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

// Shuffle array
arr.sort(() => Math.random() - 0.5);

// Group by
const grouped = Object.groupBy(items, item => item.category); // ES2024

// Remove duplicates
[...new Set(arr)]

// Check empty object
Object.keys(obj).length === 0

// JSON
JSON.stringify(obj)          // object → string
JSON.stringify(obj, null, 2) // pretty print
JSON.parse(str)              // string → object