Common JavaScript Mistakes

Introduction

JavaScript is one of the most popular programming languages for web development. It is powerful, flexible, and easy to start with—but that doesn’t mean it’s error-free. Beginners often make small mistakes that can lead to confusing bugs and unexpected results.

In this article, we’ll explore the most common JavaScript mistakes beginners make, along with examples and solutions.

1. Using == (double equal) instead of === (triple equal)

Suppose you are comparing values

The number should not be equal to a string

❌ Wrong Way

10 == "10"   // true 

✅ Correct Way

10 === "10"   // false

Important keys:

== is used to perform type coercion.

=== is used to check value and type.

Note: Always use === unless you specifically need type conversion.

2. Forgetting to define variable Type

Suppose you forget to define a variable type like var, let or const.

❌ Wrong Way

x = 10;

Note: Create a global variable accidentally if you did not define the variable type.

Correct way: Create a variable through let

✅ Correct Way

let x = 10;

3. Confusing null and undefined

Null: It is set by the developer, and it is a Intentional empty value.

Undefined: It is set by JavaScript, and Variable not assigned.

Example:

let a;
console.log(a); // undefined

let b = null;

4. Hoisting Confusion with let and const

let and const are hoisted, but in the Temporal Dead Zone (TDZ).

Example: It will show error when let and const are hoisted.

console.log(a);  // ❌ Cannot access 'a' before initialization
let a = 10;

console.log(b);  // ❌ Cannot access 'b' before initialization
const b = "Hello";

5. Forgetting to Return in Functions

Suppose, you forgot to return in function, then the output will be undefined.

Example: ❌ Wrong Way

function add(a, b) {
  a + b;
}
let a = add (5, 10);
console.log(a) 

Output is undefined

✅ Correct Way

function add(a, b) {
  return a + b;
}
let a = add (5, 10);
console.log(a) 

Output is 15

6. Modifying const Objects Incorrectly

const prevents reassignment, not mutation.

❌ Wrong Way

const user = {};
user = { name: "John" }; // Error

✅ Correct Way

const user = {};
user.name = "John"; // Allowed

7. Using async/await inside a forEach loop

forEach() does not wait for async functions.

❌ Wrong Way

arr.forEach(async (item) => {
  await fetchData(item);
});

✅ Correct Way

Instead of forEach, you can use for.. of loop, when you use await inside it.

for (const item of arr) {
  await fetchData(item);
}

8. Mutating Arrays and Objects Unintentionally

Suppose you have arr1 and you have copied it to arr2, then you add one element into arr2, then how to manage arr1 and arr2.

❌ Wrong Way

let arr1 = [1,2,3,4];
let arr2 = arr1;
arr2.push(5);
console.log(arr2);  // Output: [ 1, 2, 3, 4, 5 ]
console.log(arr1);  // Output: [ 1, 2, 3, 4, 5 ]

✅ Correct Way

let arr1 = [1,2,3,4];
let arr2 = [...arr1];
arr2.push(5);
console.log(arr2);  // Output: [ 1, 2, 3, 4, 5 ]
console.log(arr1);  // Output: [ 1, 2, 3, 4]

9. Not Using try…catch for Error Handling

If you used it without a try catch

❌ Without try…catch (Bad Practice)

let data = JSON.parse('invalid json');
console.log("This will not run");

✅ With try…catch (Good Practice)

try {
  let data = JSON.parse('invalid json');
  console.log(data);
} catch (error) {
  console.log("Something went wrong:", error.message);
}

Interview Questions

Conclusion

Making mistakes is a natural part of learning JavaScript, especially for beginners. However, being aware of these common errors can save you time, reduce frustration, and improve your coding skills significantly.