JavaScript Event Loop: A Comprehensive Guide

☕ Revisiting JavaScript Event Flow — Capturing, Target & Bubbling Phases Today, I was revising one of the most important concepts in JavaScript — Events and Event Listeners. 💡 It’s fascinating how a single click can travel through multiple layers of the DOM before reaching its destination! Here’s what I learned and revised 👇 🔹 Event & Event Listener JavaScript allows us to respond to user interactions like clicks, key presses, and mouse movements. For example 👇 element.addEventListener("click", () => { console.log("Element clicked!"); }); This method lets us attach multiple handlers to the same element without overwriting existing ones. 🔹 Click Event The click event is one of the most commonly used — and it’s the one I focused on today while understanding how event flow actually works. 🔹 Event Flow in JavaScript Every event in the DOM passes through three phases: 1️⃣ Capturing Phase – The event travels from the top (document) down to the target element. 2️⃣ Target Phase – The exact element that triggered the event receives it. 3️⃣ Bubbling Phase – The event then bubbles back up toward the document. 📘 Example // Capturing phase parent.addEventListener("click", () => { console.log("Parent clicked - Capturing Phase"); }, true); // true → capturing // Bubbling phase (default) child.addEventListener("click", () => { console.log("Child clicked - Bubbling Phase"); }); 👉 When you pass true as the third argument in addEventListener, it listens during the capturing phase. 👉 By default, it’s false, meaning the listener works in the bubbling phase. 🧠 Visual Flow 📤 Document → HTML → Body → Parent → Child → (then bubbles back up 🔁) Understanding this complete flow helped me clearly visualize how events travel and how to control them precisely using capturing and bubbling. 🚀 A huge thanks to CoderArmy, Rohit Negi, and Aditya Tandon Sir 🙏 Your clear explanations and practical examples made this topic so easy to grasp. #JavaScript #EventListener #EventFlow #FrontendDevelopment #WebDevelopment #LearningJourney #Coding #Developer #RohitNegi #AdityaTandon #CoderArmy

⏰ Mastering JavaScript Timing Functions: setTimeout & setInterval! ⚡ Just explored JavaScript's powerful timing functions - setTimeout and setInterval! Understanding these asynchronous concepts is crucial for creating dynamic web experiences. 🧠 Concepts Practiced: ✅ setTimeout for delayed execution ✅ setInterval for repeated execution ✅ clearInterval to stop intervals ✅ Asynchronous JavaScript flow ✅ Callback functions with timers Code : https://lnkd.in/dyM_RkQn 🎯 Key Learnings: setTimeout executes code after specified delay setInterval repeatedly executes code at intervals clearInterval stops the ongoing interval JavaScript continues executing other code without waiting Essential for animations, notifications, and timed operations These timing functions open up endless possibilities for interactive web applications! 🚀 #JavaScript #setTimeout #setInterval #AsynchronousProgramming #WebDevelopment #Coding #TimingFunctions #LearnJavaScript #TechSkills #Programming

💥 A Subtle Runtime Behavior Every JavaScript Developer Should Know This is a behavior of the JavaScript runtime, and I’m going to explain how it works using an example. Let’s see why JavaScript’s single threaded nature can cause unexpected timing delays. When we call something like, setTimeout(() => console.log("Timeout done!"), 100); 👉 here’s what actually happens under the hood, 1. The core engine (like V8 in Chrome) executes our JavaScript code line by line in the Call Stack. 2. Once the thread reaches it, function immediately gets moved to the Web API, and the timer starts counting (100 ms). Meanwhile, the main thread continues executing the rest of your code line by line (synchronously). 3. When the 100ms timer finishes, the callback is moved to the Callback Queue (Task Queue). 👉 Here’s the important part: That callback does NOT go into the Microtask Queue because it’s a macro task. The Microtask Queue is reserved for things like Promises and queueMicrotask(), which have higher priority. 👉 Here’s where it gets interesting: Even though your timer meets 100ms, the callback cannot run immediately. The Event Loop will only pick tasks from the Callback Queue when two conditions are satisfied, ** One is the Call Stack is empty ** Second one is Microtask Queue is empty Which mean our code still has functions running in the Call stack or multiple pending Promises in the Microtask Queue, your setTimeout callback must wait, even if the timer already expired. 💥 This is the limitation of single-threaded JavaScript. Even though the timer is ready, JavaScript cannot interrupt other running code or microtasks. So our console log that was supposed to run after 100ms might execute after 200ms, 300ms, or even later, depending on how busy the thread is. 👉 Key takeaway: ** setTimeout guarantees a minimum delay, not an exact execution time. ** The Event Loop gives priority to the Microtask Queue first, then the Callback Queue. ** This is not a bug. it’s just how the JavaScript run time behaves. #JavaScript #WebDevelopment #Frontend #EventLoop #AsyncJS #ProgrammingInsights #SingleThreaded #CodingTips #JavaScriptRuntime

🚀 #Day 3 Understanding JavaScript Event Loop & React useEffect Timing Today, I took a deep dive into one of the most powerful — yet often confusing — topics in JavaScript: the Event Loop 🔁 At first, it looked complex. But once I started writing small examples and observing outputs step-by-step, everything became crystal clear 💡 🔍 What I learned: 🧠 The Event Loop JavaScript is a single-threaded language — meaning it can execute only one task at a time. But thanks to the Event Loop, it can still handle asynchronous operations (like setTimeout, fetch, or Promise) efficiently without blocking the main thread. Here’s how it works 👇 1️⃣ Call Stack — Executes synchronous code line by line. 2️⃣ Web APIs — Handles async tasks (like timers, fetch). 3️⃣ Microtask Queue — Holds resolved Promises and async callbacks. 4️⃣ Callback Queue — Stores setTimeout, setInterval callbacks. The Event Loop continuously checks: “Is the call stack empty? If yes, then push the next task from the microtask queue — and then from the callback queue.” That’s how JavaScript manages async code without breaking the flow ⚡ ⚛️ In React: useEffect() runs after the component renders, and async tasks inside it still follow the Event Loop rules. That’s why: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Output: Start → End → Promise → Timeout ✅ 💬 Takeaway: Once you understand the Event Loop, async code and React effects start making perfect sense! #JavaScript #ReactJS #FrontendDevelopment #EventLoop #AsyncProgramming #WebDevelopment #ReactHooks #LearningInPublic #DevelopersJourney #CodeBetter

🚀 My “Aha!” JavaScript Moment: Why does var print 3 three times? A few days ago, I was revisiting some JavaScript fundamentals… and I came across this classic piece of code 👇 for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1000); } I expected: 0 1 2 But guess what I got? 3 3 3 😅 I paused for a second and thought — “Wait… what just happened?” 🧠 The Moment of Clarity Here’s what’s really going on: var in JavaScript is function-scoped, not block-scoped. So inside that for loop, all iterations share one single i variable. By the time the setTimeout callbacks actually run (after 1 second), the loop has already finished — and i has become 3. So all three callbacks look at the same i, and print 3. Boom 💥 — mystery solved. ✅ The Fix? Use let When we switch to let, something magical happens: for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1000); } Now, let is block-scoped, meaning each iteration gets its own copy of i. Each callback “remembers” the value from that iteration. Result: 0 1 2 💡 My Mental Model I now think of it like this: Using var: one whiteboard where you keep erasing and writing new numbers. Everyone who looks later sees the same final number. Using let: each student gets their own notepad — they all remember their own number. 🧩 Key Takeaway Keyword Scope Loop Behavior Output var Function-scoped Shared variable 3, 3, 3 let Block-scoped New variable each iteration 0, 1, 2 We often jump into frameworks, async/await, and APIs… but sometimes it’s these small, fundamental details that sharpen our understanding the most. 🔍 Have you ever had an “aha!” moment like this in JavaScript (or another language)? Share it below — I’d love to hear your story 👇 #JavaScript #WebDevelopment #AsyncJS #Frontend #FullStackDeveloper #LearningToCode #CodingJourney #Developers #CareerGrowth

💣 Countdown Timer Fun with JavaScript! Just experimented with a small but exciting project — a “Time Bomb” countdown timer! 🕒 This mini project uses HTML, CSS, and JavaScript to create a dynamic visual effect that updates every second. ✨ Key Highlights: 🔹 Used setInterval() for real-time countdown updates 🔹 Dynamically changed text and image with DOM manipulation 🔹 Added creative CSS animations and glowing effects for a dramatic look 🔹 Implemented condition checks to change color and image as the timer nears zero It’s a simple yet fun way to strengthen JavaScript fundamentals like timing functions, conditionals, and DOM updates. 🚀 Every small project like this helps in improving problem-solving and UI creativity! #JavaScript #WebDevelopment #CodingJourney #Frontend #LearningByDoing 10000 CodersManoj Kumar Reddy Parlapalli Usha Sri

Class vs. Function: What's the Difference in JS? There are two main ways to create objects, add methods, and organize processes like inheritance in JavaScript code — the “constructor function” (“classic function”) and the object style created with the class keyword. While they have some similarities, they also have important differences. Let's get to know the most important ones. 1. How to write it Function (constructor style) is a modern, updatable style that was widely used in the ES5 era. Class (ES6 style) is syntactically cleaner and more modern. 2. Hoisting and “strict mode” tags Function declarations are hoisted — that is, you can declare the function getUser() even before calling it in your code. Class declarations are not hoisted — they must be declared before calling it. Also, code inside a class actually always runs in “strict mode” — you don’t need to write a separate “use strict”. 3. Inheritance Inheritance using a constructor function is more difficult: you need to call Function.call(this, …), Object.create(), manually configure the prototype, etc. Inheritance using the class style is very simple: class Child extends Parent { … }, and you can call super() inside it. 4. Syntactic aspects and additional features Inside a class, you can use features such as static methods, constructors, and private fields (since ES2022). Inside a function constructor, these features must be implemented manually (for example, using a closure or Symbol for private fields). 5. When to choose which style? If you are working with legacy code or have a lot of manual configuration with “prototypes”, the constructor function style can be useful. If you want modern coding, simpler syntax, and easy inheritance, class is the way to go. It has also been noted that class is often preferred for readability when writing code with a team. #Frontend #JavaScript #ReactJS #VueJS #WebDeveloper

💣🤯Countdown Timer Fun with JavaScript! Just experimented with a small but exciting project - a "Time Bomb" countdown timer! This mini project uses HTML, CSS, and JavaScript to create a dynamic visual effect that updates every second. Key Highlights: Used setInterval() for real-time countdown updates • Dynamically changed text and image with DOM manipulation Added creative CSS animations and glowing effects for a dramatic look ➡️Implemented condition checks to change color and image as the timer nears zero ➡️It's a simple yet fun way to strengthen JavaScript fundamentals like timing functions, conditionals, and DOM updates. ➡️Every small project like this helps in improving problem-solving and UI creativity! #JavaScript #WebDevelopment #CodingJourney #Frontend #LearningByDoing 10000 CodersManoj Kumar Reddy Parlapalli Usha Sri

💬 Comment for Video or LinkedIn Post ✨ Project: Light & Dark Mode Toggle using JavaScript This mini project shows how to switch between light and dark themes using simple HTML, CSS, and JavaScript. With just one button click, the entire background and text colors change dynamically — giving a smooth user experience. 🌗 #JavaScript #WebDevelopment #Frontend #CodingPractice #LightDarkMode 10000 Coders Manoj Kumar Reddy Parlapalli Usha Sri

🔥 Callback Hell one of the first nightmares every JavaScript developer faces In JavaScript, callbacks are functions passed as arguments to handle asynchronous tasks. They work fine... until you start nesting them 👇 getUser(id, (user) => { getPosts(user.id, (posts) => { getComments(posts[0].id, (comments) => { console.log(comments); }); }); }); Looks familiar? 😅 That’s Callback Hell — deeply nested callbacks that make code hard to read, debug, and maintain. 💡 How to fix it: Use Promises or async/await for cleaner and more readable async code. const user = await getUser(id); const posts = await getPosts(user.id); const comments = await getComments(posts[0].id); Same logic — but much more elegant ✨ Callback Hell teaches one of the best lessons in JavaScript: Write async code that reads like sync code. Have you ever refactored a callback mess into async/await? #JavaScript #WebDevelopment #Frontend #React #ReactJS