JavaScript Tricky Question: Async Await and Event Loop

🚀 Day 23 - Poll answer & Explanation 💡 **JavaScript Event Loop Explained (Simple & Clear)** ```javascript console.log('S'); Promise.resolve().then(() => console.log('P1')); setTimeout(() => console.log('T1'), 0); Promise.resolve().then(() => console.log('P2')); setTimeout(() => console.log('T2'), 0); console.log('E'); Output: S E P1 P2 T1 T2 ``` 🔹 **Explanation:** * `S` and `E` run first → synchronous code (call stack) * `P1`, `P2` → microtasks (Promises) → run next * `T1`, `T2` → macrotasks (setTimeout) → run last 👉 Microtasks always execute before macrotasks in the event loop. #JavaScript #ReactJS #WebDevelopment #Coding #FrontendDeveloper #InterviewPrep

Day 15 of my 30-Day JavaScript Challenge Built a Real-Time Search Filter using pure Vanilla JS. Used the input event listener to detect every keystroke, then looped through all <li> elements using getElementsByTagName. If the item text includes the search query, it stays visible otherwise. display: none hides it. That's it. No library needed. take the Live Demo : https://lnkd.in/d3Cz--JV #JavaScript #30DayChallenge #VanillaJS #WebDev #Frontend #ferdous #development #github #netfily #linkedin

🚧 Temporal Dead Zone — JavaScript’s Invisible Trap Ever seen this error? ❌ #ReferenceError: Cannot access 'x' before initialization You declared the variable… so what went wrong? 🤔 When using let or const, JavaScript hoists the variable but doesn’t initialize it immediately. The time between declaration and initialization is called the Temporal Dead Zone (TDZ). console.log(score); ✖️ TDZ let score = 100; let score = 100; console.log(score); ✅ 100 🧠 Think of it like booking a hotel room — Your name is registered, but you can’t enter until check-in time. #Golden_Rule: Declare → Initialize → Then Use Mastering TDZ = fewer bugs + stronger JavaScript fundamentals 💪 #JavaScript #FrontendDeveloper #WebDevelopment #CodingJourney #Reactjs #Nextjs

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

🤯 JavaScript did WHAT here?! const str = "1,2,3" const arr = [1,2,3] console.log(arr == str) // true 😳 console.log(arr === str) // false 🤔 Same data… different results? This is exactly why many developers get confused between == and ===. 👉 How did an array become equal to a string? 👉 Why does strict equality behave differently? 👉 And when should you actually use each? I break this down in a simple way in my latest video 🎥 If you've ever been surprised by JavaScript comparisons, this one's for you. #JavaScript #WebDevelopment #Frontend #CodingTips #LearnToCode

If you understand this, you understand async JavaScript. There are TWO important queues: 1️⃣ Microtask Queue 2️⃣ Macrotask Queue Example: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Output: Start End Promise Timeout Why? Execution order: Run synchronous code Empty Microtask queue Take one Macrotask Repeat Microtasks include: • Promise callbacks • queueMicrotask Macrotasks include: • setTimeout • setInterval • I/O Promise always runs before setTimeout. This is critical when debugging race conditions. #javascript #eventloop #webdevelopment #frontend

📊 Yesterday poll answer and explanation - Day 5 console.log(0 && "Hello"); console.log("Hello" && 0) Rule of && in JavaScript (Important ⭐) 👉 It evaluates left to right 👉 It returns the first falsy value, 👉 If no falsy value is found, it returns the last truthy value These are falsy values in JavaScript false, 0, "", null, undefined, NaN 🎯 Final output 0, 0 Hope this explanation is helpful😊 #JavaScript #FrontendDeveloper #WebDevelopment #LearningJavaScript #InterviewPrep

Understanding the Node.js event loop finally made async JavaScript click for me. Here’s a simple example that confused me earlier: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Many beginners expect: Start → Timeout → Promise → End But the actual output is: Start → End → Promise → Timeout Why? Because Promises (microtasks) run before timer callbacks in the event loop. That one concept explains a lot of async behavior in Node.js. Once I understood this, debugging async issues became much easier. What JavaScript concept took you the longest to understand? #nodejs #javascript #backend #webdevelopment #softwareengineering

Day 8 of #100DaysOfCode Built a Stopwatch using JavaScript. Features: ⏱️ Start / Stop functionality. 🔄 Reset timer 📊 Real-time time tracking Continuing to improve my JavaScript fundamentals through small projects. Git-Hub Repo Link: https://lnkd.in/geZqCnQ9 #JavaScript #WebDevelopment #Frontend

In React, a Hook is just a JavaScript object. Each Hook stores: the state value a queue of updates and a reference to the next Hook Internally it looks like this: { memoizedState: state, queue: updates, next: nextHook } React stores Hooks as a linked list attached to the component's Fiber node. Fiber → Hook → Hook → Hook → null This is why Hooks must always be called in the same order. React reads them one by one during every render. When you call setState, React adds the update to the Hook's queue, and processes it during the next render. Hooks are not magic. They are simple objects connected together. Understanding this helps explain many React behaviors. #reactjs #javascript #webdevelopment