webdev-javascript-fundamentals

JavaScript Fundamentals for Web Development

Core Principles

1. Modern ES2024+ syntax — Use const/let, arrow functions, optional chaining, nullish coalescing, and structured clone as defaults
2. Immutability by default — Prefer const, non-mutating array methods (toSorted, toReversed, toSpliced), and structuredClone for deep copies
3. Async-first patterns — Use async/await over raw Promises; handle errors at appropriate boundaries with structured error types
4. Declarative array transformations — Chain map, filter, reduce, flatMap instead of imperative loops
5. Explicit module boundaries — Use ES modules with named exports; keep module APIs small and focused

---

Modern Variable Declarations and Destructuring

Use const for all bindings that are not reassigned. Use let only when reassignment is necessary. Never use var.

// Destructuring objects with defaults and renaming
const { name, age = 0, address: { city } = {} } = user;

// Destructuring arrays with skip and rest
const [first, , third, ...remaining] = items;

// Nested destructuring in function parameters
function createOrder({ product: { id, name }, quantity = 1, discount = 0 }) {
  const total = calculatePrice(id, quantity) * (1 - discount);
  return { id: crypto.randomUUID(), product: name, quantity, total };
}

// Nullish coalescing and optional chaining
const displayName = user?.profile?.displayName ?? user?.name ?? "Anonymous";
const theme = settings?.theme ?? "system";

// Structured clone for deep copies (no prototype or function copying)
const snapshot = structuredClone(state);

See async-patterns.md for: advanced destructuring in async contexts and parameter handling.

---

Async/Await Patterns

Always use async/await for asynchronous code. Handle errors at the appropriate boundary rather than on every call.

// Parallel execution with Promise.all
async function loadDashboard(userId) {
  const [profile, orders, notifications] = await Promise.all([
    fetchProfile(userId),
    fetchOrders(userId),
    fetchNotifications(userId),
  ]);
  return { profile, orders, notifications };
}

// Error boundary with structured error handling
async function fetchWithRetry(url, options = {}, retries = 3) {
  for (let attempt = 1; attempt <= retries; attempt++) {
    try {
      const response = await fetch(url, options);
      if (!response.ok) throw new HttpError(response.status, await response.text());
      return await response.json();
    } catch (error) {
      if (attempt === retries) throw error;
      await new Promise((r) => setTimeout(r, 2 ** attempt * 100));
    }
  }
}

// AbortController for cancellation
async function searchWithTimeout(query, timeoutMs = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
  try {
    return await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
      signal: controller.signal,
    });
  } finally {
    clearTimeout(timeoutId);
  }
}