DEV Community

Muhammad Aqib Bin Azam
Muhammad Aqib Bin Azam

Posted on

🔥 10 Common JavaScript Pitfalls That Even Experienced Developers Fall Into

#javascript #programming #beginners #webdev

JavaScript is an incredibly powerful and flexible language — but that flexibility comes with a price: subtle quirks and gotchas that even seasoned developers stumble into.

Whether you're building enterprise applications or working on your next side project, these are the 10 most common JavaScript pitfalls that can cause unexpected behavior, bugs, or even security vulnerabilities.

📌 This post will help you identify, understand, and avoid these common traps, and write cleaner, safer, and more predictable code.

🚫 1. Confusing == vs ===

The == operator performs type coercion, while === checks for strict equality.

0 == false   // true 😱
0 === false  // false ✅
Enter fullscreen mode Exit fullscreen mode

✅ Always use === unless you really understand coercion rules.

🧠 2. Using var Instead of let or const

var is function-scoped and hoisted, which can lead to unpredictable behavior.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000); // 3, 3, 3
}
Enter fullscreen mode Exit fullscreen mode

Use let or const to get block-scoped, predictable results.

🌀 3. Misunderstanding Asynchronous Behavior

JavaScript’s async nature can be tricky:

const result = fetchData(); // ❌ Doesn't wait!
console.log(result);
Enter fullscreen mode Exit fullscreen mode

✅ Always await async functions, and remember await can only be used inside async functions.

🧨 4. Modifying Objects/Arrays by Reference

Objects and arrays are reference types:

const a = { count: 1 };
const b = a;
b.count = 2;
console.log(a.count); // 2 ❗
Enter fullscreen mode Exit fullscreen mode

🛡 Use structuredClone, spread ({ ...a }), or libraries like Lodash for immutability.

🔁 5. Incorrect for...in vs for...of Usage

  • for...in is for object keys
  • for...of is for iterables like arrays 
const arr = ['a', 'b', 'c'];
for (let i in arr) console.log(i); // "0", "1", "2"
for (let i of arr) console.log(i); // "a", "b", "c"
Enter fullscreen mode Exit fullscreen mode

🧮 6. Floating Point Math Woes 

0.1 + 0.2 === 0.3 // false 😤
Enter fullscreen mode Exit fullscreen mode

✅ Use libraries like decimal.js or work with integers when precision matters (e.g. cents instead of dollars).

📦 7. Leaking Variables to Global Scope

In browsers:

function test() {
  leakedVar = "oops"; // 👻 becomes global
}
Enter fullscreen mode Exit fullscreen mode

✅ Always declare variables with let, const, or var.

🗂️ 8. Overusing null and undefined Interchangeably 

typeof null        // "object" 😬
typeof undefined   // "undefined"
Enter fullscreen mode Exit fullscreen mode

💡 Use one consistently in your app. Many devs use null for “intentional empty” and undefined for “not set”.

🧪 9. Not Handling Errors in Async Code

Uncaught promise errors can crash your app:

fetch('/data')
  .then(res => res.json())
  .then(data => doSomething(data));
// No `.catch()` 😵
Enter fullscreen mode Exit fullscreen mode

✅ Always add .catch() or wrap in try/catch with async/await.

🧵 10. Assuming JavaScript is Single-threaded (Hint: It's not entirely)

JS has one main thread, but async tasks like fetch, setTimeout, and event listeners use the event loop.

🤯 Misunderstanding this can lead to race conditions or unhandled state updates in frameworks like React or Vue.

✅ Final Thoughts

JavaScript is powerful — but with great power comes great... undefined. 🕸️

Avoiding these common pitfalls will make your code more maintainable, more secure, and way easier for others (and your future self) to read.

💬 Have you encountered any of these? Got your own JavaScript “gotchas” to share?

Drop them in the comments below 👇

Let’s help each other write better JS 💪

Top comments (0)