Optimizing JavaScript with Debouncing for Smoother User Experience

Day 4 of my JavaScript learning journey. Today I learned one of the most confusing concepts so far: Hoisting. I tried something strange. greet(); function greet() { console.log("Hello!"); } The function worked even before it was defined. That’s because of hoisting. JavaScript reads the whole code first and moves function declarations to the top internally. But variables behave differently. console.log(x); var x = 5; This prints undefined, not 5. And if we use let or const, JavaScript throws a ReferenceError. This area is called the Temporal Dead Zone. My takeaway today: Always declare variables before using them. Day 4 done. JavaScript keeps getting more interesting. What JavaScript concept confused you the most when you first learned it? #JavaScript #LearningInPublic #WebDevelopment #100DaysOfCode #Frontend

🚀 Day 88 of My #100DaysOfCode Challenge I thought I knew JavaScript… until I found these 🤯 Today I came across some weird (but real) JavaScript facts that honestly surprised me. Sharing here because I know I’m not the only one who didn’t know this 👇 💡 Things JavaScript does that feel illegal 😅 1️⃣ NaN is not equal to itself console.log(NaN === NaN); // false Yes… even JavaScript is confused here. 2️⃣ typeof null = "object" console.log(typeof null); // "object" This is actually a bug… and it still exists. 3️⃣ Functions can behave like objects function demo() {} demo.x = 10; console.log(demo.x); // 10 I didn’t expect this at all. 4️⃣ This looks correct but it’s not console.log(15 > 10 > 5); // false JavaScript evaluates it step by step… not the way we think. 5️⃣ [] + [] = "" console.log([] + []); // "" This one really broke my brain. JavaScript is not just a language… it’s full of surprises 😄 The more I learn, the more I realize how many small things we usually ignore — but they actually matter a lot. If you knew all of these already… respect 🙌 If not, welcome to the club 🤝 #Day88 #100DaysOfCode #JavaScript #CodingJourney #WebDevelopment #LearningInPublic

Day 4 of My JavaScript Learning Journey Today I learned about one of the most important data structures in JavaScript — Arrays. An Array is used to store multiple values in a single variable, which makes managing lists of data much easier. 🔹 Key things I learned today: • What an array is and how it stores multiple values • How to access array elements using indexes • Important array properties like length • Useful array methods such as push(), pop(), shift(), unshift(), slice(), and splice() 💡 Example use cases of arrays: Storing a list of users Managing product lists in an e-commerce website Handling tasks in a to-do app #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #LearnInPublic #100DaysOfCode

🚀 Day 86 of My #100DaysOfCode Challenge Today I discovered a lesser-known feature in JavaScript — Symbols. Most developers work with object keys using strings, but JavaScript also provides another unique type called Symbol. A Symbol creates a unique and hidden property key that cannot accidentally conflict with other keys. Example const id = Symbol("id"); const user = { name: "Tejal", [id]: 12345 }; console.log(user.name); // Tejal console.log(user[id]); // 12345 Why Symbols are interesting • Every Symbol is unique • Helps create hidden object properties • Prevents accidental property overwriting • Often used internally in libraries and frameworks Even if two symbols have the same description, they are still different. const a = Symbol("key"); const b = Symbol("key"); console.log(a === b); // false Learning about features like Symbols helps me understand how JavaScript works behind the scenes and how large applications manage object data safely. Exploring deeper concepts every day. 💻✨ #Day86 #100DaysOfCode #JavaScript #WebDevelopment #LearningInPublic #CodingJourney

🚀✨ What I learned today in JavaScript 💻 Today I practiced something small but powerful in JavaScript: controlling dropdown menus using "e.stopPropagation()". This helps stop events from bubbling up the DOM when you click inside an element 🔁 — very useful when building dropdowns, menus, and interactive UI components. Example 👇 const plusBtn = document.querySelector(".plus"); const plusMenu = document.querySelector(".plus-menu"); plusBtn.addEventListener("click", (e) => { e.stopPropagation(); plusMenu.classList.toggle("hidden"); }); document.addEventListener("click", () => { plusMenu.classList.add("hidden"); }); Simple concept, but very powerful when building clean UI ⚡ 📚 Learning a little every day and improving step by step. But I have one question… 🤔 Some people say they learned JavaScript in 2 months and mastered it. Please how? 😂😂 Someone should teach me that shortcut. #JavaScript #WebDevelopment #CodingJourney #FrontendDeveloper 🚀

🚀 Day 39/50 – Scope in JavaScript Today I learned about Scope in JavaScript, which defines where variables can be accessed in a program. 🔹 Scope determines the visibility and accessibility of variables. 📌 Types of Scope in JavaScript 1️⃣ Global Scope – Variables declared outside any function can be accessed anywhere. let name = "Priyanka"; function show() { console.log(name); } show(); 2️⃣ Function Scope – Variables declared inside a function are accessible only within that function. function test() { let msg = "Hello"; console.log(msg); } test(); 3️⃣ Block Scope – Variables declared with let and const inside {} are block-scoped. if(true){ let x = 10; console.log(x); } 4️⃣ Local Scope – Variables declared inside a block or function are local to that area. 💡 Key Learnings: ✅ var → function scoped ✅ let and const → block scoped ✅ Scope helps avoid variable conflicts ✅ Improves code security and readability Thanks for mentors 10000 Coders Raviteja T Abdul Rahman #Day39 #50DaysOfCode #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #LearningEveryday

🚀 Day 84 of My #100DaysOfCode Challenge Today I explored an interesting concept in JavaScript — Microtasks vs Macrotasks. JavaScript is single-threaded, but it can still handle asynchronous operations efficiently using the Event Loop. Behind the scenes, tasks are organized into different queues. 1️⃣ Macrotasks Macrotasks include operations like: - "setTimeout" - "setInterval" - DOM events - I/O operations These tasks go into the Macrotask Queue and are executed after the call stack is empty. 2️⃣ Microtasks Microtasks include: - "Promise.then()" - "Promise.catch()" - "MutationObserver" Microtasks have higher priority and run before macrotasks, even if they were scheduled later. Example console.log("Start"); setTimeout(() => { console.log("Macrotask"); }, 0); Promise.resolve().then(() => { console.log("Microtask"); }); console.log("End"); Output Start End Microtask Macrotask Even though "setTimeout" runs with "0ms", the Promise (Microtask) executes first because microtasks are processed before macrotasks. Understanding these small details helps developers debug asynchronous behavior and write more predictable code. Every day I’m discovering how deep and fascinating JavaScript really is. 💻✨ #Day84 #100DaysOfCode #JavaScript #EventLoop #WebDevelopment #LearningInPublic

Day 14 of my JavaScript journey 🚀 Built a Quiz Game using HTML, CSS, and JavaScript. Users can answer multiple-choice questions, get instant feedback, and track their score. This project helped me practice: • DOM manipulation • Event handling • Conditional logic • Dynamic score tracking 🔗 Live Demo: https://lnkd.in/gSjTeEFb 💻 GitHub Repo: https://lnkd.in/gAp_RjRK Building more interactive and logic-based projects day by day. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

Another Day of My JavaScript Mastering Learning Journey DEY WITH ME!!! Today I explored one of the most important concepts in JavaScript: Prototypes. In JavaScript, objects can share properties and methods through something called a prototype. Instead of every object having its own copy of a method, JavaScript stores shared methods on the prototype so multiple objects can reuse them. For example, if we create a constructor like Person, we can add methods to Person.prototype. Every object created from Person will automatically have access to those methods. This approach helps save memory and keep code more efficient, because the methods are shared rather than duplicated for every object. Example idea: Create a constructor (like Person) Add methods to Person.prototype Every instance can use those methods Understanding prototypes helped me see how JavaScript handles inheritance and object behavior under the hood. Small steps like this are helping me build a stronger foundation as I continue learning JavaScript and backend development. #JavaScript #WebDevelopment #CodingJourney #LearningInPublic

🚀 Day 7/100 of #100DaysOfCode Today was all about strengthening JavaScript fundamentals — revisiting concepts that seem simple but are often misunderstood. 🔁 map() vs forEach() Both are used to iterate over arrays, but they serve different purposes: 👉 map() Returns a new array Used when you want to transform data Does not modify the original array Example: const doubled = arr.map(num => num * 2); 👉 forEach() Does not return anything (undefined) Used for executing side effects (logging, updating values, etc.) Often modifies existing data or performs actions Example: arr.forEach(num => console.log(num)); ⚔️ Key Difference: Use map() when you need a new transformed array Use forEach() when you just want to loop and perform actions ⚖️ == vs === (Equality in JS) 👉 == (Loose Equality) Compares values after type conversion Can lead to unexpected results Example: '5' == 5 // true 😬 👉 === (Strict Equality) Compares value AND type No type coercion → safer and predictable Example: '5' === 5 // false ✅ 💡 Takeaway: Small concepts like these make a big difference in writing clean, bug-free code. Mastering the basics is what separates good developers from great ones. 🔥 Consistency > Intensity On to Day 8! #JavaScript #WebDevelopment #CodingJourney #LearnInPublic #Developers #100DaysOfCode #SheryiansCodingSchool #Sheryians