🐞 Common JavaScript Errors and Solutions

✅ The fix

function calculateTotal(items) {
    let total = 0;
    for (const item of items) {
        total += item.price;
    }                 // ✅ close the loop
    return total;
}

// ✅ Valid JSON — no trailing comma
const data = JSON.parse('{"name": "John", "age": 30}');

// TIP: build JSON with stringify instead of hand-typing it
const safe = JSON.stringify({ name: "John", age: 30 });

✅ The fix

let username = "Alice";
console.log(username);      // declare first, then use

let userCount = 10;
console.log(userCount);     // match the exact name

function makeLocal() {
    const localVar = "hidden";
    return localVar;        // return it so callers can use the value
}
console.log(makeLocal());

✅ The fix — optional chaining & nullish coalescing

// Optional chaining (?.) short-circuits to undefined instead of throwing
console.log(data.user?.name?.length);   // undefined, no crash

// Nullish coalescing (??) supplies a default for null/undefined
const name = user?.name ?? "Guest";     // "Guest"

// Guard DOM lookups — getElementById returns null when nothing matches
const el = document.getElementById("nope");
if (el) {
    el.addEventListener("click", handler);
}

✅ The fix

numbers.map(n => n * 2);        // correct method name

const calculate = (a, b) => a + b;
const result = calculate(5, 3); // store the RESULT separately
console.log(calculate(2, 2));   // function stays intact

console.log(user.getName());    // ✅ note the parentheses

// Defensive check when a value might not be a function
if (typeof maybeFn === "function") maybeFn();

✅ The fix

// 1) Always give recursion a base case
function countDown(n) {
    if (n <= 0) return;   // ✅ stopping condition
    console.log(n);
    countDown(n - 1);
}

// 2) Guard against cycles with a visited set
function walk(node, visited = new Set()) {
    if (!node || visited.has(node)) return;
    visited.add(node);
    walk(node.parent, visited);
}

// 3) When recursion gets deep, iterate instead
function fibonacci(n) {
    if (n <= 1) return n;
    let a = 0, b = 1;
    for (let i = 2; i <= n; i++) [a, b] = [b, a + b];
    return b;               // O(n), no stack growth
}

✅ The fix

// Use let when the binding itself must change
let pi = 3.14159;
pi = 3.14;                  // ✅

// Build a new array instead of reassigning the loop variable
const scores = [85, 92, 78];
const bumped = scores.map(s => s + 5);   // [90, 97, 83]

// const objects/arrays can still be MUTATED (contents change, binding doesn't)
const user = { name: "Alice" };
user.name = "Bob";          // ✅ allowed
user.age = 30;              // ✅ allowed
// user = {};               // 💥 not allowed — that's a rebind

// Freeze to block mutation too
const frozen = Object.freeze({ name: "Alice" });
frozen.name = "Bob";        // ignored (throws in strict mode)

✅ The fix

async function getData() {
    const response = await fetch("/api/data");  // ✅ await the fetch
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();                     // await optional on return
}

// Run independent work in parallel with Promise.all
async function loadAll() {
    const [user, posts, tags] = await Promise.all([
        fetchUser(),
        fetchPosts(),
        fetchTags()
    ]);                                          // all three at once
    return { user, posts, tags };
}

✅ The fix

if (x === 5) { }           // strict comparison

console.log(Number("2") + 2);     // 4

// Compare floats within a tolerance
const almostEqual = (a, b, eps = 1e-9) => Math.abs(a - b) < eps;
console.log(almostEqual(0.1 + 0.2, 0.3));   // true

// Compare contents, not references
const sameArray = (a, b) =>
    a.length === b.length && a.every((v, i) => v === b[i]);
console.log(sameArray([1, 2], [1, 2]));     // true

// Preserve 'this' by binding (or use an arrow field in a class)
const fn = obj.getValue.bind(obj);
console.log(fn());          // 42

🎉 Key Takeaways

• Errors are syntax (won't parse), runtime (throws while running), or logical (wrong result, no throw)
• ReferenceError = a name that doesn't exist; TypeError = the wrong type for the operation — the two most common runtime errors
• Optional chaining (?.) and nullish coalescing (??) prevent the "cannot read property of undefined" crash
• Give recursion a base case; remember const locks the binding, not the contents
• Don't forget await; parallelize independent requests with Promise.all
• The nastiest bugs are logical — = vs ===, coercion, float precision, reference equality, and lost this