JS Common Mistakes

JavaScript Common Mistakes: Frequent Bugs and Fast Fixes

Even experienced developers run into subtle JavaScript quirks around equality, numbers, object references, and asynchronous callbacks. Learning these classic pitfalls ahead of time saves hours of frustrating debugging.

Top JavaScript Pitfalls at a Glance

Most subtle bugs come from implicit type conversions, default string sorting, or accidental assignment inside conditions. Review this reference table before shipping code:

Another frequent trap happens when passing an object method directly as a callback (setTimeout(user.save, 100)), which drops this and causes a TypeError. Always wrap callbacks in an arrow function or bind them explicitly.

Fixing Reference, this, and Async Pitfalls

Watch out for returning an object literal on the line below return, or assuming forEach waits for await inside callbacks.

// Pitfall 1: Breaking line after return returns undefined!
function buildUserGood(name) {
  return {
    name,
    active: true,
  };
}

// Pitfall 2: Numeric sort requires a comparator
const nums = [100, 25, 5];
const sorted = [...nums].sort((a, b) => a - b);

// Pitfall 3: Object.isNaN vs Number.isNaN
console.log("Safe user:", buildUserGood("Lina"));
console.log("Sorted numbers:", sorted);
console.log("Number.isNaN('abc'):", Number.isNaN("abc")); // false

Common Mistakes to Avoid

• Mutating state arrays with push() or sort() directly: Always clone first ([...items]) or use ES2023 immutable methods like toSorted().
• Using forEach(async item => ...) expecting sequential execution: forEach ignores returned Promises and runs everything simultaneously. Use for...of with await, or Promise.all(items.map(...)).
• Comparing two arrays with a === b: [1, 2] === [1, 2] is always false because they are distinct objects in memory. Compare lengths and individual elements.

Frequently Asked Questions

Why does return followed by a newline return undefined?

JavaScript's Automatic Semicolon Insertion treats a bare return at the end of a line as a complete return; statement, ignoring the object literal on the line below.

Why does "5" + 3 equal "53" while "5" - 3 equals 2?

The + operator performs string concatenation whenever either side is a string, whereas - only performs arithmetic and converts "5" to 5.

How do I prevent TypeError: Cannot read properties of undefined?

Use optional chaining (user?.profile?.avatar) paired with nullish coalescing (?? "/default.png") whenever reading nested API data.