Understanding JavaScript Event Capturing & Bubbling

Most developers don’t know this about JavaScript closures 🤯 Closures are not magic. They simply remember the variables even after the function is executed. That’s why: • setTimeout • Event listeners • Callbacks work so smoothly. If closures confuse you → practice small examples, not big codebases. Question: What topic confused you the most in JavaScript? 👇 #JavaScript #WebDevelopment #Frontend #CodingLife

I recently stumbled upon a neat JavaScript method: Array.with(). It creates a new array with one item replaced. Shorter to write, but more importantly - easier to understand. Its design clearly communicates what will happen, not how it’s implemented. That’s a big difference compared to manual array copying with the spread operator. Nice. Simple. Useful. I came across it while Cursor was suggesting a cleaner way to write a reducer. ---- Link to a short blog post is in the comments, if you’d like to bookmark it. #javascript #TIL #frontend #backend #svelte #react #node

🚨 Why JavaScript Developers Have Trust Issues with setTimeout() 🚨 Ever seen this code and thought, “Why is my setTimeout lying to me?” 😤 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ console.log("Start"); setTimeout(() => { console.log("Callback"); }, 5000); console.log("End"); // Blocking the main thread let startDate = new Date().getTime(); let endDate = startDate; while (endDate < startDate + 10000) { endDate = new Date().getTime(); } console.log("While expires"); ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Expected 🤔 ⏱ Callback after 5 seconds Reality 😬 ➡️ Callback runs after 10+ seconds Why this happens 👇 setTimeout() does NOT execute code exactly after the given time. It only registers a callback and asks the Event Loop to run it when the call stack is free. But here’s the catch 👇 🧠 JavaScript is single-threaded ⛔ The while loop blocks the call stack 🕒 The callback waits patiently… but can’t run Key takeaway 💡 setTimeout guarantees minimum delay, not exact timing. If your main thread is busy, timers will be delayed. Moral of the story 🧠 ✔ Avoid blocking code ✔ Understand the Event Loop ✔ Don’t blindly trust timers JavaScript doesn’t break promises… we just misunderstand how it works. 😄 #JavaScript #EventLoop #WebDevelopment #setTimeout #AsyncJS #Frontend #CodingLife #Developers

🔁 Closures in JavaScript A closure is when a function remembers variables from its parent function, even after the parent function has finished executing. function outer() {  let count = 0;  return function inner() {   count++;   console.log(count);  } } const counter = outer(); counter(); // 1 counter(); // 2 👉 inner() still remembers count 👉 That memory is called a closure If closures ever confused you, save this post 👍 #JavaScript #WebDevelopment #Frontend #CodingSimplified #LearnJS #BhaviDigital

JavaScript Debouncing vs Throttling — Explained Simply 🚀 Ever wondered why your search input fires API calls too often? Or why scroll events hurt performance? 👉 The answer is Debounce & Throttle. 🔹 Debounce → waits until the user stops the action 🔹 Throttle → runs at fixed intervals, no matter how often the event fires Used commonly in: Search inputs 🔍 Scroll & resize events 📜 Button clicks ⚡ Swipe through to understand: ✔ How they work ✔ When to use which ✔ Common mistakes developers make 💬 What’s your real-world use case for debounce or throttle? Let’s discuss 👇 #javascript #frontend #reactjs #webdevelopment #performance #developers

Reposting this 🔁 — Debouncing vs Throttling explained really well 🚀 These two concepts look simple, but they play a huge role in frontend performance. 🔹 Debouncing → waits until the user stops the action (perfect for search inputs) 🔹 Throttling → executes at fixed intervals (great for scroll & resize events) Understanding when and why to use each one can: Reduce unnecessary API calls Improve app performance Create smoother user experiences If you’re working with JavaScript / React, this is a must-know concept. Highly recommend going through this post 👍 Credits: Naganathan A 🙌 #JavaScript #WebDevelopment #Frontend #ReactJS #PerformanceOptimization #Learning #Developers

😄 JavaScript be like… “I deleted it, but it’s still there?” Used delete on an array element and expected magic ✨ Instead, JavaScript said: “Here, take an empty slot.” 🕳️ 👉 delete removes the value, not the index 👉 The array length stays the same 👉 Surprise bugs unlocked 😅 💡 Pro tip: If you actually want to remove an element and reindex the array — use splice() 🧹 Small quirks like this are what make JavaScript fun (and sometimes scary 😄). #JavaScript #CodingHumor #WebDevelopment #Frontend #DevLife #LearnJS

🚀 JavaScript Hoisting: What Really Happens Behind the Scenes? Hoisting is one of those JavaScript concepts that looks confusing… until you understand how the JavaScript engine reads your code. 🧠 Hoisting = memory allocation before execution, not moving code upward. 📌 What’s Really Happening? ✔️ var is hoisted and initialized with undefined ✔️ let and const are hoisted but stay in the Temporal Dead Zone (TDZ) ✔️ Accessing let / const before initialization throws ReferenceError ✔️ Function scope creates a new execution context with its own hoisting phase 💡 Rule to Remember: “If JavaScript knows the variable exists but hasn’t initialized it yet → TDZ.” #JavaScript #Hoisting #Frontend #WebDevelopment #JSInternals #InterviewPrep #ReactJS #MERN

Can you guess the output? 🤔 (JavaScript — no cheating) Take a second and think… 👇 👇 Output: A D C B Why does this happen? Because of the Event Loop. JavaScript first runs all synchronous code. Once the call stack is empty, the Event Loop: - executes all microtasks (Promises) - then moves to the macrotask queue (timers) That’s why Promise callbacks run before setTimeout, even with 0ms. Once the Event Loop clicks, async JavaScript finally starts making sense. Did you guess it right? 😄 #javascript #js #eventloop #async #frontend

🚀 𝐓𝐨𝐝𝐚𝐲 𝐈 𝐋𝐞𝐚𝐫𝐧𝐞𝐝 𝐀𝐛𝐨𝐮𝐭 𝐦𝐚𝐩(), 𝐟𝐢𝐥𝐭𝐞𝐫() & 𝐫𝐞𝐝𝐮𝐜𝐞() 𝐢𝐧 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 These are powerful array methods that help us write clean, readable, and functional code without using traditional loops. 🔹 𝐦𝐚𝐩() – 𝐓𝐫𝐚𝐧𝐬𝐟𝐨𝐫𝐦 𝐞𝐚𝐜𝐡 𝐞𝐥𝐞𝐦𝐞𝐧𝐭 👉 Used when you want to modify every element in an array and return a new array. Key points: Returns a new array Length remains the same Does not modify the original array 🔹 𝐟𝐢𝐥𝐭𝐞𝐫() – 𝐒𝐞𝐥𝐞𝐜𝐭 𝐬𝐩𝐞𝐜𝐢𝐟𝐢𝐜 𝐞𝐥𝐞𝐦𝐞𝐧𝐭𝐬 👉 Used when you want to pick elements based on a condition. Key points: Returns a new array Length may be smaller Only elements that satisfy the condition are included 🔹 𝐫𝐞𝐝𝐮𝐜𝐞() – 𝐂𝐨𝐦𝐛𝐢𝐧𝐞 𝐢𝐧𝐭𝐨 𝐚 𝐬𝐢𝐧𝐠𝐥𝐞 𝐯𝐚𝐥𝐮𝐞 👉 Used when you want to reduce an array to a single output like sum, total, object, etc. Key points: Returns a single value Uses an accumulator Very powerful but needs practice #JavaScript #WebDevelopment #Frontend #ReactJS #LearnInPublic #CodingJourney #100DaysOfCode #10000coders #10kcoders