DOM Manipulation & Events in JavaScript

One of the most common JavaScript interview questions: "Why does setTimeout with 0ms delay not run immediately?" Most developers cannot answer this correctly. Here is the full explanation: JavaScript is single-threaded. It can only do one thing at a time. The Event Loop is how it manages everything else. The execution order is always the same: 1 — Synchronous code runs first All regular code on the Call Stack executes immediately. 2 — Microtasks run second Promises, async/await — these run before anything else once the Call Stack is empty. 3 — Macrotasks run last setTimeout, setInterval, DOM events — these wait until ALL microtasks are done. This is why setTimeout with 0ms still runs after a Promise. The Promise is a microtask. setTimeout is a macrotask. Microtasks always win. Understanding this prevents real bugs in production — async state updates, race conditions, unexpected render order. Save this post for your next async debugging session. Have you ever been confused by JavaScript async order? Drop a comment below. #JavaScript #WebDevelopment #Frontend #SoftwareEngineering #AsyncJavaScript

🚨 𝗠𝗼𝘀𝘁 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗴𝗲𝘁 𝘁𝗵𝗶𝘀 𝘄𝗿𝗼𝗻𝗴 👇 JavaScript variables look simple… Until they silently break your logic 😵 🧠 𝗧𝗿𝘆 𝘁𝗵𝗶𝘀: 𝑐𝑜𝑛𝑠𝑜𝑙𝑒.𝑙𝑜𝑔(𝑎); 𝑣𝑎𝑟 𝑎 = 10; 𝑐𝑜𝑛𝑠𝑜𝑙𝑒.𝑙𝑜𝑔(𝑏); 𝑙𝑒𝑡 𝑏 = 20; 𝗪𝗵𝗮𝘁 𝘄𝗶𝗹𝗹 𝗯𝗲 𝘁𝗵𝗲 𝗼𝘂𝘁𝗽𝘂𝘁? Take a guess before scrolling… 👇 . . . . . . ✅ 𝗔𝗻𝘀𝘄𝗲𝗿: undefined ReferenceError: Cannot access 'b' before initialization 💡 𝗦𝗶𝗺𝗽𝗹𝗲 𝗘𝘅𝗽𝗹𝗮𝗻𝗮𝘁𝗶𝗼𝗻 JavaScript behaves differently for var and let: 👉 var is hoisted and initialized with undefined 👉 let is also hoisted, BUT it stays in a “𝗧𝗲𝗺𝗽𝗼𝗿𝗮𝗹 𝗗𝗲𝗮𝗱 𝗭𝗼𝗻𝗲” until the line where it’s defined So: • a exists → prints undefined • b exists but is 𝗻𝗼𝘁 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗹𝗲 𝘆𝗲𝘁 → throws error 🎯 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆𝘀 • var → function scoped + can lead to unexpected bugs • let → block scoped + safer to use • Always prefer let & const in modern JavaScript 🔥 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗴𝗲𝘁 𝗶𝘁 𝗿𝗶𝗴𝗵𝘁? Be honest 😄 💬 Comment your answer before you saw the solution 🔖 Save this for interview prep 💡 Part of my #FrontendRevisionMarathon — breaking down Frontend concepts daily 🚀 🚀 Follow Shubham Kumar Raj for more such content. #javascript #frontenddeveloper #codinginterview #webdevelopment #learnjavascript #100daysofcode #programming #interviewprep #CareerGrowth #SowftwareEngineering

𝐈𝐟 𝐘𝐨𝐮 𝐊𝐧𝐨𝐰 𝐓𝐡𝐞𝐬𝐞 𝐑𝐮𝐥𝐞𝐬, 𝐘𝐨𝐮’𝐥𝐥 𝐍𝐞𝐯𝐞𝐫 𝐁𝐫𝐞𝐚𝐤 𝐂𝐨𝐝𝐞 𝐰𝐢𝐭𝐡 “𝐭𝐡𝐢𝐬” 𝐢𝐧 𝐣𝐚𝐯𝐚𝐬𝐜𝐫𝐢𝐩𝐭! 1. Global Context Outside any function, this refers to the global object window in browsers, global in js. 2. Regular Function (non-strict mode) this refers to the global object (window), even though you're inside a function. 3. Regular Function (strict mode) this is undefined. JavaScript stops the accidental global binding. 4. Object Method When a function is called as a property of an object, this refers to that object. 5. Arrow Function Doesn't have its own this. It inherits this from the surrounding lexical scope wherever the arrow function was written, not called. 6. Constructor Function / new keyword this refers to the newly created object being built. 7. Class Method Same as object method this refers to the instance of the class. 8. call(), apply(), bind() You manually set what this should be. These are the escape hatches. 9. Event Listeners (DOM) this refers to the HTML element that triggered the event but only with regular functions, not arrow functions. 10. Callback Functions this is often lost here. Passing a method as a callback detaches it from its original object. For more insightful content checkout below: 🟦 𝑳𝒊𝒏𝒌𝒆𝒅𝑰𝒏 - https://lnkd.in/dwi3tV83 ⬛ 𝑮𝒊𝒕𝑯𝒖𝒃 - https://lnkd.in/dkW958Tj 🟥 𝒀𝒐𝒖𝑻𝒖𝒃𝒆 - https://lnkd.in/dDig2j75 or Priya Frontend Vlogz 🔷 𝐓𝐰𝐢𝐭𝐭𝐞𝐫 - https://lnkd.in/dyfEuJNt   #frontend #javascript #react #interview #interviewpreparation #SDE w3schools.com JavaScript Mastery JavaScript Developer freeCodeCamp

🚀 JavaScript Event Loop Explained (Must-Know Concept) Understanding the Event Loop is a game changer when it comes to writing efficient and predictable asynchronous JavaScript code. We use setTimeout, Promises, and async/await every day — but do we really know what’s happening behind the scenes? 🤔 Let’s break it down 👇 🔹 How the Event Loop Works: • JavaScript runs on a single thread • Synchronous code executes first (Call Stack) • Then Microtasks run (e.g., Promises, queueMicrotask) • Next, one Macrotask executes (e.g., setTimeout, events) • This cycle keeps repeating continuously ⚡ Execution Priority: 1️⃣ Synchronous Code 2️⃣ Microtasks 3️⃣ Macrotasks 💡 Why this matters: ✅ Helps debug async issues easily ✅ Avoids unexpected execution order ✅ Builds more predictable React apps ✅ Frequently asked in frontend interviews 📌 Pro Tip: Always remember — Promises (microtasks) run before setTimeout (macrotasks), even with 0ms delay! 💬 Are you confident with the Event Loop? Drop your thoughts below! #JavaScript #EventLoop #FrontendDevelopment #ReactJS #WebDevelopment #AsyncJavaScript #InterviewPrep #SoftwareEngineering

15 JavaScript interview questions. Promises & Async/Await. Answer karo comments mein 👇 Promises Q1. What is a Promise in JavaScript and why does it exist? Q2. What is the difference between resolve and reject? Q3. What does .then() return? Q4. What is the difference between .catch() and the second argument of .then()? Q5. What does .finally() do? Async/Await Q6. What is async/await and how does it relate to Promises? Q7. What does an async function always return? Q8. Can you use await outside an async function? Q9. What happens if you don't use try/catch with async/await? Q10. What is the difference between sequential and parallel async calls? Promise Methods Q11. What is the difference between Promise.all and Promise.allSettled? Q12. What is Promise.race and when would you use it? React Connection Q13. Why can't useEffect callback be directly async? Q14. What is the standard loading/error/data pattern in React? Q15. What is the difference between async errors and sync errors in React? Full answers + code on GitHub 👇 https://lnkd.in/dj72-XEi #JavaScript #JStoReact #InterviewPrep #WebDevelopment #Frontend #ReactJS #30DayChallenge #JavaScriptTips #FrontendDeveloper #100DaysOfCode

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗘𝘃𝗲𝗻𝘁𝗟𝗼𝗼𝗽 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱 (𝗔 𝗠𝘂𝘀𝘁‐𝗞𝗻𝗼𝘄 𝗖𝗼𝗻𝗰𝗲𝗽𝘁) Understanding the JavaScript Event Loop is a game changer for writing efficient and predictable asynchronous code. Many developers use setTimeout and Promises every day — but far fewer truly understand how JavaScript executes async tasks behind the scenes. Let’s break it down 👇 𝗛𝗼𝘄 𝘁𝗵𝗲 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 𝗪𝗼𝗿𝗸𝘀 • JavaScript runs on a single thread • Synchronous code executes first via the Call Stack • Then Microtasks run (like Promises) • Next, one Macrotask executes (timers, events) • This cycle continues repeatedly 𝗘𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 𝗣𝗿𝗶𝗼𝗿𝗶𝘁𝘆 ➡️ Synchronous ➡️ Microtasks ➡️ Macrotasks 𝗪𝗵𝘆 𝘁𝗵𝗶𝘀 𝗰𝗼𝗻𝗰𝗲𝗽𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀 ✅ Debug async issues with confidence ✅ Avoid unexpected execution order ✅ Build more predictable React applications ✅ Frequently tested in frontend interviews Credit: owner Follow Rensith Udara Gonalagoda for more related content! 🤔 Having Doubts in technical journey? 🚀 Book 1:1 session with me : https://lnkd.in/gQfXYuQm 🚀 Subscribe and stay up to date: https://lnkd.in/dGE5gxTy 🚀 Get Complete React JS Interview Q&A Here: https://lnkd.in/d5Y2ku23 🚀 Get Complete JavaScript Interview Q&A Here: https://lnkd.in/d8umA-53 #JavaScript #EventLoop #FrontendDevelopment #ReactJS #WebDevelopment #InterviewPrep #AsyncJavaScript #SoftwareEngineering

🚨 You’re probably using the wrong method… find() vs filter() in JavaScript 👇 const arr = [1, 2, 3, 4, 5]; const one = arr.find(x => x > 2); const many = arr.filter(x => x > 2); 💡 Here’s the difference: 👉 find() → returns FIRST match 👉 filter() → returns ALL matches ⚠️ Common mistake: Using filter() when you only need one value 👉 That means extra unnecessary iterations 🔥 Simple rule: Need ONE → find() Need MANY → filter() ⚠️ Interview trap: find() → undefined filter() → [] 👉 Small concept → Big impact in real projects Which one were you using till now? 👇 Save this for interviews 🚀 Follow for more JavaScript content 🔥 #JavaScript #WebDevelopment #Frontend #Developers #InterviewPrep

💡 Still confused about call(), apply(), and bind() in JavaScript? Let’s fix that in 60 seconds. If you've ever struggled with how this works in JavaScript… you're not alone. These three methods are your secret weapons to take control of it. 👉 Here’s the simplest way to understand them: 🔹 call() Invokes the function immediately Pass arguments one by one fn.call(thisArg, arg1, arg2) 🔹 apply() Also invokes immediately But takes arguments as an array fn.apply(thisArg, [args]) 🔹 bind() Does NOT run immediately Returns a new function you can call later const newFn = fn.bind(thisArg) 🧠 Think of it like this: call → “Run now, here are the args” apply → “Run now, here’s a list of args” bind → “Save this for later with this context” ✨ Why it matters: Mastering these helps you: ✔ Control this like a pro ✔ Reuse methods across objects ✔ Avoid common bugs in callbacks & event handlers 🔥 Pro tip: In modern JS, apply() is less common thanks to the spread operator: fn.call(thisArg, ...args) 📌 If you're preparing for interviews or leveling up your JS fundamentals — this trio is a must-know. 💬 Which one do you use the most: call, apply, or bind? #JavaScript #WebDevelopment #Frontend #CodingTips #100DaysOfCode

🧠 JavaScript Polyfills — Do You REALLY Understand Them? Most developers use methods like "map", "filter", "bind" daily… But have you ever thought: 👉 “How do these methods actually work internally?” That’s where polyfills come in. 💡 A polyfill is just a way to replicate native JavaScript functionality manually — especially for older browsers. But here’s the catch 👇 Writing polyfills is NOT about syntax It’s about understanding: • How "this" works • How prototypes work • How JS executes internally --- 🚀 Example: Can you implement your own version of: 👉 "Array.prototype.map" 👉 "Function.prototype.bind" --- 💡 I’ve created a PDF with 20 important Polyfill Interview Questions 📄 I’ll drop the link in comments 👇 --- ❓ Let’s test your understanding: 👉 Can you write a polyfill for "map()"? Drop PolyFills in comment to get the PDF👇 --- #javascript #frontenddeveloper #codinginterview #webdevelopment #softwareengineer #developers #learnincode #programming #devcommunity #interviewprep

Just built a simple yet functional Stopwatch using HTML, CSS, and JavaScript ( This project helped me strengthen my understanding of: • DOM manipulation • Event handling (Start, Stop, Reset) • Time logic and intervals in JavaScript • Structuring clean and responsive Ul with CSS Watching the timer run in real-time after writing the logic from scratch was a satisfying moment. Small projects like this continue to sharpen my problem-solving skills and build my confidence as a developer. Next step: improving the design and adding more advanced features #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #SoftwareEngineering