Implementing Debounce Function in JavaScript for Improved Performance

🚀 Day 6/100 – Move All Zeros to the End (JavaScript) Today I solved a common array problem asked in JavaScript interviews. 🧠 Problem: Given an array, move all zeros to the end while maintaining the order of non-zero elements. Example: Input: [0, 1, 0, 2, 3] Output: [1, 2, 3, 0, 0] ✅ Solution: function moveZeros(arr) { let index = 0; // Move all non-zero elements forward for (let i = 0; i < arr.length; i++) { if (arr[i] !== 0) { arr[index] = arr[i]; index++; } } // Fill remaining positions with 0 while (index < arr.length) { arr[index] = 0; index++; } return arr; } const arr = [0, 1, 0, 2, 3]; console.log(moveZeros(arr)); // Output: [1, 2, 3, 0, 0] 💡 Key Learnings: Two-pointer technique improves performance Time Complexity: O(n) Space Complexity: O(1) (In-place solution) Order of non-zero elements must be preserved Small problems like this strengthen logical thinking and array manipulation skills. I’m currently open to Frontend Developer opportunities (React / Next.js) and available for immediate joining. 📩 Email: bantykumar13365@gmail.com 📱 Mobile: 7417401815 If you're hiring or know someone who is, feel free to connect. #OpenToWork #FrontendDeveloper #JavaScript #ReactJS #ImmediateJoiner #100DaysOfCode

🚀 Day 4/100 – JavaScript Event Loop in Action Today I explored how the JavaScript Event Loop actually works. 🧠 Question: What will be the output of this code? console.log("A"); setTimeout(() => { console.log("B"); }, 0); Promise.resolve().then(() => { console.log("C"); }); console.log("D"); 🤔 Take a moment to think. ✅ Output: A D C B 💡 Explanation: 1️⃣ JavaScript runs synchronous code first → "A" → "D" 2️⃣ Then it processes Microtasks (Promises) → "C" 3️⃣ Then Macrotasks (setTimeout) → "B" 📌 Key Learning: - Promise callbacks go to the Microtask Queue - setTimeout goes to the Macrotask Queue - Microtasks always execute before Macrotasks - Even setTimeout(..., 0) does NOT run immediately Understanding the Event Loop is crucial for: - Debugging async issues - Writing optimized React apps - Handling API calls properly I’m currently open to Frontend Developer opportunities (React / Next.js) and available for immediate joining. 📩 Email: bantykumar13365@gmail.com 📱 Mobile: 7417401815 If you're hiring or know someone who is, feel free to connect. #OpenToWork #FrontendDeveloper #JavaScript #EventLoop #ReactJS #ImmediateJoiner #100DaysOfCode

🚀 Day 17/100 – Understanding Event Bubbling in JavaScript Today I explored another important DOM concept that every frontend developer should understand: Event Bubbling. 🧠 Question: What will happen when we click the button? document.getElementById("parent").addEventListener("click", () => { console.log("Parent clicked"); }); document.getElementById("child").addEventListener("click", () => { console.log("Child clicked"); }); HTML structure: <div id="parent"> <button id="child">Click Me</button> </div> ✅ Output when clicking the button: Child clicked Parent clicked 💡 Why? When an event occurs on an element, it first runs on the target element, and then it bubbles up through its ancestors in the DOM tree. So the order becomes: 1️⃣ Child element handler runs 2️⃣ Parent element handler runs 📌 How to Stop Event Bubbling? event.stopPropagation(); This prevents the event from moving up the DOM tree. 🧠 Why This Matters? Understanding event bubbling helps with: • Debugging DOM event issues • Implementing event delegation • Writing optimized event handling logic • Building complex UI interactions I’m currently open to Frontend Developer opportunities (React / Next.js) and available for immediate joining. 📩 Email: bantykumar13365@gmail.com 📱 Mobile: 7417401815 If you're hiring or know someone who is, I’d love to connect. #OpenToWork #FrontendDeveloper #JavaScript #ReactJS #NextJS #ImmediateJoiner #100DaysOfCode

𝐅𝐫𝐨𝐧𝐭𝐞𝐧𝐝 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫𝐬: 𝐒𝐭𝐨𝐩 𝐋𝐞𝐚𝐫𝐧𝐢𝐧𝐠 𝐑𝐚𝐧𝐝𝐨𝐦𝐥𝐲. 𝐒𝐭𝐚𝐫𝐭 𝐋𝐞𝐚𝐫𝐧𝐢𝐧𝐠 𝐒𝐭𝐫𝐚𝐭𝐞𝐠𝐢𝐜𝐚𝐥𝐥𝐲. I’ve created a complete Frontend Development Roadmap + Interview Checklist to help you: ✅ Master core fundamentals (HTML, CSS, JavaScript) ✅ Understand modern frameworks (React, Angular, Vue) ✅ Strengthen problem-solving & debugging skills ✅ Prepare confidently for frontend interviews ✅ Avoid tutorial-hopping & confusion This isn’t just a roadmap. It’s a structured action plan designed to take you from beginner → job-ready. If you're: Starting your frontend journey Switching to frontend Preparing for interviews Feeling stuck despite learning This guide will bring clarity and direction. 📄 Download the PDF. 📌 Follow Esha Tariq for practical tech insights. 🔁 Repost to help another developer grow. Let’s build scalable, beautiful, and performant web experiences together. #frontend #webdevelopment #javascript #react #angular #vuejs #frontenddeveloper #interviewprep #coding #techcareers #roadmap #career

🚀 Day 13/100 – Deep vs Shallow Copy in JavaScript Today I explored an important JavaScript concept that often causes unexpected bugs: Deep Copy vs Shallow Copy. 🧠 Problem: What happens when we copy objects in JavaScript? Example: const original = { name: "Bunty", address: { city: "Ghaziabad" } }; const shallowCopy = { ...original }; shallowCopy.address.city = "Delhi"; console.log(original.address.city); 🤔 What will be the output? 👉 Output: Delhi ❗ 💡 Why? Because spread operator (...) creates a shallow copy. Top-level properties are copied. Nested objects are still referenced. Both objects share the same nested memory reference. ✅ Deep Copy Solution: const deepCopy = structuredClone(original); // OR (older way) const deepCopy2 = JSON.parse(JSON.stringify(original)); Now modifying deepCopy will NOT affect original. 📌 Key Difference: Shallow Copy: Copies only first level Nested objects share reference Deep Copy: Creates completely independent copy No shared references 🧠 Why This Matters? Prevent unexpected state mutations Important in React state management Helps avoid subtle bugs in large applications Frequently asked in interviews Strong fundamentals prevent production bugs 🚀 I’m currently open to Frontend Developer opportunities (React / Next.js) and available for immediate joining. 📩 Email: bantykumar13365@gmail.com 📱 Mobile: 7417401815 If you're hiring or know someone who is, feel free to connect. #OpenToWork #FrontendDeveloper #JavaScript #ReactJS #NextJS #ImmediateJoiner #100DaysOfCode

Frontend Developer Reality: It’s Never “Almost Done” You start with confidence. HTML? “Almost done.” CSS? “Almost there.” Add Bootstrap? “Nice… this looks smooth.” Then someone says: 👉 Can we build it in React? Or Vue. Or Angular. And suddenly you’re climbing a whole new mountain. 🧱 The Truth About Frontend Frontend looks simple from the outside. But behind every clean UI, there’s: • Layout debugging at 2 AM • Cross-browser issues nobody warned you about • Responsive design headaches • State management confusion • Endless framework decisions And somehow… it’s still fun. 🚀 What This Really Means Learning HTML & CSS isn’t the finish line. It’s the foundation. Frameworks don’t replace fundamentals. They build on them. If you’re a student or early-stage developer, focus on: ✅ Strong HTML structure ✅ Deep CSS understanding (Flexbox, Grid) ✅ Solid JavaScript fundamentals ✅ THEN move to React / Vue / Angular Climb one mountain at a time. 💬 Frontend developers — be honest… Which part made you say “Oh No” the most? 😄 #WebDevelopment #FullStackDeveloper #FrontendDevelopment #BackendDevelopment #JavaScript #ReactJS #NodeJS #APIs #SoftwareEngineering #Programming #Developers #ReactJS #VueJS #ComputerScience

🚀 Day 11/100 – Understanding Prototypes in JavaScript Today I deep dived into one of the most fundamental concepts in JavaScript: Prototypes. 🧠 Problem: How does JavaScript enable inheritance between objects? ✅ Example: function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log(`Hello, my name is ${this.name}`); }; const user1 = new Person("Bunty"); user1.greet(); // Output: Hello, my name is Bunty 💡 What’s Happening Here? Every JavaScript function has a prototype property. Objects created using new inherit from that prototype. Methods defined on the prototype are shared across all instances. This improves memory efficiency. 📌 Why Not Define Method Inside Constructor? If we write: function Person(name) { this.name = name; this.greet = function () { console.log(`Hello, my name is ${this.name}`); }; } Now every instance gets its own copy of greet() ❌ Which increases memory usage. Prototype keeps it optimized ✅ 🧠 Key Learnings: JavaScript uses prototypal inheritance (not classical inheritance). The __proto__ links objects to their prototype. Method lookup happens through the prototype chain. Core JS concepts like Array, Object, Function are built using prototypes. Understanding prototypes makes closures, inheritance, and even React internals easier to grasp. I’m currently open to Frontend Developer opportunities (React / Next.js) and available for immediate joining. 📩 Email: bantykumar13365@gmail.com 📱 Mobile: 7417401815 If you're hiring or know someone who is, feel free to connect. #OpenToWork #FrontendDeveloper #JavaScript #Prototypes #ReactJS #ImmediateJoiner #100DaysOfCode

👋 Hi LinkedIn! I’m a Frontend Developer working with JavaScript, React, Angular and modern frontend technologies. Over the next few weeks, I’ll be sharing: • JavaScript concepts • Frontend interview questions • Performance optimization tips • Real-world frontend problems & solutions If you're preparing for frontend interviews or building scalable UI applications, please feel free to follow along. Let’s grow together 🚀 Comment down your favorite topics. #javascript #frontend #webdevelopment #js #UI #AI #angular #reactjs #webdevelopment #softwareengineering #programming

🚀 React vs Angular – What Do Modern Frontend Teams Prefer? In today’s frontend ecosystem, frameworks like React and Angular continue to power some of the most scalable and dynamic web applications. React focuses on flexibility and component-driven development using JavaScript / TypeScript, giving developers the freedom to structure applications the way they want. Angular, on the other hand, is a full-fledged framework that primarily uses TypeScript, offering built-in tools for routing, state management, and large-scale enterprise applications. Both technologies have their strengths: 🔹 React – lightweight, flexible, and widely used in modern startups and product companies. 🔹 Angular – structured, opinionated, and preferred for large enterprise-level applications. As developers, continuously learning and adapting to these technologies helps us build better, scalable products. I’ve been spending time strengthening my knowledge around modern frontend and full-stack technologies, and I’m excited about opportunities where I can contribute, learn, and grow with a strong engineering team. If your team is working with React, Angular, JavaScript, or TypeScript, I’d love to connect and explore potential opportunities. #OpenToWork #SoftwareDeveloper #FrontendDeveloper #ReactJS #Angular #JavaScript #TypeScript #WebDevelopment #FullStackDeveloper #TechCareers #DeveloperCommunity #Coding #Hiring #TechJobs #LinkedInTech

Currying in JavaScript — explained from first principles 🧠 Currying isn’t about fancy syntax. It’s about delayed execution using closures. Instead of calling a function with all arguments at once: add(a, b) Currying lets you do: add(a)(b) Why this matters in real projects: ✅ Build reusable, pre-configured functions ✅ Write cleaner event handlers in React ✅ Understand Redux middleware & functional composition ✅ Think in terms of configuration now, execution later I’ve been revisiting core JavaScript fundamentals (closures, currying, lexical scope) and breaking them down from beginner → senior level, while also mentoring and guiding others who struggle with these concepts. If you’re hiring for a Frontend Developer who: understands JavaScript deeply writes intentional, maintainable code actively learns and teaches Let’s connect. 🚀 #JavaScript #FrontendDevelopment #ReactJS #WebDevelopment #Currying #Closures #ContinuousLearning #Hiring #OpenToWork