10 Common Coding Mistakes Every Beginner Makes (and How to Fix Them)

Everyone Makes These Mistakes

Making mistakes is not a sign that you are bad at coding. It is a sign that you are coding. Every experienced developer has made every mistake on this list -- most of them multiple times.

The difference between beginners and experienced developers is not the absence of mistakes. It is the speed of recognition. Once you have seen an off-by-one error fifty times, you spot it in seconds. This guide accelerates that recognition.

Mistake 1: Off-By-One Errors

The most common bug in all of programming. It happens when your loop runs one too many or one too few times.

1// Bug: tries to access index 5, which doesn't exist
2const items = [10, 20, 30, 40, 50];
3for (let i = 0; i <= items.length; i++) {
4  console.log(items[i]); // items[5] is undefined!
5}
6 
7// Fix: use < instead of <=
8for (let i = 0; i < items.length; i++) {
9  console.log(items[i]);
10}

Arrays are zero-indexed. An array with 5 elements has indices 0, 1, 2, 3, 4. Using <= instead of < tries to access index 5, which does not exist.

Mistake 2: Comparing with = Instead of == or ===

The single equals sign assigns a value. Double or triple equals signs compare values.

1// Bug: this ASSIGNS 10 to x (always true)
2if (x = 10) {
3  console.log("x is 10");
4}
5 
6// Fix: use === for comparison
7if (x === 10) {
8  console.log("x is 10");
9}

In JavaScript, always use === (strict equality) over == (loose equality). Loose equality performs type coercion, which causes surprising results:

1"5" == 5    // true (loose equality coerces types)
2"5" === 5   // false (strict equality checks type too)

Mistake 3: Forgetting to Return a Value

Functions that calculate something but forget to return the result are a silent killer.

1// Bug: calculates but doesn't return
2function double(n) {
3  n * 2;
4}
5console.log(double(5)); // undefined
6 
7// Fix: add the return keyword
8function double(n) {
9  return n * 2;
10}
11console.log(double(5)); // 10

In Python, this is equally common:

1# Bug
2def double(n):
3    n * 2
4 
5# Fix
6def double(n):
7    return n * 2

Mistake 4: Mutating Arrays and Objects Directly

In JavaScript and React, directly modifying arrays and objects instead of creating new copies leads to subtle bugs, especially with state management.

1// Bug: modifies the original array
2const numbers = [1, 2, 3];
3numbers.push(4); // mutates!
4 
5// Fix: create a new array
6const numbers = [1, 2, 3];
7const newNumbers = [...numbers, 4]; // original unchanged

This matters enormously in React, where state mutations do not trigger re-renders:

1// Bug: React won't re-render
2const [items, setItems] = useState([1, 2, 3]);
3items.push(4); // mutating state directly!
4setItems(items); // same reference, no re-render
5 
6// Fix: create new array
7setItems([...items, 4]); // new reference triggers re-render

Mistake 5: Not Handling Null and Undefined

Attempting to access properties on null or undefined is the most common runtime error in JavaScript.

1// Bug: crashes if user is null
2function getUserName(user) {
3  return user.name; // TypeError if user is null!
4}
5 
6// Fix: check first
7function getUserName(user) {
8  if (!user) return "Unknown";
9  return user.name;
10}
11 
12// Modern fix: optional chaining
13function getUserName(user) {
14  return user?.name ?? "Unknown";
15}

Mistake 6: Infinite Loops

A loop that never terminates freezes your program (or your browser tab).

1// Bug: i never increases, loop runs forever
2let i = 0;
3while (i < 10) {
4  console.log(i);
5  // forgot i++!
6}
7 
8// Fix: always update the loop variable
9let i = 0;
10while (i < 10) {
11  console.log(i);
12  i++;
13}

Common causes:

• Forgetting to increment the counter
• Using the wrong comparison operator
• Modifying the wrong variable inside the loop

Mistake 7: String and Number Confusion

JavaScript's type coercion makes this especially tricky.

1// Bug: concatenates instead of adding
2const price = "10";
3const tax = 5;
4console.log(price + tax); // "105" (string concatenation!)
5 
6// Fix: convert to number first
7console.log(Number(price) + tax); // 15
8console.log(parseInt(price) + tax); // 15

This frequently happens with form inputs, which always return strings:

1const input = document.querySelector('input');
2const value = input.value; // always a string!
3const number = Number(value); // now a number

Mistake 8: Variable Scope Issues

Variables declared inside a block are not accessible outside it.

1// Bug: variable not accessible outside the if block
2if (true) {
3  let message = "Hello";
4}
5console.log(message); // ReferenceError!
6 
7// Fix: declare in the appropriate scope
8let message;
9if (true) {
10  message = "Hello";
11}
12console.log(message); // "Hello"

In Python, this works differently -- variables in if blocks are accessible in the enclosing function scope. But variables inside functions are still local:

1def greet():
2    message = "Hello"
3 
4print(message)  # NameError! message is local to greet()

Mistake 9: Incorrect Boolean Logic

Combining conditions with AND (&&) and OR (||) is a frequent source of logic errors.

1// Bug: this always lets anyone through
2if (role === "admin" || role === "editor" || true) {
3  // always executes because true is always true
4}
5 
6// Bug: checking wrong conditions
7if (age > 18 && age < 65) {
8  // excludes exactly 18 and 65
9}
10 
11// Fix: use >= and <= for inclusive ranges
12if (age >= 18 && age <= 65) {
13  // includes 18 and 65
14}

A common mistake is writing conditions that do not express what you intend:

1// Bug: doesn't check what you think
2if (color !== "red" || color !== "blue") {
3  // This is ALWAYS true! A color can't be both red and blue
4}
5 
6// Fix: use && for "not this AND not that"
7if (color !== "red" && color !== "blue") {
8  // Correct: excludes both red and blue
9}

Mistake 10: Copy-Paste Errors

When you copy code and modify it, it is easy to forget to change everything that needs changing.

1// Bug: copied from firstName handler, forgot to change
2function handleFirstNameChange(e) {
3  setFirstName(e.target.value);
4}
5 
6function handleLastNameChange(e) {
7  setFirstName(e.target.value); // Should be setLastName!
8}

This bug is especially insidious because the code looks correct at a glance. The fix is to review copied code line by line, or better yet, extract the common logic into a reusable function:

1function handleChange(setter) {
2  return (e) => setter(e.target.value);
3}

How to Make Fewer Mistakes

1. Read error messages carefully -- they usually tell you exactly what went wrong and where
2. Use console.log() liberally -- check the values of variables at each step
3. Test edge cases -- empty arrays, null values, zero, negative numbers
4. Write small pieces of code and test frequently -- do not write 50 lines before running
5. Use TypeScript -- it catches type-related mistakes before your code runs

Start Building Debug Skills

The fastest way to get better at spotting bugs is to practice writing and fixing code. Each mistake you encounter and resolve makes you faster at recognizing the same pattern next time.

Practice with our interactive coding exercises -- they provide immediate feedback that helps you catch and correct mistakes in real time.

Related Reading

• How to Debug JavaScript Code -- systematic debugging techniques for finding and fixing bugs
• Understanding Functions in Programming -- avoid common function mistakes from the start
• How to Practice Coding Effectively -- structured practice reduces mistakes over time