JavaScript cheat sheet

const orders = [
  { id: 1, customer: "Ada", total: 42.5, status: "paid" },
  { id: 2, customer: "Grace", total: 18, status: "refunded" },
  { id: 3, customer: "Ada", total: 7.25, status: "paid" },
  { id: 4, customer: "Linus", total: 99.99, status: "paid" },
];
 
const paid = orders.filter((o) => o.status === "paid");
 
const revenue = paid.reduce((sum, o) => sum + o.total, 0);
console.log(revenue.toFixed(2)); // 149.74
 
const customers = [...new Set(paid.map((o) => o.customer))];
console.log(customers); // [ 'Ada', 'Linus' ]
 
const byCustomer = Object.groupBy(paid, (o) => o.customer);
console.log(byCustomer.Ada.length); // 2
 
const biggestFirst = paid.toSorted((a, b) => b.total - a.total);
const [top, ...others] = biggestFirst;
console.log(top.id, others.length); // 4 2
console.log(paid[0].id); // 1: toSorted left paid alone
 
const labels = paid.map(({ id, total }) => `#${id}: £${total.toFixed(2)}`);
console.log(labels.join(", ")); // #1: £42.50, #3: £7.25, #4: £99.99

"use strict";
 
const timer = {
  seconds: 0,
  tick() {
    this.seconds += 1;
    return this.seconds;
  },
};
 
console.log(timer.tick()); // 1: called as timer.tick(), so this is timer
 
const tick = timer.tick;
try {
  tick(); // called on its own, so this is undefined
} catch (err) {
  console.log(err.constructor.name); // TypeError
}
 
// Fix 1: an arrow function, which calls the method on timer itself
const viaArrow = () => timer.tick();
console.log(viaArrow()); // 2
 
// Fix 2: bind, which makes a copy with this fixed
const bound = timer.tick.bind(timer);
console.log(bound()); // 3
 
// Fix 3: an arrow inside the method, which uses the method's own this
const clock = {
  seconds: 0,
  startCounting(times) {
    [...Array(times)].forEach(() => {
      this.seconds += 1; // the arrow has no this of its own, so it is clock
    });
    return this.seconds;
  },
};
console.log(clock.startCounting(3)); // 3

class InsufficientFundsError extends Error {
  name = "InsufficientFundsError";
}
 
class Account {
  #balance = 0;
  static count = 0;
 
  constructor(owner) {
    this.owner = owner;
    Account.count += 1;
  }
 
  get balance() {
    return this.#balance;
  }
 
  deposit(amount) {
    this.#check(amount);
    this.#balance += amount;
    return this;
  }
 
  withdraw(amount) {
    this.#check(amount);
    if (amount > this.#balance) {
      throw new InsufficientFundsError(`${this.owner} has only ${this.#balance}`);
    }
    this.#balance -= amount;
    return this;
  }
 
  #check(amount) {
    if (!Number.isFinite(amount) || amount <= 0) {
      throw new RangeError(`amount must be a positive number, got ${amount}`);
    }
  }
 
  static isAccount(obj) {
    return #balance in obj;
  }
 
  toString() {
    return `${this.owner}: ${this.#balance}`;
  }
}
 
class SavingsAccount extends Account {
  constructor(owner, rate) {
    super(owner);
    this.rate = rate;
  }
 
  addInterest() {
    return this.deposit(Math.round(this.balance * this.rate));
  }
}
 
const savings = new SavingsAccount("Ada", 0.05).deposit(200).addInterest();
console.log(`${savings}`); // Ada: 210
console.log(savings.balance, Account.count); // 210 1
console.log(Account.isAccount(savings), Account.isAccount({})); // true false
 
try {
  savings.withdraw(500);
} catch (err) {
  if (err instanceof InsufficientFundsError) {
    console.log(err.name, "-", err.message); // InsufficientFundsError - Ada has only 210
  } else {
    throw err;
  }
}

async function getJson(url, { timeoutMs = 5000 } = {}) {
  const res = await fetch(url, { signal: AbortSignal.timeout(timeoutMs) });
  if (!res.ok) {
    throw new Error(`HTTP ${res.status} from ${url}`);
  }
  return res.json();
}
 
const api = "https://api.github.com/repos";
 
// One request
try {
  const repo = await getJson(`${api}/nodejs/node`);
  console.log(repo.full_name); // nodejs/node
} catch (err) {
  console.error("Could not load the repo:", err.message);
}
 
// Several at once: all must succeed
const names = ["nodejs/node", "denoland/deno"];
const repos = await Promise.all(names.map((name) => getJson(`${api}/${name}`)));
console.log(repos.map((r) => r.full_name)); // [ 'nodejs/node', 'denoland/deno' ]
 
// Several at once: keep whatever succeeded
const results = await Promise.allSettled(
  ["nodejs/node", "no-such-owner/no-such-repo"].map((name) => getJson(`${api}/${name}`))
);
for (const result of results) {
  if (result.status === "fulfilled") {
    console.log("ok", result.value.full_name); // ok nodejs/node
  } else {
    console.log("failed", result.reason.message); // failed HTTP 404 from https://api.github.com/...
  }
}

<form id="new-todo">
  <input name="title" required placeholder="What needs doing?" />
  <button>Add</button>
</form>
<ul id="todos"></ul>
 
<script type="module">
  const form = document.querySelector("#new-todo");
  const list = document.querySelector("#todos");
  const saved = JSON.parse(localStorage.getItem("todos") ?? "[]");
 
  function render(todos) {
    list.replaceChildren(
      ...todos.map((todo, index) => {
        const li = document.createElement("li");
        li.textContent = todo.title;
        li.dataset.index = index;
        li.classList.toggle("done", todo.done);
        return li;
      })
    );
    localStorage.setItem("todos", JSON.stringify(todos));
  }
 
  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const { title } = Object.fromEntries(new FormData(form));
    saved.push({ title: title.trim(), done: false });
    render(saved);
    form.reset();
  });
 
  list.addEventListener("click", (event) => {
    const li = event.target.closest("li");
    if (!li) return;
    const todo = saved[Number(li.dataset.index)];
    todo.done = !todo.done;
    render(saved);
  });
 
  render(saved);
</script>