JavaScript Cheat Sheet

const name = 'Alice';   // immutable binding
let age = 30;           // mutable binding
// var is legacy — avoid it

typeof 'hello'    // 'string'
typeof 42         // 'number'
typeof true       // 'boolean'
typeof undefined  // 'undefined'
typeof null       // 'object' (quirk)
typeof Symbol()   // 'symbol'
typeof 9007199254740991n // 'bigint'

`Hello, ${name}! You are ${age} years old.`

const port = config.port ?? 3000;
const city = user?.address?.city;

const nums = [1, 2, 3, 4, 5];
nums[0];    // 1
nums.at(-1); // 5

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

nums.find(n => n > 3);      // 4
nums.findIndex(n => n > 3); // 3
nums.includes(3);           // true

nums.push(6);      // add to end
nums.pop();         // remove from end
nums.unshift(0);    // add to start
[...a, ...b];       // concat

const [first, second, ...rest] = nums;
const [[a, b], [c, d]] = [[1, 2], [3, 4]];

const user = { name: 'Alice', age: 30 };
user.name;        // 'Alice'
user['age'];      // 30

const { name, age, email = '' } = user;
const { name: userName } = user; // rename

const updated = { ...user, age: 31 };
const merged = { ...defaults, ...overrides };

Object.keys(user);    // ['name', 'age']
Object.values(user);  // ['Alice', 30]
Object.entries(user); // [['name','Alice'], ['age',30]]

const add = (a, b) => a + b;
const greet = name => `Hello, ${name}`;
const getUser = () => ({ name: 'Alice' });

function greet(name = 'World') {
  return `Hello, ${name}!`;
}

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

function counter() {
  let count = 0;
  return () => ++count;
}
const inc = counter();
inc(); // 1
inc(); // 2

const p = new Promise((resolve, reject) => {
  setTimeout(() => resolve('done'), 1000);
});

async function fetchUser(id) {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error(res.statusText);
  return res.json();
}

Promise.all([p1, p2]);        // all must resolve
Promise.allSettled([p1, p2]); // wait for all
Promise.race([p1, p2]);       // first to settle
Promise.any([p1, p2]);        // first to resolve

try {
  const data = await fetchUser(1);
} catch (err) {
  console.error(err.message);
}

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

// app.js
import { PI, add } from './math.js';

// Logger.js
export default class Logger { ... }

// app.js
import Logger from './Logger.js';

const { Chart } = await import('./chart.js');

document.querySelector('.btn');
document.querySelectorAll('li');
document.getElementById('app');

el.textContent = 'Hello';
el.innerHTML = '<strong>Bold</strong>';
el.classList.add('active');
el.setAttribute('data-id', '42');
el.style.color = 'red';

btn.addEventListener('click', (e) => {
  e.preventDefault();
  console.log(e.target);
});

const div = document.createElement('div');
div.textContent = 'New';
parent.appendChild(div);
parent.removeChild(child);

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

const copy = structuredClone(original);

const map = new Map([['a', 1], ['b', 2]]);
map.get('a'); // 1

const set = new Set([1, 2, 2, 3]);
set.has(2); // true
set.size;   // 3

class AppError extends Error {
  constructor(message, code) {
    super(message);
    this.code = code;
  }
}