JavaScript Cheat Sheet

$ node
> 1 + 2
3
> .exit

$ node script.js

<script src="script.js" defer></script>

// A single-line comment
/* A comment that spans
   multiple lines */
console.log("This will run.");

console.log("Total:", 42);  // Total: 42
console.warn("Careful!");   // Yellow warning
console.error("Oops!");     // Red error
console.table([{ a: 1 }]);  // Prints a table

const name = "Ada";
let count = 0;
count = count + 1;   // OK
name = "Grace";      // TypeError

const scores = [90, 85];
scores.push(77);     // OK: [90, 85, 77]

if (true) {
  let inside = "only here";
}
console.log(inside); // ReferenceError

let a = 1;
let b = 2;
[a, b] = [b, a];     // a = 2, b = 1

typeof "hi"          // "string"
typeof 42            // "number"
typeof 10n           // "bigint"
typeof true          // "boolean"
typeof undefined     // "undefined"
typeof null          // "object" (a quirk)
typeof [1, 2]        // "object"
Array.isArray([1])   // true

Number("42")         // 42
Number("4x")         // NaN
parseInt("42px")     // 42
parseFloat("3.14")   // 3.14
String(42)           // "42"
Boolean(0)           // false

const single = 'Hello';
const double = "World";
const multiline = `Line 1
Line 2`;

const name = "Ada";
`Hi, ${name}!`       // "Hi, Ada!"
`2 + 2 = ${2 + 2}`   // "2 + 2 = 4"

const s = " Hello, World! ";
s.length             // 15
s.trim()             // "Hello, World!"
s.toUpperCase()      // " HELLO, WORLD! "
s.includes("World")  // true
s.replace("World", "JS")
// " Hello, JS! "
"a,b,c".split(",")   // ["a", "b", "c"]
"7".padStart(3, "0") // "007"

const word = "JavaScript";
word[0]              // "J"
word.at(-1)          // "t"
word.slice(0, 4)     // "Java"
word.slice(-6)       // "Script"

10 + 3    // 13
10 - 3    // 7
10 * 3    // 30
10 / 3    // 3.3333333333333335
10 % 3    // 1 (remainder)
2 ** 3    // 8 (power)

let n = 5;
n += 2;   // 7
n *= 2;   // 14
n++;      // 15
n--;      // 14

Math.round(3.7)        // 4
Math.floor(3.7)        // 3
Math.ceil(3.2)         // 4
Math.max(1, 5, 3)      // 5
Math.random()          // 0 <= n < 1
(3.14159).toFixed(2)   // "3.14"
Number.isInteger(5)    // true

const age = 20;
if (age < 13) {
  console.log("Child");
} else if (age < 18) {
  console.log("Teen");
} else {
  console.log("Adult");
}

age >= 18 ? "adult" : "minor"  // "adult"

5 === 5      // true
5 === "5"    // false
5 == "5"     // true (avoid)
5 !== 6      // true
3 <= 5       // true

true && false     // false
true || false     // true
!true             // false
0 || 10           // 10
0 ?? 10           // 0
null ?? "guest"   // "guest"

const user = { address: null };
user.address?.city   // undefined
user.address.city    // TypeError

switch (day) {
  case "Sat":
  case "Sun":
    console.log("Weekend");
    break;
  default:
    console.log("Weekday");
}

for (let i = 0; i < 3; i++) {
  console.log(i);      // 0, 1, 2
}

for (const fruit of ["fig", "kiwi"]) {
  console.log(fruit);  // fig, kiwi
}

const ages = { ada: 36, alan: 41 };
for (const [name, age] of
  Object.entries(ages)
) {
  console.log(name, age);  // ada 36 ...
}

let n = 3;
while (n > 0) {
  console.log(n);  // 3, 2, 1
  n--;
}

for (const n of [1, 2, 3, 4]) {
  if (n === 2) continue;  // Skip 2
  if (n === 4) break;     // Stop at 4
  console.log(n);         // 1, 3
}

function greet(name) {
  return `Hello, ${name}!`;
}
greet("Ada");  // "Hello, Ada!"

const add = (a, b) => a + b;
const square = (x) => x * x;
const toUser = (name) => ({ name });
add(2, 3);     // 5
toUser("Ada"); // { name: "Ada" }

function hi(name = "World") {
  return `Hi, ${name}!`;
}
hi();          // "Hi, World!"

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3);  // 6

setTimeout(() => {
  console.log("One second later");
}, 1000);

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

const nums = [10, 20, 30];
nums[0]              // 10
nums.at(-1)          // 30
nums.length          // 3
nums.includes(20)    // true
nums.indexOf(30)     // 2

const a = [1, 2];
a.push(3);           // a is [1, 2, 3]
a.pop();             // a is [1, 2]
a.unshift(0);        // a is [0, 1, 2]
a.shift();           // a is [1, 2]

const n = [1, 2, 3, 4];
n.map((x) => x * 2)     // [2, 4, 6, 8]
n.filter((x) => x > 2)  // [3, 4]
n.find((x) => x > 2)    // 3
n.some((x) => x > 3)    // true
n.every((x) => x > 0)   // true
n.reduce((s, x) => s + x, 0)  // 10

[10, 9, 1].sort()    // [1, 10, 9]
[10, 9, 1].sort((a, b) => a - b)
// [1, 9, 10]

const first = [1, 2];
const all = [...first, 3];  // [1, 2, 3]
const [head, ...tail] = all;
// head is 1, tail is [2, 3]

[1, 2, 3].slice(1)   // [2, 3]
["a", "b"].join("-") // "a-b"

const user = {
  name: "Ada",
  age: 36,
  greet() {
    return `Hi, I'm ${this.name}`;
  },
};
user.name            // "Ada"
user["age"]          // 36
user.greet()         // "Hi, I'm Ada"

user.email = "[email protected]";
user.age += 1;
delete user.email;
"email" in user      // false

const { name, age } = user;
const older = { ...user, age: 40 };
const x = 1;
const y = 2;
const point = { x, y };  // { x: 1, y: 2 }

const p = { x: 1, y: 2 };
Object.keys(p)       // ["x", "y"]
Object.values(p)     // [1, 2]
Object.entries(p)    // [["x", 1], ["y", 2]]

const text = JSON.stringify({ a: 1 });
// '{"a":1}'
JSON.parse(text)     // { a: 1 }

class Dog {
  static count = 0;
  #treats = 0;          // Private field

  constructor(name) {
    this.name = name;
    Dog.count++;
  }

  bark() {
    return `${this.name} says woof!`;
  }
}
const rex = new Dog("Rex");
rex.bark();  // "Rex says woof!"

class Puppy extends Dog {
  bark() {
    return super.bark() + " (squeak)";
  }
}
new Puppy("Bo").bark();
// "Bo says woof! (squeak)"

try {
  JSON.parse("{bad json}");
} catch (error) {
  console.error(error.name);  // SyntaxError
} finally {
  console.log("Done");
}

function divide(a, b) {
  if (b === 0) {
    throw new RangeError("Divide by 0");
  }
  return a / b;
}

missing;             // ReferenceError
null.name;           // TypeError
const pi = 3.14;
pi = 3;              // TypeError
JSON.parse("{");     // SyntaxError

const ages = new Map();
ages.set("ada", 36);
ages.get("ada")      // 36
ages.has("alan")     // false
ages.size            // 1
ages.delete("ada");  // true

const tags = new Set(["js", "web"]);
tags.add("js");      // Ignored duplicate
tags.has("web")      // true
tags.size            // 2
[...tags]            // ["js", "web"]

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

try {
  const user = await getUser(1);
  console.log(user.name);
} catch (error) {
  console.error(error.message);
}

getUser(1)
  .then((user) => console.log(user.name))
  .catch((error) => console.error(error));

const [ada, alan] = await Promise.all([
  getUser(1),
  getUser(2),
]);

const sleep = (ms) =>
  new Promise((ok) => setTimeout(ok, ms));
await sleep(1000);  // Wait one second

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

// main.js
import mul, { PI, add } from "./math.js";
import * as math from "./math.js";

$ npm init -y
$ npm install date-fns
$ npm install --save-dev vitest
$ npx vitest run

const title = document.querySelector("h1");
const lis = document.querySelectorAll("li");
const form = document.querySelector("form");

title.textContent = "Hello, DOM!";
title.classList.add("highlight");
title.style.color = "tomato";

const li = document.createElement("li");
li.textContent = "New item";
document.querySelector("ul").append(li);

const btn = document.querySelector("#go");
btn.addEventListener("click", (event) => {
  console.log("Clicked", event.target);
});

function total(items) {
  debugger;  // Pauses if DevTools is open
  return items.reduce((s, x) => s + x, 0);
}

const user = "Ada";
const score = 42;
console.log({ user, score });
// { user: 'Ada', score: 42 }
console.assert(score > 50, "Low score");
// Assertion failed: Low score
console.time("loop");
// ...code to measure...
console.timeEnd("loop");  // loop: 0.1ms

0.1 + 0.2 === 0.3    // false
NaN === NaN          // false
[] === []            // false (by reference)
"5" + 1              // "51"
"5" - 1              // 4
[1, 2] + [3]         // "1,23"

// Remove duplicates
const unique = [...new Set([1, 1, 2])];

// Deep copy an object
const copy = structuredClone({ a: [1] });

// Count occurrences
const counts = {};
for (const word of ["a", "b", "a"]) {
  counts[word] = (counts[word] ?? 0) + 1;
}
// { a: 2, b: 1 }

// Current date and time
new Date().toISOString();