Lesson 5 12 min

Common Bug Patterns

Recognize the most common bug patterns — off-by-one errors, null references, race conditions, async issues, and type mismatches — to identify bugs faster.

🔄 Recall Bridge: In the previous lesson, you learned debugging tools — print statements, IDE debuggers, and browser DevTools. Now let’s build your pattern recognition: the common bug types that cause 80% of all bugs.

Experienced developers debug faster because they’ve seen the same bug patterns hundreds of times. When they see “index out of bounds,” they immediately check loop boundaries (off-by-one). When results are intermittent, they look for race conditions. Pattern recognition turns 30-minute investigations into 30-second diagnoses.

The Top Bug Patterns

Pattern 1: Off-by-One Errors

Symptoms: Array index out of bounds, missing first/last element, extra iteration

Variant	Wrong	Correct
Loop boundary	`i <= array.length`	`i < array.length`
Start index	`for i in range(1, n)`	`for i in range(0, n)`
Slice end	`str.slice(0, str.length - 1)`	Depends on intent
Pagination	page 1 = items 1-10	page 1 = items 0-9 (or 1-10?)

Pattern 2: Null/Undefined References

Symptoms: “Cannot read property of null/undefined,” NullPointerException

Common causes:

Cause	Example	Prevention
API returns null	`user.profile.avatar` when profile is null	Optional chaining: `user?.profile?.avatar`
Missing function parameter	`function greet(name) { name.toUpperCase() }` called without args	Default parameters or null checks
Uninitialized variable	Using `result` before async call finishes	Initialize with default value
Wrong property name	`data.username` when the field is `data.user_name`	Check actual API response shape

Pattern 3: Race Conditions

Symptoms: Works sometimes, fails intermittently, logging makes it “disappear”

AI prompt for race condition diagnosis:

My code calls [OPERATION A] and [OPERATION B] and uses both results. It works 90% of the time but sometimes produces wrong results. Here’s my code: [PASTE]. Is there a race condition? If so, how do I fix it to ensure correct results regardless of execution order?

Pattern 4: Async/Await Errors

Symptoms: Function returns Promise instead of value, undefined result from API call

Error	Cause	Fix
Returns `[object Promise]`	Missing `await`	Add `await` before async call
Undefined result	Callback-based function in async code	Wrap in `new Promise()` or use promisify
Unhandled rejection	Missing `.catch()` or `try/catch`	Wrap async code in try/catch
Sequential instead of parallel	Awaiting in a loop	Use `Promise.all()` for independent calls

Pattern 5: Type Mismatches

Symptoms: “1” + 1 = “11” instead of 2, wrong comparison results

Issue	Cause	Fix
String concatenation	`"5" + 3 === "53"`	`Number("5") + 3` or `parseInt("5") + 3`
Loose equality	`"0" == false` is true	Use `===` for strict equality
JSON parsing	API returns string, expected object	`JSON.parse(response)` if needed
Boolean coercion	`if ("false")` is true	Compare explicitly: `if (value === "true")`

Pattern 6: State Mutation Bugs

Symptoms: Value changed “mysteriously,” function has side effects

Common cause: Modifying a shared object/array instead of creating a copy.

✅ Quick Check: Your search function returns results for the previous query, not the current one. The user types “hello,” results show for “hell.” What pattern is this? (Answer: A stale closure or debounce timing issue. The search handler captures the old query value. Either: (1) The debounce fires with the old value (fix: use the latest value, not the captured one), or (2) An older API response arrives after a newer one (fix: cancel or ignore stale responses using an abort controller or request ID).)

AI for Pattern Recognition

AI prompt when you’re stuck:

I have a bug with these symptoms: [DESCRIBE]. Which of these common bug patterns does this match: off-by-one, null reference, race condition, async error, type mismatch, state mutation, stale closure, or something else? For the matched pattern, suggest the most likely cause and fix.

Key Takeaways

Off-by-one errors and null references are the two most common bug patterns — when you see “index out of bounds” check loop boundaries, when you see “cannot read property of null” trace backward to find where the null value originated
Race conditions are identifiable by their symptoms: works in development but fails intermittently in production, and adding logging makes the problem disappear (because logging changes execution timing) — fix by never assuming async operations complete in a specific order
Build a mental library of bug patterns: when you encounter a bug, match its symptoms to known patterns first — experienced developers debug 40-60% faster because they recognize patterns instead of investigating from scratch every time

Up Next

In the next lesson, you’ll learn to debug production issues — where you can’t attach a debugger, can’t add print statements, and must investigate through logs, monitoring, and error tracking.

Knowledge Check

1. You have an array of 10 items (indices 0-9). Your loop uses `for (let i = 0; i <= 10; i++)`. The code crashes on the last iteration. What bug pattern is this?

An off-by-one error. The condition `i <= 10` runs the loop for indices 0-10, but the array only has indices 0-9. Index 10 is out of bounds. Fix: `i < 10` or `i < array.length`. Off-by-one errors are the most common bug in programming. Variations: (1) Starting at 1 instead of 0 (skip first element), (2) Using <= instead of < (access one past the end), (3) Length vs. last index confusion (array.length is 10, last index is 9), (4) String slicing boundaries (inclusive vs. exclusive end). AI tip: when you see array access errors or 'index out of bounds', check the loop boundaries — it's almost always off-by-one A type error — the loop variable should be a number but becomes undefined A memory allocation error — the array is too small

2. Your app works perfectly in development but in production, a feature that reads data from two API calls sometimes shows wrong results. When you add logging, the problem seems to disappear. What bug pattern is this?

A race condition. Two API calls return in unpredictable order. In development (fast network, low load), they usually return in the expected order. In production (variable latency), sometimes call B returns before call A, and your code assumes A finishes first. Adding logging changes the timing (execution slows down), which is why the bug disappears with logs — a classic sign of a race condition. Fixes: (1) Use Promise.all() to wait for both before processing, (2) Don't assume order — check which data you have before using it, (3) Use async/await to sequence dependent calls. AI prompt: 'I have a race condition between two API calls. Here is my code: [PASTE]. Show me how to fix it so the results are correct regardless of which call returns first' A caching issue — production serves cached data that's different from development A network error — production has slower connections that cause timeouts

3. A function works correctly 99% of the time. It only fails when the input is an empty string: `""`. Your code checks `if (input)` to validate the input. What's the bug pattern?

A truthiness/falsiness bug — empty strings, 0, null, and undefined are all falsy in JavaScript. `if (input)` rejects empty string AND null/undefined. If empty string is a valid input (user submitted a blank form field), the check is wrong. The correct check depends on what you're validating: (1) Not null/undefined: `if (input !== null && input !== undefined)` or `if (input != null)`. (2) Is a string (even empty): `if (typeof input === 'string')`. (3) Has content: `if (input && input.length > 0)`. This pattern extends to 0 (a valid number that's falsy), false (a valid boolean that's... falsy), and [] (an empty array that's truthy — gotcha!). AI prompt: 'Review my input validation for truthiness/falsiness bugs: [PASTE CODE]. Which edge cases (empty string, 0, null, false) would be incorrectly handled?' A type error — the function expects a string but receives a boolean An encoding issue — the empty string is actually a zero-width character

Answer all questions to check

Complete the quiz above first

Related Skills

Bug Hunter Debug Detective