Common JavaScript Mistakes

In this tutorial, you will learn about Common JavaScript mistakes and how to avoid them.

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);
}