JavaScript Quick Reference

const x = 10;

let count = 0;

console.log(value);

console.table(rows);

// single line

/* multi-line */

typeof x

Array.isArray(x)

x instanceof Date

a === b

a !== b

const name = input ?? "guest";

user?.address?.city

const { name, age } = user;

const [first, ...rest] = items;

const copy = { ...user, age: 37 };

const all = [...a, ...b];

Number("42")

parseInt("42px", 10)

parseFloat("3.5")

String(42)

n.toString()

n.toFixed(2)

Math.round(x)

Math.floor(x)

Math.ceil(x)

Math.trunc(x)

Math.floor(Math.random() * 6) + 1

Math.min(...nums)

Math.max(...nums)

n.toLocaleString("en-US")

new Intl.NumberFormat("en", { style: "currency", currency: "USD" }).format(9.5)

Number.isNaN(x)

Number.isInteger(x)

`Hi ${name}, you are ${age}`

text.length

text.toUpperCase()

text.toLowerCase()

text.trim()

text.trimStart()

text.trimEnd()

text.includes("js")

text.startsWith("http")

text.endsWith(".js")

text.replaceAll("a", "b")

text.replace(/a/g, "b")

text.split(",")

words.join(", ")

text.slice(0, 3)

text.slice(-3)

text.at(-1)

"5".padStart(3, "0")  // "005"

"-".repeat(20)

const nums = [3, 1, 2];

Array.from({ length: 5 }, (_, i) => i)

nums[0]

nums.at(-1)

nums.push(4)

nums.pop()

nums.unshift(0)

nums.shift()

nums.splice(index, 1)

nums.map((n) => n * 2)

nums.filter((n) => n > 1)

users.find((u) => u.id === 7)

nums.findIndex((n) => n > 1)

nums.includes(2)

nums.some((n) => n < 0)

nums.every((n) => n > 0)

nums.reduce((total, n) => total + n, 0)

nums.sort((a, b) => a - b)

nums.toSorted((a, b) => a - b)  // copy

names.sort((a, b) => a.localeCompare(b))

[...new Set(items)]

nums.reverse()

nums.toReversed()  // copy

nested.flat(Infinity)

Object.groupBy(users, (u) => u.role)

for (const item of items) { }

items.forEach((item, i) => { });

const user = { name: "Ada", age: 36 };

user.name

user["name"]

user.email = "ada@example.com";

delete user.age;

"name" in user

Object.hasOwn(user, "name")

Object.keys(user)

Object.values(user)

Object.entries(user)

for (const [key, value] of Object.entries(user)) { }

{ ...a, ...b }

structuredClone(user)  // deep copy

Object.fromEntries(pairs)

const map = new Map();

map.set(key, value); map.get(key);

JSON.stringify(user, null, 2)

JSON.parse(text)

if (x > 0) {
  // ...
} else if (x === 0) {
  // ...
} else {
  // ...
}

const label = n % 2 === 0 ? "even" : "odd";

switch (status) {
  case "ok":
    done();
    break;
  default:
    retry();
}

for (let i = 0; i < 5; i++) { }

while (count < 10) {
  count++;
}

try {
  risky();
} catch (err) {
  console.error(err);
} finally {
  cleanup();
}

throw new Error("Something went wrong");

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

const add = (a, b) => a + b;

const toObj = (x) => ({ x });

function greet(name = "world") { }

function sum(...nums) { }

button.addEventListener("click", () => { });

setTimeout(fn, 1000);

const id = setInterval(fn, 1000); clearInterval(id);

async function load() {
  const res = await fetch("/api/users");
  return res.json();
}

try {
  const data = await load();
} catch (err) {
  console.error(err);
}

const [a, b] = await Promise.all([loadA(), loadB()]);

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

await new Promise((r) => setTimeout(r, 500));

load().then((data) => show(data)).catch(console.error);

class Dog {
  constructor(name) {
    this.name = name;
  }
  bark() {
    return "Woof";
  }
}

class Puppy extends Dog {
  bark() {
    return super.bark() + "!";
  }
}

#secret = 1;

static create() { return new Dog("Rex"); }

export function add() { }

export default App;

import { add } from "./math.js";

import App from "./App.js";

const { add } = await import("./math.js");

document.querySelector(".card")

document.querySelectorAll("li")

el.textContent = "Hi";

el.innerHTML = "<b>Hi</b>";

el.classList.add("active")

el.classList.toggle("open")

el.setAttribute("aria-hidden", "true")

el.dataset.id

const li = document.createElement("li");
li.textContent = "New";
list.append(li);

el.addEventListener("click", (event) => {
  event.preventDefault();
});

localStorage.setItem("theme", "dark");

localStorage.getItem("theme")