30 Days of Code: Var Scope Mistake

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 14/30 I called an object method… and it printed: Hello undefined 😐 const user = { name: "Sam", greet: () => console.log(this.name) } The mistake: Arrow functions don’t have their own `this`. They inherit `this` from the outer scope, so it was not pointing to the object. Fix 👇 Use a normal function for object methods. Arrow functions are great for callbacks, but not for object methods. Small syntax change. Correct behavior. Day 15 tomorrow 👀 #30DaysOfCode #javascript #reactjs #frontend #webdevelopment #codeinuse

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 2/30 JavaScript just said: 0 == false → true 🤯 Why? Because `==` does type conversion before comparison. JavaScript tries to “help” by changing types automatically… and that’s where bugs start. "" == 0 → true null == undefined → true Your condition may pass even when values are completely different. Fix 👇 Use strict equality: `===` `===` checks value AND type, so no hidden surprises. In real projects, one wrong `==` can break authentication, validation, or permissions. Small operator. Big bugs. Follow the series — Day 3 tomorrow 👀 #30DaysOfCode #javascript #reactjs #frontend #webdevelopment #codeinuse

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 4/30 I returned a value inside `forEach()`… but my array became `undefined` 😐 const doubled = numbers.forEach(n => n * 2); The mistake: `forEach()` does NOT return anything. It only runs a loop. Correct 👇 const doubled = numbers.map(n => n * 2); `map()` creates a brand new array with transformed values. Simple rule: forEach → do something map → create something This is especially important in React when rendering lists. Day 5 tomorrow 👀 #30DaysOfCode #javascript #reactjs #frontend #webdevelopment #codeinuse

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 16/30 My component received a new userId… but UI still showed the old user 😐 The reason? I wrote: useEffect(() => { fetchUser(userId) }, []) Empty dependency array means: run only once on mount. So when userId changed, React never fetched new data. Fix 👇 useEffect(() => { fetchUser(userId) }, [userId]) Dependencies tell React WHEN to re-run the effect. Missing dependency = stale UI data. Day 17 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 7/30 I typed inside an input… clicked “Add new item”… and the text moved to another field 😳 The bug? key={index} I used array index as React key. React does not track elements. React tracks keys. When list order changes, React reuses DOM nodes, so your input becomes a different item. Fix 👇 key={item.id} Stable key = stable UI. React warnings are not decoration… they are future bugs. Day 8 tomorrow 👀 #30DaysOfCode #reactjs #javascript #frontend #webdevelopment #codeinuse

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 19/30 I left a page… and React threw a scary warning 😐 “Can't perform a state update on an unmounted component” I wasn’t even touching state. The real culprit? setTimeout. The user navigated away, but the timer still executed and tried updating state. Component gone ❌ Timer still running ✔️ Fix 👇 return () => clearTimeout(timer) Always clean up inside `useEffect`. Timers, listeners, and API calls must be cancelled. Small habit. Prevents huge debugging sessions. Have you faced this warning? #30DaysOfCode #reactjs #javascript #frontend #codeinuse

Day 7 of “Js in bits series – (Datatypes - undefined)” Key ideas covered in the article: 🔹 What undefined actually represents 🔹 When JavaScript automatically assigns undefined 🔹 Common scenarios where developers encounter it 🔹 The difference between undefined and null 👉 https://lnkd.in/gSN7MqSY #javascript #webdevelopment #frontend #softwareengineering #coding #learning

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 18/30 I clicked “Add Item”… nothing happened 😐 No error. No warning. Button worked. My code: items.push("New Task") setItems(items) The array DID change. But React didn’t update UI. Why? Because React doesn’t check contents. React checks references. Same array reference = React thinks nothing changed. Fix 👇 setItems([...items, "New Task"]) Create a NEW array instead of modifying the old one. This single mistake causes many: “React state not updating” moments. Save this — you will hit this bug in a real project. #30DaysOfCode #reactjs #javascript #frontend #codeinuse

🚀 30 Days — 30 Coding Mistakes Beginners Make Day 13/30 I copied an object… and the original data changed 😐 const newUser = user Then I updated newUser… and user also changed. Because objects in JavaScript are stored by reference, not value. Both variables pointed to the same memory. Fix 👇 const newUser = { ...user } Now a new object is created. This concept is very important in React state updates and debugging strange UI behavior. Day 14 tomorrow 👀 #30DaysOfCode #javascript #reactjs #frontend #webdevelopment #codeinuse