Quick reference

JavaScript cheat sheets.

20 topics, searchable instantly.

Variables

Use const by default; use let when the binding must change.

const name = "Ada";
let score = 0;
score += 10;

Strings

Template literals interpolate values and support multiple lines.

const greeting = `Hello, ${name}`;
const upper = greeting.toUpperCase();

Arrays

Transform collections with methods that communicate intent.

const doubled = numbers.map(n => n * 2);
const adults = users.filter(user => user.age >= 18);
const total = prices.reduce((sum, price) => sum + price, 0);

Objects

Use destructuring and spread to read and update records clearly.

const { name, role = "learner" } = user;
const updated = { ...user, role: "developer" };

Functions

Keep inputs explicit and return a result the caller can use.

function add(a, b) { return a + b; }
const square = value => value ** 2;

DOM

Select narrowly, listen for events, and update accessible UI state.

const form = document.querySelector("form");
form?.addEventListener("submit", event => {
  event.preventDefault();
});

Async

Await promises inside try/catch and validate HTTP responses.

try {
  const response = await fetch(url);
  if (!response.ok) throw new Error("Request failed");
  const data = await response.json();
} catch (error) {
  console.error(error);
}

Modules

Export small public APIs and keep implementation details private.

export function formatPrice(value) {
  return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }).format(value);
}

Debugging

Reproduce, read the first error, isolate, repair, and rerun.

console.table(records);
console.assert(total >= 0, "Total must be positive");
debugger;

Array methods

Choose by intent: find one, filter many, map each, reduce to one.

const item = items.find(item => item.id === id);
const active = items.filter(item => item.active);

Numbers

Use Number.isInteger/isFinite over global isFinite, and toFixed for display only.

Number.isInteger(4);        // true
Number((9.005).toFixed(2)); // 9
Math.max(1, 5, 3);          // 5

Loops

Reach for the loop that expresses intent: index, value, or key.

for (let i = 0; i < n; i++) {}
for (const value of list) {}
for (const key in obj) {}

Events

Delegate to a shared parent when a list can grow or shrink.

list.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (item) select(item.dataset.id);
});

Promises

A Promise settles once, to fulfilled or rejected — chain with .then/.catch.

Promise.resolve(1)
  .then((n) => n + 1)
  .catch((error) => console.error(error));

Fetch

Always await the response, then check response.ok before parsing.

const response = await fetch(url);
if (!response.ok) throw new Error("Request failed");
const data = await response.json();

Classes

Use # for true private fields; call super() before using this in a subclass.

class Account {
  #balance = 0;
  deposit(n) { this.#balance += n; }
}

Error handling

Throw specific Error objects; catch narrowly and recover or rethrow.

try {
  risky();
} catch (error) {
  console.error(error.message);
}

ES6+

Destructuring, spread/rest, optional chaining, and nullish coalescing in one glance.

const { a, ...rest } = obj;
const value = user?.profile?.name ?? "Guest";

Git basics

Branch, commit small and often, push, and open a pull request.

git checkout -b feat/my-change
git add .
git commit -m "feat: add my change"
git push origin feat/my-change

npm basics

Install, run scripts, and keep dependencies audited.

npm install
npm run dev
npm audit