JavaScript

Your .js file  →  Parser  →  AST  →  Bytecode  →  JIT machine code

<!-- At the end of body — page loads first, then script runs -->
<script src="app.js"></script>

<!-- defer — downloads in parallel, runs after HTML is parsed -->
<script src="app.js" defer></script>

<!-- async — downloads in parallel, runs as soon as ready (no order guarantee) -->
<script src="app.js" async></script>

const name = "Alice";    // cannot be reassigned
let count = 0;           // can be reassigned
count = 1;               // OK

const user = { name: "Alice" };
user.name = "Bob";       // OK — the object's contents can change
user = {};               // TypeError — you cannot point 'user' at a new object

typeof 42           // "number"
typeof "hello"      // "string"
typeof true         // "boolean"
typeof undefined    // "undefined"
typeof null         // "object"  ← famous JS bug, null is NOT an object
typeof {}           // "object"
typeof []           // "object"  ← arrays are objects too
typeof function(){} // "function"
typeof Symbol()     // "symbol"

0 == false      // true  — false is coerced to 0
"" == false     // true
null == undefined // true
"5" == 5        // true  — string coerced to number
[] == false     // true  — array coerced to 0

0 === false      // false
"5" === 5        // false
null === undefined // false

if (!value) {
    // runs when value is any of the six falsy values
}

// ?? — use right side only when left side is null or undefined
// (unlike ||, it does NOT trigger on 0 or "")
const port = config.port ?? 3000;

// ?. — stop and return undefined instead of throwing
// when a property doesn't exist in a chain
const city = user?.address?.city;         // undefined, not an error
const first = user?.orders?.[0]?.total;   // safe deep access
const name = user?.getName?.();           // safe method call

const score = 85;

if (score >= 90) {
    grade = "A";
} else if (score >= 80) {
    grade = "B";
} else if (score >= 70) {
    grade = "C";
} else {
    grade = "F";
}

const label = score >= 60 ? "pass" : "fail";
const access = user.isAdmin ? "full" : "limited";

switch (status) {
    case "pending":
        handlePending();
        break;              // without break, it falls through to the next case
    case "active":
    case "approved":        // two cases, same handler
        handleActive();
        break;
    default:
        handleUnknown();
}

// Classic for — when you need the index
for (let i = 0; i < 5; i++) {
    console.log(i);     // 0 1 2 3 4
}

// for...of — iterate values of any iterable (array, string, Set, Map)
const fruits = ["apple", "banana", "cherry"];
for (const fruit of fruits) {
    console.log(fruit);
}

// for...in — iterate keys of an object (avoid on arrays)
const user = { name: "Alice", age: 30 };
for (const key in user) {
    console.log(key, user[key]);    // name Alice, age 30
}

let n = 0;
while (n < 5) {
    console.log(n++);
}

// do...while runs at least once before checking the condition
do {
    input = prompt("Enter a number:");
} while (isNaN(input));

// 1. Function declaration — hoisted, can be called before it's defined
function add(a, b) {
    return a + b;
}

// 2. Function expression — not hoisted
const add = function(a, b) {
    return a + b;
};

// 3. Arrow function — concise, does NOT have its own 'this'
const add = (a, b) => a + b;           // implicit return when body is one expression
const square = n => n * n;             // parentheses optional with one parameter
const greet = () => "Hello!";          // no parameters — parentheses required
const getUser = () => ({ id: 1 });     // returning an object — wrap in parentheses

function greet(name, greeting = "Hello") {
    return `${greeting}, ${name}!`;
}

greet("Alice");           // "Hello, Alice!"
greet("Bob", "Hi");       // "Hi, Bob!"
greet("Carol", undefined) // "Hello, Carol!" — undefined triggers default

function total(...numbers) {
    return numbers.reduce((sum, n) => sum + n, 0);
}

total(1, 2, 3, 4)   // 10
total(10, 20)        // 30

const nums = [3, 1, 4, 1, 5];
Math.max(...nums)              // 5 — spread as individual arguments

const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b]; // [1, 2, 3, 4]

const original = { x: 1, y: 2 };
const copy = { ...original, z: 3 };  // { x: 1, y: 2, z: 3 }

// Array destructuring — position-based
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first=1, second=2, rest=[3,4,5]

const [x, , z] = [10, 20, 30];  // skip the middle value

// Object destructuring — name-based
const { name, age, email = "N/A" } = user;  // default if key is missing

// Rename while destructuring
const { name: userName, age: userAge } = user;

// Nested destructuring
const { address: { city, zip } } = user;

// In function parameters — very common in React
function UserCard({ name, email, role = "member" }) {
    return `${name} (${role})`;
}

const fruits = ["apple", "banana", "cherry"];

fruits[0]         // "apple"  — zero-indexed
fruits.at(-1)     // "cherry" — at() accepts negative indexes (ES2022)
fruits.length     // 3

// Adding and removing
fruits.push("date")         // add to end — returns new length
fruits.pop()                // remove and return last item
fruits.unshift("avocado")   // add to beginning — slow, shifts all items
fruits.shift()              // remove and return first item

// splice — modify in place (powerful but mutates the array)
fruits.splice(1, 1)             // remove 1 item at index 1
fruits.splice(1, 0, "avocado") // insert without removing
fruits.splice(1, 1, "avocado") // replace 1 item at index 1

// slice — extract without mutation
fruits.slice(1, 3)    // items from index 1 up to (not including) 3
fruits.slice(-2)      // last two items

// forEach — call a function for each item (no return value)
fruits.forEach((fruit, index) => {
    console.log(index, fruit);
});

// for...of — simpler, supports break and continue
for (const fruit of fruits) {
    if (fruit === "banana") break;
    console.log(fruit);
}

const numbers = [1, 2, 3, 4, 5];

const doubled  = numbers.map(n => n * 2);        // [2, 4, 6, 8, 10]
const strings  = numbers.map(n => `#${n}`);      // ["#1", "#2", "#3", "#4", "#5"]

const users = [{ name: "Alice", age: 30 }, { name: "Bob", age: 25 }];
const names = users.map(user => user.name);       // ["Alice", "Bob"]

const scores  = [45, 82, 91, 34, 77, 60];
const passing = scores.filter(s => s >= 60);      // [82, 91, 77, 60]

const users   = [{ name: "Alice", active: true }, { name: "Bob", active: false }];
const active  = users.filter(u => u.active);       // [{ name: "Alice", active: true }]

const numbers = [1, 2, 3, 4, 5];

// Sum
const total = numbers.reduce((sum, n) => sum + n, 0);    // 15

// Build an object from an array
const users = [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }];
const byId  = users.reduce((acc, user) => {
    acc[user.id] = user;
    return acc;
}, {});
// { 1: { id: 1, name: "Alice" }, 2: { id: 2, name: "Bob" } }

const users = [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }, { id: 3, name: "Carol" }];

const alice = users.find(u => u.id === 1);          // { id: 1, name: "Alice" }
const idx   = users.findIndex(u => u.id === 2);     // 1
const notFound = users.find(u => u.id === 99);      // undefined

const scores = [72, 85, 91, 68];

scores.some(s => s > 90)    // true  — at least one score is > 90
scores.every(s => s >= 60)  // true  — every score is >= 60
scores.every(s => s > 80)   // false — not every score is > 80

const nested = [1, [2, 3], [4, [5, 6]]];
nested.flat()     // [1, 2, 3, 4, [5, 6]]  — one level deep
nested.flat(2)    // [1, 2, 3, 4, 5, 6]    — two levels deep
nested.flat(Infinity)  // fully flatten regardless of depth

// flatMap — map then flatten one level (more efficient than map + flat)
const sentences = ["hello world", "foo bar"];
sentences.flatMap(s => s.split(" "))   // ["hello", "world", "foo", "bar"]

// Default sort converts to strings — wrong for numbers!
[10, 9, 2, 1, 100].sort()          // [1, 10, 100, 2, 9]  ← wrong

// Correct — provide a comparator function
[10, 9, 2, 1, 100].sort((a, b) => a - b)    // [1, 2, 9, 10, 100]  ascending
[10, 9, 2, 1, 100].sort((a, b) => b - a)    // [100, 10, 9, 2, 1]  descending

// Sort objects by a field
users.sort((a, b) => a.name.localeCompare(b.name))  // alphabetically
users.sort((a, b) => a.age - b.age)                 // by age ascending

[1, 2, 3].includes(2)               // true
[1, 2, 3].indexOf(2)                // 1  (-1 if not found)
[1, [2], [3, [4]]].flat(Infinity)   // [1, 2, 3, 4]
Array.from("hello")                 // ["h", "e", "l", "l", "o"]
Array.from({ length: 5 }, (_, i) => i)  // [0, 1, 2, 3, 4]
[...new Set([1, 2, 2, 3, 3])]      // [1, 2, 3]  — deduplicate

const user = {
    name: "Alice",             // string property
    age: 30,                   // number property
    active: true,              // boolean property
    greet() {                  // method shorthand (ES6)
        return `Hi, I'm ${this.name}`;
    },
};

user.name                  // "Alice"  — dot notation
user["name"]               // "Alice"  — bracket notation (useful for dynamic keys)
user.greet()               // "Hi, I'm Alice"

const name = "Alice";
const age = 30;

// Old way
const user = { name: name, age: age };

// Shorthand — same result
const user = { name, age };

const key = "color";
const obj = {
    [key]: "red",             // computed: { color: "red" }
    [`get${key.charAt(0).toUpperCase() + key.slice(1)}`]() {
        return this[key];
    }
};

obj.color         // "red"
obj.getColor()    // "red"

const user = { name: "Alice", age: 30 };

"name" in user              // true — checks own AND inherited properties
user.hasOwnProperty("name") // true — checks own properties only
Object.hasOwn(user, "name") // true — modern version, preferred (ES2022)

user.phone                  // undefined — safe, does not throw

const user = { name: "Alice", age: 30, role: "admin" };

Object.keys(user)     // ["name", "age", "role"]
Object.values(user)   // ["Alice", 30, "admin"]
Object.entries(user)  // [["name","Alice"], ["age",30], ["role","admin"]]

// Iterate over key-value pairs
for (const [key, value] of Object.entries(user)) {
    console.log(`${key}: ${value}`);
}

// Shallow copy — spread is simplest
const copy = { ...user };

// Merge objects — later keys win
const merged = { ...defaults, ...overrides };

// Create an object from an array of [key, value] pairs
const obj = Object.fromEntries([["a", 1], ["b", 2]]);  // { a: 1, b: 2 }

// Make object immutable — cannot add, change, or delete properties
const config = Object.freeze({ host: "localhost", port: 5432 });

const animal = {
    breathe() { return "breathing"; }
};

const dog = Object.create(animal);   // dog's prototype is animal
dog.bark = function() { return "woof"; };

dog.bark()     // "woof"   — found directly on dog
dog.breathe()  // "breathing" — not on dog, found on animal (the prototype)

class Animal {
    #name;                        // private field (ES2022) — # prefix

    constructor(name, sound) {
        this.#name = name;
        this.sound = sound;
    }

    get name() { return this.#name; }    // getter

    speak() {
        return `${this.#name} says ${this.sound}`;
    }

    static create(name, sound) {         // static method — called on the class
        return new Animal(name, sound);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name, "woof");            // must call super() first
        this.tricks = [];
    }

    learn(trick) {
        this.tricks.push(trick);
        return this;                    // enables chaining
    }

    speak() {
        return super.speak() + "!";    // call parent method
    }
}

const rex = new Dog("Rex");
rex.learn("sit").learn("shake");        // chaining
rex.speak()    // "Rex says woof!"
rex.name       // "Rex" — via getter
rex instanceof Dog     // true
rex instanceof Animal  // true

const globalVar = "I'm global";       // accessible everywhere

function outer() {
    const outerVar = "I'm outer";     // accessible inside outer and inner

    function inner() {
        const innerVar = "I'm inner"; // accessible only inside inner
        console.log(globalVar);       // OK
        console.log(outerVar);        // OK
        console.log(innerVar);        // OK
    }

    inner();
    console.log(innerVar);            // ReferenceError — out of scope
}

// var leaks out of blocks
if (true) {
    var x = 10;
}
console.log(x);   // 10 — x leaked out!

// let stays inside the block
if (true) {
    let y = 10;
}
console.log(y);   // ReferenceError — y does not exist here

// Classic var loop bug
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);  // prints 3, 3, 3 — all share the same i
}

// Fixed with let — each iteration gets its own i
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);  // prints 0, 1, 2
}

function makeCounter(startFrom = 0) {
    let count = startFrom;             // this variable lives on inside the closure

    return {
        increment() { count++; },
        decrement() { count--; },
        value()     { return count; },
    };
}

const counter = makeCounter(10);
counter.increment();    // count is now 11
counter.increment();    // count is now 12
counter.decrement();    // count is now 11
counter.value();        // 11

// 'count' is private — there is no other way to access it

function memoize(fn) {
    const cache = {};               // this cache persists across calls via closure

    return function(...args) {
        const key = JSON.stringify(args);
        if (key in cache) {
            return cache[key];      // cache hit — skip computation
        }
        cache[key] = fn(...args);   // cache miss — compute and store
        return cache[key];
    };
}

const slowSquare = memoize(n => {
    // pretend this is expensive
    return n * n;
});

slowSquare(5)   // computes: 25
slowSquare(5)   // returns cached: 25

// math.js — export what others can use
export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; }
export const PI = 3.14159;

export default function square(n) { return n * n; }  // default export

// main.js — import what you need
import square from "./math.js";              // import the default export
import { add, multiply, PI } from "./math.js"; // import named exports
import { add as sum } from "./math.js";       // rename on import
import * as math from "./math.js";            // import everything as an object

math.add(2, 3)      // 5
math.PI             // 3.14159

// Reading a file in Node.js the old way
fs.readFile("data.txt", "utf8", function(error, content) {
    if (error) {
        console.error("Failed:", error);
        return;
    }
    console.log(content);     // content is available here, after the file is read
});
// code here runs BEFORE the callback — the file isn't read yet

getUser(id, function(err, user) {
    if (err) return handleError(err);
    getOrders(user.id, function(err, orders) {
        if (err) return handleError(err);
        getInvoice(orders[0].id, function(err, invoice) {
            if (err) return handleError(err);
            // deeply nested, hard to read and handle errors
        });
    });
});

fetch("/api/user")
    .then(response => response.json())    // runs when fetch succeeds
    .then(user => {
        console.log(user.name);
        return fetch(`/api/orders/${user.id}`);  // return another promise
    })
    .then(response => response.json())
    .then(orders => console.log(orders))
    .catch(error => console.error("Something failed:", error))  // catches ANY error in the chain
    .finally(() => hideLoadingSpinner());   // always runs, success or failure

function delay(ms) {
    return new Promise((resolve, reject) => {
        if (ms < 0) {
            reject(new Error("Delay cannot be negative"));
            return;
        }
        setTimeout(() => resolve("done"), ms);
    });
}

delay(1000)
    .then(result => console.log(result))  // "done" after 1 second
    .catch(err => console.error(err));

// The Promise chain from above, rewritten with async/await
async function loadUserAndOrders(userId) {
    try {
        const userResponse = await fetch(`/api/users/${userId}`);
        const user = await userResponse.json();

        const ordersResponse = await fetch(`/api/orders/${user.id}`);
        const orders = await ordersResponse.json();

        return { user, orders };
    } catch (error) {
        console.error("Failed to load:", error);
        throw error;    // re-throw so the caller can handle it too
    }
}

async function loadDashboard(userId) {
    // SLOW — sequential, total time = time(A) + time(B) + time(C)
    const user    = await fetchUser(userId);
    const posts   = await fetchPosts(userId);
    const friends = await fetchFriends(userId);

    // FAST — parallel, total time = max(time(A), time(B), time(C))
    const [user, posts, friends] = await Promise.all([
        fetchUser(userId),
        fetchPosts(userId),
        fetchFriends(userId),
    ]);

    return { user, posts, friends };
}

// Promise.allSettled — wait for all, get each result (success or failure)
const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(r => {
    if (r.status === "fulfilled") console.log(r.value);
    else console.error(r.reason);
});

// Promise.race — resolve/reject with whichever settles first
const data = await Promise.race([
    fetch("/api/data"),
    new Promise((_, reject) => setTimeout(() => reject(new Error("Timeout")), 5000))
]);

// Promise.any — resolve with the first success (ignores rejections)
const fastest = await Promise.any([mirror1, mirror2, mirror3]);

// Missing await — data is a Promise, not the resolved value
const data = fetch("/api/data");   // bug!

// Accidentally sequential
const a = await fetchA();   // waits for A
const b = await fetchB();   // only starts after A — should run in parallel

// Fix with Promise.all
const [a, b] = await Promise.all([fetchA(), fetchB()]);

// await outside async function — syntax error
function main() {
    const data = await fetchData();  // SyntaxError
}
// Fix: make the function async
async function main() {
    const data = await fetchData();
}

function greet(name) {
    return `Hello, ${name}`;
}

function main() {
    const message = greet("Alice");
    console.log(message);
}

main();

// Call stack sequence:
// main()
// main() → greet("Alice")    ← greet pushed
// main()                     ← greet returned, popped
// (empty)                    ← main returned, popped

console.log("1 — synchronous");

setTimeout(() => console.log("2 — macrotask"), 0);

Promise.resolve()
    .then(() => console.log("3 — microtask 1"))
    .then(() => console.log("4 — microtask 2"));

queueMicrotask(() => console.log("5 — microtask 3"));

console.log("6 — synchronous");

// Output order:
// 1 — synchronous
// 6 — synchronous
// 3 — microtask 1
// 5 — microtask 3
// 4 — microtask 2
// 2 — macrotask

// Promise callbacks run BEFORE setTimeout, even if setTimeout fires first
let data = null;

setTimeout(() => {
    data = "loaded";
}, 0);

Promise.resolve().then(() => {
    console.log(data);   // null — macrotask hasn't run yet
});

// An infinite microtask loop freezes the page — macrotasks never run
function badLoop() {
    Promise.resolve().then(badLoop);  // schedules itself as a microtask forever
}
badLoop();  // setTimeout callbacks, UI rendering — all blocked

console.log(x);   // undefined — x was hoisted (declared), but not yet assigned
var x = 5;
console.log(x);   // 5

greet("Alice");   // "Hello, Alice!" — function declaration is fully hoisted
function greet(name) {
    return `Hello, ${name}`;
}

sayHi();          // TypeError — sayHi is hoisted as undefined, not the function
var sayHi = function() { return "Hi!"; };

const user = {
    name: "Alice",
    greet() {
        console.log(`Hello, I'm ${this.name}`);
    }
};

user.greet();     // "Hello, I'm Alice" — this = user (the object before the dot)

function showThis() {
    console.log(this);
}

showThis();          // undefined (strict mode) or window (non-strict, browser)

// Detaching a method loses its context
const greet = user.greet;
greet();             // "Hello, I'm undefined" — this is no longer user!

function Person(name) {
    this.name = name;          // this = the new object being created
    this.greet = function() {
        return `Hi, I'm ${this.name}`;
    };
}

const alice = new Person("Alice");
alice.greet();    // "Hi, I'm Alice"

function greet(greeting, punctuation) {
    return `${greeting}, I'm ${this.name}${punctuation}`;
}

const user = { name: "Alice" };

// call — call immediately, pass arguments one by one
greet.call(user, "Hello", "!");      // "Hello, I'm Alice!"

// apply — call immediately, pass arguments as an array
greet.apply(user, ["Hello", "!"]); // "Hello, I'm Alice!"

// bind — return a NEW function with 'this' permanently fixed
const greetAlice = greet.bind(user, "Hello");
greetAlice("!");   // "Hello, I'm Alice!"
greetAlice("?");   // "Hello, I'm Alice?"

class Timer {
    constructor() {
        this.seconds = 0;
    }

    start() {
        // Bug: regular function — 'this' is lost inside setTimeout
        setInterval(function() {
            this.seconds++;     // this = undefined or window, NOT the Timer!
        }, 1000);

        // Fix: arrow function — 'this' is inherited from start(), which is Timer
        setInterval(() => {
            this.seconds++;     // this = Timer instance ✓
        }, 1000);
    }
}

class Button extends React.Component {
    constructor(props) {
        super(props);
        this.state = { clicked: false };

        // bind in constructor — explicit fix
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({ clicked: true });
    }

    render() {
        // Arrow function in JSX — this is inherited from render() = the component
        return <button onClick={() => this.handleClick()}>Click me</button>;
    }
}

document
└── html
    ├── head
    │   └── title → "My Page"
    └── body
        ├── h1 → "Hello World"
        └── div.container
            ├── p → "Some text"
            └── button → "Click me"

// querySelector — returns the first match (CSS selector syntax)
const btn    = document.querySelector("button");
const title  = document.querySelector("#title");       // by ID
const first  = document.querySelector(".card");        // by class
const input  = document.querySelector("form input");   // nested selector

// querySelectorAll — returns ALL matches as a NodeList
const cards  = document.querySelectorAll(".card");
const inputs = document.querySelectorAll("input[type='text']");

// Iterate over NodeList
cards.forEach(card => card.classList.add("loaded"));

// Older methods (still widely used)
document.getElementById("title")         // by ID — fastest
document.getElementsByClassName("card")  // live HTMLCollection
document.getElementsByTagName("div")     // live HTMLCollection

const heading = document.querySelector("h1");

// Text content
heading.textContent          // reads the raw text
heading.textContent = "New title"  // sets text (safe — no HTML parsing)

heading.innerHTML            // reads the inner HTML string
heading.innerHTML = "<strong>Bold title</strong>"  // parses HTML — never use with user input!

// Attributes
const link = document.querySelector("a");
link.getAttribute("href")           // read any attribute
link.setAttribute("href", "/about") // set any attribute
link.removeAttribute("target")
link.href                           // shortcut for common attributes
link.id
link.className

// CSS classes — the clean way
element.classList.add("active")
element.classList.remove("hidden")
element.classList.toggle("open")        // add if missing, remove if present
element.classList.contains("active")    // true or false

// Inline styles (prefer CSS classes when possible)
element.style.color = "red";
element.style.backgroundColor = "#fff";  // camelCase, not kebab-case
element.style.display = "none";

// Create a new element
const card = document.createElement("div");
card.className = "card";
card.textContent = "New Card";

// Insert it into the page
document.body.appendChild(card);                           // at the end of body
document.body.prepend(card);                               // at the start
container.insertBefore(card, container.firstChild);        // before a specific element
existingCard.insertAdjacentElement("afterend", card);      // after existing element

// Modern — insertAdjacentHTML (parse HTML string and insert)
container.insertAdjacentHTML("beforeend", "<div class='card'>New Card</div>");

// Remove an element
card.remove();

const button = document.querySelector("button");

// Add a listener
button.addEventListener("click", function(event) {
    console.log("Clicked!", event.target);   // event.target is the element that was clicked
});

// Arrow function listener
button.addEventListener("click", (event) => {
    event.preventDefault();    // stop default browser behaviour (e.g. form submission)
    event.stopPropagation();   // stop event from bubbling up to parent elements
});

// Remove a listener (must use the same function reference)
function handleClick() { console.log("clicked"); }
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

const list = document.querySelector("ul");

// One listener handles ALL list items, including ones added later
list.addEventListener("click", (event) => {
    const item = event.target.closest("li");   // find the nearest li ancestor
    if (!item) return;                          // click was not inside an li

    console.log("Clicked item:", item.textContent);
    item.classList.toggle("selected");
});

const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
    event.preventDefault();   // stop page reload

    const name    = document.querySelector("#name").value.trim();
    const email   = document.querySelector("#email").value.trim();
    const checked = document.querySelector("#agree").checked;    // checkbox

    if (!name) {
        alert("Name is required");
        return;
    }

    submitData({ name, email, agree: checked });
});

// Old way — verbose and fragile
const city = user && user.address && user.address.city;

// With optional chaining — clean and safe
const city    = user?.address?.city;           // undefined if any step is null/undefined
const total   = order?.items?.[0]?.price;      // safe array access too
const result  = server?.getStatus?.();         // safe method call

const port    = config.port    || 3000;    // bug: 0 is falsy, returns 3000 instead of 0
const port    = config.port    ?? 3000;    // correct: 0 is not nullish, stays 0

const name    = user.name      ?? "Anonymous";  // only uses "Anonymous" if name is null/undefined
const timeout = options.timeout ?? 5000;

// ??= — assign only if null or undefined
user.name ??= "Guest";            // same as: user.name = user.name ?? "Guest"

// ||= — assign only if falsy
config.host ||= "localhost";      // same as: config.host = config.host || "localhost"

// &&= — assign only if truthy
user.profile &&= sanitize(user.profile);  // only sanitize if profile exists

// Rename and default value while destructuring
const { name: userName = "Anonymous", role = "member" } = user;

// Dynamic key from variable
const key = "theme";
const { [key]: themeValue } = settings;    // themeValue = settings.theme

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

// Build array of unique values
const unique = [...new Set(array)];

// Object from Map entries
const obj = Object.fromEntries(map);

// Array to Map
const map = new Map(Object.entries(obj));

// Map — like an object but keys can be ANY type, insertion order preserved
const cache = new Map();
cache.set("user:1", { name: "Alice" });
cache.set(42, "some value");           // number key
cache.get("user:1");                   // { name: "Alice" }
cache.has("user:1");                   // true
cache.size;                            // 2

for (const [key, value] of cache) {
    console.log(key, value);
}

// Set — unique values, fast lookup
const visited = new Set();
visited.add("/home");
visited.add("/about");
visited.add("/home");       // duplicate — ignored
visited.has("/home");       // true
visited.size;               // 2

const ID = Symbol("id");           // the string is just a description for debugging
const obj = {};
obj[ID] = 12345;

// Symbols are hidden from normal enumeration
Object.keys(obj)              // []  — Symbol key not included
Object.getOwnPropertySymbols(obj)  // [Symbol(id)]

// Well-known Symbols — customise built-in behaviour
class MyList {
    [Symbol.iterator]() {   // makes the object iterable with for...of
        let i = 0;
        return { next: () => i < 3 ? { value: i++, done: false } : { done: true } };
    }
}
for (const n of new MyList()) console.log(n);  // 0, 1, 2

const user = { name: "Alice", age: 30 };

const validatedUser = new Proxy(user, {
    set(target, key, value) {
        if (key === "age" && (typeof value !== "number" || value < 0)) {
            throw new TypeError("Age must be a non-negative number");
        }
        target[key] = value;
        return true;
    },
    get(target, key) {
        return key in target ? target[key] : `Property '${key}' not found`;
    }
});

validatedUser.age = 25;       // OK
validatedUser.age = -1;       // TypeError: Age must be a non-negative number
validatedUser.email;          // "Property 'email' not found"

const metadata = new WeakMap();

function registerElement(el) {
    metadata.set(el, { createdAt: Date.now(), clicks: 0 });
}

function trackClick(el) {
    const data = metadata.get(el);
    if (data) data.clicks++;
}

// When the element is removed from the DOM and no other references exist,
// both the element AND its metadata entry are garbage collected automatically.
// This would NOT happen with a regular Map.

async function loadUser(id) {
    try {
        const response = await fetch(`/api/users/${id}`);

        if (!response.ok) {
            throw new Error(`HTTP error: ${response.status}`);
        }

        const user = await response.json();
        return user;

    } catch (error) {
        // error is the thrown Error object
        console.error("Failed to load user:", error.message);
        throw error;                   // re-throw so the caller knows it failed

    } finally {
        hideLoadingSpinner();          // always hides the spinner, success or failure
    }
}

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

class NotFoundError extends AppError {
    constructor(resource) {
        super(`${resource} not found`, 404);
        this.name = "NotFoundError";
    }
}

class ValidationError extends AppError {
    constructor(field, message) {
        super(message, 400);
        this.name  = "ValidationError";
        this.field = field;
    }
}

async function getUser(id) {
    const user = await db.find(id);
    if (!user) throw new NotFoundError("User");
    return user;
}

try {
    const user = await getUser(999);
} catch (error) {
    if (error instanceof NotFoundError) {
        return res.status(404).json({ error: error.message });
    }
    if (error instanceof ValidationError) {
        return res.status(400).json({ error: error.message, field: error.field });
    }
    throw error;   // unexpected error — re-throw
}

// && — returns right side if left is truthy, otherwise returns left side
const name = user && user.name;          // user.name if user exists, else undefined/null/false
isAdmin && showAdminPanel();             // call only if isAdmin is truthy (like a guard)

// || — returns left side if truthy, otherwise returns right side
const host = config.host || "localhost"; // use config.host if truthy, else fallback

// Combined
const displayName = user?.name || "Anonymous";

// Pipe — apply a series of functions left to right
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const process = pipe(
    str => str.trim(),
    str => str.toLowerCase(),
    str => str.replace(/\s+/g, "-"),
);
process("  Hello World  ")   // "hello-world"

// Memoize — cache results of pure functions
function memoize(fn) {
    const cache = new Map();
    return (...args) => {
        const key = JSON.stringify(args);
        if (cache.has(key)) return cache.get(key);
        const result = fn(...args);
        cache.set(key, result);
        return result;
    };
}

// Debounce — delay execution until calls stop
function debounce(fn, delay) {
    let timer;
    return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn(...args), delay);
    };
}
const onSearch = debounce(searchAPI, 300);   // only calls API after user stops typing for 300ms

// Throttle — limit execution rate
function throttle(fn, interval) {
    let lastRun = 0;
    return (...args) => {
        const now = Date.now();
        if (now - lastRun >= interval) {
            lastRun = now;
            fn(...args);
        }
    };
}
const onScroll = throttle(updatePosition, 100);  // at most once per 100ms

const data = { name: "Alice", scores: [95, 87], active: true };

// Serialise to JSON string
const json = JSON.stringify(data);               // compact
const json = JSON.stringify(data, null, 2);      // pretty-printed with 2 spaces

// Parse JSON string back to object
const parsed = JSON.parse(json);
parsed.name    // "Alice"

// Handle parse errors safely
function safeParseJSON(str) {
    try {
        return JSON.parse(str);
    } catch {
        return null;
    }
}

// Store
localStorage.setItem("theme", "dark");
localStorage.setItem("user", JSON.stringify({ id: 1, name: "Alice" }));

// Read
const theme = localStorage.getItem("theme");          // "dark" or null
const user  = JSON.parse(localStorage.getItem("user") ?? "null");

// Delete
localStorage.removeItem("theme");
localStorage.clear();   // delete everything

// Generate a random integer between min and max (inclusive)
const rand = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

// Deep clone an object (works for JSON-serialisable data)
const clone = obj => JSON.parse(JSON.stringify(obj));

// Group an array by a key
const groupBy = (arr, key) =>
    arr.reduce((acc, item) => {
        (acc[item[key]] ??= []).push(item);
        return acc;
    }, {});

// Chunk an array into pieces of size n
const chunk = (arr, n) =>
    Array.from({ length: Math.ceil(arr.length / n) }, (_, i) =>
        arr.slice(i * n, i * n + n)
    );

chunk([1,2,3,4,5,6,7], 3)   // [[1,2,3],[4,5,6],[7]]