Aryan Kadu’s Post

Today I learned about one of the most important concepts in JavaScript: The Event Loop. JavaScript is single-threaded, which means it can run only one task at a time. But it can still handle asynchronous operations like timers, API calls, and user events. This is possible because of the Event Loop. 💡 How it works: 1️⃣ Call Stack – Executes JavaScript code 2️⃣ Web APIs – Handles async tasks like setTimeout, fetch, DOM events 3️⃣ Callback Queue – Stores completed async callbacks 4️⃣ Event Loop – Moves tasks from the queue to the stack when it’s empty Example: console.log("Start"); setTimeout(() => { console.log("Timer"); }, 2000); console.log("End"); Output: Start End Timer The timer runs later because it goes through the Event Loop system. Understanding the event loop helps in writing better async JavaScript and debugging complex behavior. Day 5 of my 21 Days JavaScript Concept Challenge 🚀 #JavaScript #WebDevelopment #FrontendDeveloper #AsyncJavaScript #LearningInPublic

⏳ “JavaScript is single-threaded.” I used to hear this everywhere. But then I had one question: If JavaScript is single-threaded… How does async code work? That’s when I learned about the Event Loop. Here’s the simple idea 👇 🧠 JavaScript has: • Call Stack • Web APIs • Callback Queue • Event Loop When async code runs (like setTimeout or fetch): 1️⃣ It moves to Web APIs 2️⃣ Once completed, it goes to the Callback Queue 3️⃣ The Event Loop checks if the call stack is empty 4️⃣ Then pushes it back to execute That’s why: console.log(1) setTimeout(() => console.log(2), 0) console.log(3) Output is: 1 3 2 Understanding this made debugging async bugs much easier. Frameworks don’t hide this. They rely on it. #JavaScript #EventLoop #WebDevelopment #FrontendDeveloper #NodeJS #SheryiansCodingSchool

JavaScript Practice – Reverse a String Today I practiced a simple JavaScript program to reverse a string. Question: Write a function to reverse a string. Code: function reverseString(str){ return str.split("").reverse().join(""); } console.log(reverseString("mary")); Output: yram Explanation: • split("") – Converts the string into an array • reverse() – Reverses the array elements • join("") – Converts the array back into a string I am currently learning Frontend Development and practicing JavaScript programs daily. #javascript #frontenddeveloper #codingpractice #webdevelopment #learning

Most JavaScript developers use async features every day — setTimeout, fetch, Promises — but the behavior can still feel confusing until the Event Loop becomes clear. JavaScript runs on a single thread using a Call Stack. When asynchronous operations occur, they are handled by the runtime (browser or Node.js), and their callbacks are placed into a queue. The Event Loop continuously checks: 1️⃣ Is the Call Stack empty? 2️⃣ Is there a callback waiting in the queue? If the stack is empty, the next callback moves into the stack and executes. Example: setTimeout(() => console.log("A"), 0); console.log("B"); Output: B A Even with 0ms, the setTimeout callback runs after the current call stack clears. Understanding this small detail explains a lot of “unexpected” async behavior in JavaScript. Curious to hear from other developers here — What concept made the event loop finally “click” for you? #javascript #webdevelopment #nodejs #eventloop #asyncjavascript #reactjs #softwareengineering

JavaScript Event Loop – Quick Example Understanding the Event Loop is important for writing efficient asynchronous JavaScript. Example: console.log("Start") const prom = new Promise((res) => res(true)) setTimeout(() => console.log("setTimeout"), 0) process.nextTick(() => console.log("nextTick")) queueMicrotask(() => console.log("microtask")) console.log(prom) Output order will be: Start Promise { true } nextTick microtask setTimeout Why? Because JavaScript processes tasks in this order: 1. Synchronous code 2. Microtasks (nextTick, Promises, queueMicrotask) 3. Macrotasks (setTimeout, setImmediate) Understanding this helps when debugging async issues in frontend apps. #javascript #webdevelopment #frontend #vuejs #eventloop

🚀 Understanding the JavaScript Event Loop (In Simple Terms) Many developers use JavaScript daily, but truly understanding the Event Loop changes how you write asynchronous code. 🔹 JavaScript is single-threaded 🔹 It uses a Call Stack to execute functions 🔹 Asynchronous tasks (setTimeout, Promises, API calls) go to Web APIs 🔹 Callbacks move to the Callback Queue 🔹 Promises go to the Microtask Queue 🔹 The Event Loop constantly checks: “Is the Call Stack empty? If yes, execute tasks from the queue.” 💡 Important Concept: Microtasks (Promises) are executed before Macrotasks (setTimeout). Example: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Output: Start End Promise Timeout Because: Microtask queue > Macrotask queue Understanding this helps avoid: Unexpected execution order Performance issues Callback confusion As a Full Stack Developer, mastering fundamentals like Event Loop improves debugging and architecture decisions. #JavaScript #EventLoop #WebDevelopment #Frontend #NodeJS #FullStackDeveloper

Day 2/100 – Understanding Closures in JavaScript Today I explored Closures — one of the most important concepts in JavaScript that directly impacts how modern frameworks like React work internally. ✅ What is a Closure? A closure is created when a function retains access to variables from its lexical scope, even after the outer function has finished execution. In simple terms: A function remembers the environment in which it was created. ✅ Why is it important in real-world applications? Closures are widely used in: • React hooks • Event handlers • Data encapsulation • Memoization • Maintaining private variables • Custom hook patterns A solid understanding of closures makes debugging and optimizing React applications much easier. 💻 Example: function createCounter() { let count = 0; return function () { count++; console.log(count); }; } const counter = createCounter(); counter(); // 1 counter(); // 2 Even after createCounter() has executed, the inner function still has access to “count”. That’s the power of closures. 📌 Key Takeaway: Closures are not just an interview topic — they are fundamental to writing predictable and maintainable JavaScript in production applications. #100DaysOfCode #JavaScript #ReactJS #FrontendDevelopment

🚀 Day 20 – Promises in JavaScript Today I learned how JavaScript handles asynchronous operations using Promises. 💡 What is a Promise? A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation. It has 3 states: 🔹 Pending 🔹 Fulfilled 🔹 Rejected 🧠 Why Promises Are Important Before Promises, we used nested callbacks (callback hell 😵). Promises make async code: Cleaner More readable Easier to debug Chainable 🔥 Key Things I Learned ✔ .then() handles success ✔ .catch() handles errors ✔ .finally() runs no matter what ✔ Promises execute before setTimeout in the event loop (microtasks vs macrotasks) 🎯 Real-World Usage Promises are used in: API calls (fetch) Database requests Timers Authentication systems React applications Understanding Promises helped me connect everything about: Event Loop + Async behavior + Microtask Queue. 💪 My Takeaway Async JavaScript is not magic — It’s structured and predictable once you understand how it works. One step closer to becoming a strong frontend developer 🚀 #JavaScript #FrontendDeveloper #Promises #WebDevelopment #LearningInPublic #100DaysOfCode

💀 Someone Said: “Go to Hell.” JavaScript Developer Took It Personally 😏 👨🦱 Random Guy: Go to hell. 👨💻 JS Developer: Callback Hell? 👨🦱: Haan wahi 😑 👨💻: Relax bro… I don't live in Callback Hell anymore. I upgraded my life to Promises 🚀 👨🦱: Oh really? Prove it. 👨💻: Fine. Let’s test your Async knowledge first 👇 🧠 Question for Real Developers </> JavaScript console.log("1"); setTimeout(() => console.log("2"), 0); Promise.resolve().then(() => { console.log("3"); setTimeout(() => console.log("4"), 0); }); Promise.resolve().then(() => console.log("5")); console.log("6"); 💬 Before You Scroll… -> Think carefully 👀 ->Call Stack clears first ->Promises go to Microtask Queue ->setTimeout goes to Macrotask Queue ->Microtasks execute before Macrotasks Now tell me… What will be the correct output order? 🤯 A) 1 2 3 4 5 6 B) 1 6 3 5 2 4 C) 1 6 2 3 5 4 D) JavaScript needs therapy Most beginners say: 👉 “setTimeout 0 means instant execution” But JavaScript be like: “Not today.” 😌 ⚡ If you understand this, You understand: ✔ Event Loop ✔ Microtask vs Macrotask ✔ Async behavior ✔ Why Promises feel faster than setTimeout 👨💻 Moral of the story: Life lesson from JavaScript — Don’t go to Callback Hell. Use Promises. Upgrade yourself. Drop your answer in comments 👇 Let’s see who actually understands Async JS 😈 Shoutout to Rohit Negi Sir 👨🏫🔥 Because of his deep explanation of Event Loop, now even “Callback Hell” feels easy to escape 😎 #JavaScript #FrontendDeveloper #AsyncProgramming #CodingHumor #WebDevelopment #DevelopersLife #TechHumor #Coderarmy