30 Days of Code: Common Mistakes in JavaScript

🚀 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

🚀 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 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

State vs Props in React Simplified: If you're learning React, this is one of the most important concepts to understand 1. State: Managed inside the component Can be updated (mutable) Used for dynamic data (like counters, inputs) 2. Props: Passed from parent to child Read-only (immutable) Used to share data between components In short: State = “owned data” Props = “received data” Understanding this difference helps you write cleaner and more predictable React code. What confused you more when learning React: State or Props? #React #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode

🚀 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

⚠️ JavaScript Mistakes Every Developer Should Know Even experienced developers make these mistakes… avoid them 👇 ❌ Using == instead of === 👉 Can cause unexpected results due to type conversion ❌ Forgetting return in functions 👉 Function runs but returns undefined ❌ Not handling asynchronous code 👉 Code executes before data is ready ❌ Mutating objects/arrays directly 👉 Can lead to unexpected bugs ❌ Ignoring this behavior 👉 this depends on how a function is called ❌ Using var instead of let/const 👉 Leads to scope-related issues 🔥 Key Takeaway: Small mistakes in JavaScript can lead to big bugs. Write clean and predictable code. 💬 Which mistake have you made before? #javascript #webdevelopment #frontend #coding #100DaysOfCode

learned something interesting. I’ve been using ?. in my JavaScript code quite often to safely access nested properties, but today I realized it’s actually called Optional Chaining. const city = user?.address?.city; Small feature, but it saves us from many undefined errors. Learning something new even from things we already use daily is always satisfying. #javascript #webdevelopment #frontenddevelopment #learning

I'm currently focusing on my backend journey 🚀 No fancy designs for now just logic, APIs, and making things actually work. Today I built a Color Scheme Generator from scratch using vanilla JavaScript. It connects to a real API, fetches live data, and displays a full color palette on the page. Small project. Big lesson. I learned: → How to call an external API with fetch() → How async/await works and why it matters → How to dynamically create and update the DOM → How to read API documentation and use it Every project teaches me something new — and I'm just getting started. 🔗 GitHub: https://lnkd.in/dVxnrRWU #JavaScript #Backend #100DaysOfCode #WebDevelopment #Learning

🎯 Stop using 'any' in TypeScript. Use Generics instead. Generics = reusable, type-safe code. Before (bad): function getFirst(arr: any[]): any {   return arr[0]; } After (good): function getFirst<T>(arr: T[]): T {   return arr[0]; } Now it works for any type AND stays safe: getFirst([1, 2, 3]) // returns number getFirst(["a", "b"]) // returns string Real-world example — API response wrapper: interface ApiResponse<T> {   data: T;   status: number;   message: string; } const user: ApiResponse<User> = await fetchUser(); // user.data is typed as User ✅ Generics = write once, work safely everywhere. 🔐 #TypeScript #JavaScript #WebDev #FullStack #Programming

🚀 Just created a Node.js Cheat Sheet! A simple and practical reference guide to understand core backend concepts and build applications with confidence. 📌 Topics Covered: • Modules • File System • Server • Async • NPM Perfect for beginners exploring backend development and developers who want a quick revision guide. Live: (https://lnkd.in/dxABpp_Q) Keep learning. Keep building. 💻✨ #NodeJS #JavaScript #BackendDevelopment #WebDevelopment #Coding #CheatSheet #LearningJourney