Understanding Event Loop and Async Behavior in JavaScript

𝗜 𝘁𝗵𝗼𝘂𝗴𝗵𝘁 𝗜 𝘄𝗮𝘀 𝗿𝗲𝗮𝗱𝘆 𝗳𝗼𝗿 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝘀... 𝘂𝗻𝘁𝗶𝗹 𝘁𝗵𝗶𝘀 𝗼𝗻𝗲 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻 𝗽𝗿𝗼𝘃𝗲𝗱 𝗺𝗲 𝘄𝗿𝗼𝗻𝗴.... ASKED : "𝗘𝘅𝗽𝗹𝗮𝗶𝗻 𝘁𝗵𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗲𝘃𝗲𝗻𝘁 𝗹𝗼𝗼𝗽 𝘄𝗶𝘁𝗵 𝗮𝘀𝘆𝗻𝗰 𝗯𝗲𝗵𝗮𝘃𝗶𝗼𝗿?" Me: "JavaScript is single-threaded. The event loop handles async operations by using the call stack and callback queue." Interviewer: "What about microtasks vs macrotasks?" Me: "Um... they're both queues?" Interviewer: "If I schedule a setTimeout and a Promise, which executes first?" Me: "...setTimeout?" Wrong. Interview over. I knew async/await. I used Promises daily. I'd built complex async applications. 𝗧𝗵𝗲 𝗲𝘃𝗲𝗻𝘁 𝗹𝗼𝗼𝗽 : It's the specific mechanism that coordinates synchronous code, microtasks, macrotasks, and browser APIs to create the illusion of concurrency in a single-threaded language. 𝗧𝗵𝗲 𝗺𝗲𝗻𝘁𝗮𝗹 𝗺𝗼𝗱𝗲𝗹 𝘁𝗵𝗮𝘁 𝗳𝗶𝗻𝗮𝗹𝗹𝘆 𝗺𝗮𝗱𝗲 𝗶𝘁 𝗰𝗹𝗶𝗰𝗸: JavaScript has ONE thread. It can only execute one thing at a time. 𝗕𝘂𝘁 𝗶𝘁 𝗵𝗮𝘀 𝗵𝗲𝗹𝗽: → Browser APIs (setTimeout, fetch, DOM events) run outside JavaScript → Event loop coordinates what executes when → Two separate queues: microtasks and macrotasks The loop's job: When call stack is empty, check microtasks first. Execute ALL microtasks. Then take ONE macrotask. Repeat. 𝗧𝗵𝗲 𝟰 𝗽𝗶𝗲𝗰𝗲𝘀 𝗺𝗼𝘀𝘁 𝗱𝗲𝘃𝘀 𝗺𝗶𝘀𝘀: 𝟭) 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 Runs synchronous code → Long tasks block everything 𝟮) 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲 (𝗵𝗶𝗴𝗵 𝗽𝗿𝗶𝗼𝗿𝗶𝘁𝘆) Promises run here → Always before timers 𝟯) 𝗠𝗮𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲 (𝗹𝗼𝘄 𝗽𝗿𝗶𝗼𝗿𝗶𝘁𝘆) setTimeout, events → Runs after microtasks 𝟰) 𝗪𝗲𝗯 𝗔𝗣𝗜𝘀 Browser handles async work → Pushes callbacks to queues 𝗧𝗵𝗲 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄-𝗪𝗶𝗻𝗻𝗶𝗻𝗴 𝗔𝗻𝘀𝘄𝗲𝗿: "JavaScript is single-threaded with a call stack. Async work is handled by Web APIs, and callbacks go into queues. Microtasks (Promises) run first, then macrotasks (setTimeout). The event loop executes all microtasks, then one macrotask. That’s why Promises run before setTimeout." 𝗘𝗻𝗱 𝘄𝗶𝘁𝗵 𝟭 𝗰𝗼𝗻𝗰𝗿𝗲𝘁𝗲 𝗲𝘅𝗮𝗺𝗽𝗹𝗲: You click a button that triggers a fetch. Click handler runs → fetch goes to browser → handler finishes. While waiting, user interacts with UI normally. When data returns, Promise runs (microtask) → UI updates. Async work doesn’t block the app, it gets scheduled smartly!! 𝗡𝗼𝘄 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄 𝗛𝗢𝗪 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗵𝗮𝗻𝗱𝗹𝗲𝘀 𝗮𝘀𝘆𝗻𝗰! Learn these fundamentals deeply and you won’t just clear interviews… you’ll get hired. Start your prep with our frontend interview resource!! Link in comments👇

5 Advanced Next.js 15 Interview Questions Headline: Is your Next.js expertise ready for the Server-First Era? ⚛️🏢 The bar for "Senior Frontend" has moved. In 2026, interviewers aren't just asking about basic routing; they are testing your ability to orchestrate React Server Components (RSC) and Agentic Data Fetching. If you are interviewing for a Lead role this month, you need to master these 5 questions: 1. The "use client" Boundaries Question: In the App Router, why is the goal to "push 'use client' as far down the component tree as possible"? The Answer: To maximize the benefits of Server Components—reducing client-side JavaScript bundles and keeping sensitive logic (like API keys or DB queries) entirely on the server. 2. Layouts vs. Templates Persistence Question: What is the critical difference between layout.js and template.js during route navigation? The Answer: Layouts persist state and do NOT re-render on navigation, while Templates create a new instance on every navigation, resetting state—useful for enter/exit animations. 3. Incremental Static Regeneration (ISR) vs. Streaming Question: When would you choose Streaming with Suspense over ISR for a data-heavy dashboard? The Answer: ISR is best for content that updates periodically (like product pages); Streaming is superior for real-time, user-specific data where you want to show the page shell instantly while loading slow content in the background. 4. Server Actions & Form State Question: How do Server Actions change the way we handle "Optimistic UI" updates compared to traditional API routes? The Answer: Server Actions allow direct server-side data mutations from Client Components; when combined with useOptimistic, you can update the UI instantly before the server even confirms the action. 5. Middleware & RBAC Question: Why is it safer to implement Role-Based Access Control (RBAC) in Middleware rather than exclusively inside Server Components? The Answer: Middleware intercepts the request before the rendering process begins, preventing unauthorized users from even triggering server-side data fetching or hitting protected route segments. The Bottom Line: In 2026, your value is no longer just "writing code," but architecting secure, high-performance systems that leverage the full server-side potential of Next.js. Which of these features has been your biggest "gotcha" this year? 👇 #NextJS #ReactJS #WebDevelopment #SoftwareArchitecture #TypeScript #FullStack #BuildInPublic

🚀 Most commonly asked JavaScript Interview Questions (with Code Snippets) Tired of the same old JS questions? Here are some real-world, scenario-based questions that actually test problem-solving 👇 🔹 1. Debounce vs Throttle (UI Performance) 👉 Scenario: Search input hitting API on every keystroke — how do you optimize? function debounce(fn, delay) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); }; } 🔹 2. Flatten Deeply Nested Array 👉 Scenario: API returns unpredictable nested data function flatten(arr) { return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val) , []); } 🔹 3. Memoization (Performance Optimization) 👉 Scenario: Expensive calculations running repeatedly function memoize(fn) { const cache = {}; return (n) => { if (cache[n]) return cache[n]; return cache[n] = fn(n); }; } 🔹 4. Event Delegation 👉 Scenario: Handling clicks on dynamically added elements document.getElementById("parent").addEventListener("click", (e) => { if (e.target.tagName === "BUTTON") { console.log("Button clicked:", e.target.innerText); } }); 🔹 5. Prevent Multiple API Calls 👉 Scenario: User clicks “Submit” multiple times let isProcessing = false; async function handleSubmit() { if (isProcessing) return; isProcessing = true; await apiCall(); isProcessing = false; } 🔹 6. Deep Clone Object 👉 Scenario: Avoid mutation bugs const clone = structuredClone(obj); 🔹 7. Custom Promise.all 👉 Scenario: Understand async control deeply function myPromiseAll(promises) { return new Promise((resolve, reject) => { let results = []; let count = 0; promises.forEach((p, i) => { Promise.resolve(p) .then(res => { results[i] = res; count++; if (count === promises.length) resolve(results); }) .catch(reject); }); }); } 💡 Pro Tip: Interviewers today focus on real-world scenarios, async handling, and performance optimization — not just syntax. 🔥 If you can explain why and when to use these patterns, you're already ahead of 80% of candidates. #javascript #frontend #webdevelopment #interviewprep #codinginterview #reactjs #nodejs #softwareengineering #careergrowth

🚀 Interview Experience – Frontend (React/JavaScript) | Persistent Systems Recently had an interesting interview experience with Persistent Systems and wanted to share some of the questions/topics that were discussed. It was a great mix of practical coding, core JavaScript concepts, and frontend fundamentals. 🔹 Coding / Problem-Solving 1. A parent div with 3 child divs. You need to place first at bottom-left and second at bottom-middle and third one at bottom-right. 🔹 JS output-based questions: 🌞 (function () { try { throw new Error(); } catch (x) { var x = 1, y = 2; console.log(x); } console.log(x); console.log(y); })(); 🌞 console.log(0 || 1); //1 console.log(1 || 2); //1 console.log(0 && 1); //0 console.log(1 && 2); // 2 🌞 (function(){ var a = b = 3; })(); console.log(a); console.log(b); 🌞 Create a React component that allows a user to select a file and simulate an upload process. When the user clicks the upload button, display a progress bar that gradually fills from 0% to 100% and show the upload percentage. The progress bar should update dynamically using React state. 🔹 Core JavaScript Concepts 1. Currying (currying vs normal functions) 2. call, apply, bind – when to use 3. Event loop 4. Promises: Promise.all, Promise.allSettled, Promise.race 5. Debouncing vs Throttling 6. Sync vs Deferred execution 7. Object & Array Destructuring 8. Difference between for...of and for...in . 🔹 React Topics 1. Hooks 2. useState – async or sync? How it works internally 3. Error Boundaries 4. Redux / Redux Toolkit flow 🔹 HTML & CSS Fundamentals 1. Box Model 2. CSS Specificity 3. Pseudo-classes and Pseudo-elements 4. Accessibility. Responsive Design techniques 🔹 Testing - Writing test cases (basic understanding expected) 💡 Overall, the interview focused more on fundamentals + real-world implementation rather than just theory. Would love to hear if you've come across similar questions or patterns! 👇 #PersistentSystems #Frontend #JavaScript #ReactJS #WebDevelopment #InterviewExperience #CodingInterview #Learning #CareerGrowth

🚀 React Interview Question: How to create and use Custom Hooks in React? 💡 A Custom Hook in React is a reusable function that lets you extract and share logic across components. Instead of duplicating logic (like API calls, form handling, or event listeners), you can move it into a custom hook and reuse it anywhere. 🔹 Why use Custom Hooks? - reusability - cleaner components - better separation of concerns - easier testing & maintenance 🔹 How to create a Custom Hook? - create a function starting with use import { useState, useEffect } from "react"; function useFetch(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then(res => res.json()) .then(data => setData(data)); }, [url]); return data; } 🔹 How to use it in a component? function Users() { const data = useFetch("https://lnkd.in/gxkxVfEt"); return ( <div> {data ? data.map(user => <p key={user.id}>{user.name}</p>) : "Loading..."} </div> ); } 🔹 Key Rules - always start with use - can use other hooks inside (useState, useEffect, etc.) - must follow React Hook rules Follow Tarun Kumar for more tech content and interview prep #ReactJS #CustomHooks #FrontendDevelopment #JavaScript #WebDevelopment #CodingInterview #SoftwareEngineering #TechContent #Developers

⚙️ process.nextTick vs setImmediate vs setTimeout vs setInterval — Node.js Interview🔥 If you're preparing for backend interviews, understanding how Node.js handles async execution is a big differentiator. These functions are often confusing—but super important 👇 🔹 process.nextTick() → Runs immediately (microtask queue) * Executes right after the current operation * Runs before the event loop continues * Highest priority 👉 Use when: You want something to run ASAP after current code 📌 Example: process.nextTick(() => console.log("nextTick")); console.log("sync"); 🔹 setImmediate() → Runs in next event loop cycle * Executes in the check phase * Runs after I/O operations * Lower priority than nextTick 👉 Use when: You want to defer execution 📌 Example: setImmediate(() => console.log("setImmediate")); 🔹 setTimeout() → Runs after delay (minimum time) * Executes after a specified delay (not exact timing) * Runs in the timers phase * `0ms` doesn’t mean immediate execution 👉 Use when: Delay execution 📌 Example: setTimeout(() => console.log("timeout"), 0); 🔹 setInterval() → Runs repeatedly * Executes a function at fixed intervals * Continues until cleared 👉 Use when: Repeating tasks (polling, timers) 📌 Example: setInterval(() => console.log("running..."), 1000); 🔹 Key Differences (Quick View) process.nextTick(): * Executes immediately after current operation * Microtask queue * Highest priority setImmediate(): * Executes in next event loop cycle * Check phase setTimeout(): * Executes after delay * Timers phase setInterval(): * Executes repeatedly after fixed delay 🔹 Interview Tip If asked: 👉 Difference between nextTick, setImmediate, and setTimeout? 💡 Answer smartly: * nextTick → before event loop continues * setTimeout(0) → timers phase * setImmediate → check phase ⚠️ Pro Tip: Overusing `process.nextTick()` can block the event loop. Use it wisely. Master the event loop = Master Node.js 🚀 #NodeJS #JavaScript #BackendDevelopment #EventLoop #CodingInterview #SoftwareEngineer #LearnToCode

✅ *JavaScript Functions – Interview Q&A* ⚙️📱 *1. What is a function in JavaScript?* A *function* is a reusable block of code that performs a task. ```js function greet(name) { return "Hello, " + name; } ``` *2. What are the different ways to define functions?* - *Function Declaration* ```js function sum(a, b) { return a + b; } ``` - *Function Expression* ```js const sum = function(a, b) { return a + b; }; ``` - *Arrow Function* ```js const sum = (a, b) => a + b; ``` *3. What is the difference between function declaration and expression?* Function declarations are hoisted. You can call them before they are defined. Function expressions are not hoisted. *4. What is an arrow function?* A shorter syntax for function expressions. Does *not* bind its own `this`, `arguments`, or `super`. *5. What is a callback function?* A function passed as an argument to another function, often used for async tasks. ```js setTimeout(() => console.log("Done"), 1000); ``` *6. What is the difference between parameters and arguments?* - *Parameters* are named in the function definition. - *Arguments* are the values passed during function call. *7. What is the rest parameter `...args`?* It allows functions to accept an indefinite number of arguments. ```js function total(...nums) { return nums.reduce((a, b) => a + b); } ``` *8. What is the default parameter in a function?* You can set default values for parameters. ```js function greet(name = "Guest") { return "Hello, " + name; } ``` *9. What is closure in JavaScript?* A closure gives access to an outer function’s scope from an inner function. ```js function outer() { let count = 0; return function() { count++; return count; }; } ``` *10. Can functions be returned in JavaScript?* Yes. Functions are first-class citizens and can be returned like any other value. ```js function multiply(factor) { return function(num) { return num * factor; }; } ```

React Interview Question: How do you re-render the view when the browser is resized? When we resize the browser window, React does not automatically re-render the component because React only re-renders when state or props change, not when the browser size changes. we can re-render the component by following these 3 steps: step 1- listen to the browser resize event step 2- store window size in state step 3- update state on resize 🔹 Step 1: Listen to the browser resize event - browser provides a resize event on the window object. - we can listen to it using addEventListener. 🔹 Step 2: Store window size in state - we use useState to store the current width (or height). - whenever this state updates, React will re-render the component. 🔹 Step 3: Update state on resize - inside the resize handler, update the state with the latest window size. 🔹 Example import { useState, useEffect } from "react"; function App() { // Step 2: Store window width in state const [width, setWidth] = useState(window.innerWidth); useEffect(() => { // Step 3: Function to update state on resize const handleResize = () => { setWidth(window.innerWidth); // triggers re-render }; // Step 1: Add event listener window.addEventListener("resize", handleResize); // Cleanup to prevent memory leaks return () => { window.removeEventListener("resize", handleResize); }; }, []); return ( <div> <h1>Window width: {width}</h1> <p>Try resizing your browser</p> </div> ); } export default App; 🔹 What’s happening here in above example? - when the component mounts, event listener is added - when the window resizes, handleResize runs - state (width) updates, React re-renders UI - when component unmounts, listener is removed 🔹Conclusion React does not track browser events automatically, but by connecting browser events to state, we stay in full control of re-rendering. Connect/Follow Tarun Kumar for more tech content and interview prep #ReactJS #FrontendDevelopment #JavaScript #WebDev #CodingInterview

🔐 JavaScript Closures — the concept that confuses juniors, impresses interviewers, and powers half your codebase without you realizing it. Let's break it down simply. No jargon. No confusion. —————————————————— What is a Closure? —————————————————— A closure is a function that remembers the variables from its outer scope — even after the outer function has finished executing. Think of it like this: Imagine you write a letter, seal it in an envelope, and give it to someone. Even after you leave the room, the letter still carries your words. That sealed envelope = a closure. —————————————————— Let's see it in code 👇 —————————————————— function outer() {  let count = 0;  return function inner() {   count++;   console.log(count);  }; } const counter = outer(); counter(); // 1 counter(); // 2 counter(); // 3 outer() has finished. But inner() still holds a reference to count. That's a closure. The inner function carries its environment with it — like a backpack full of variables. —————————————————— Why does this matter? Real-world use cases 🔥 —————————————————— ✅ Data privacy — encapsulate private variables, no class needed ✅ Factory functions — create configurable functions dynamically ✅ Memoization — cache results using a closed-over object ✅ Event handlers — capture loop variables correctly in callbacks —————————————————— The classic interview gotcha ⚠️ —————————————————— for (var i = 0; i < 3; i++) {  setTimeout(() => console.log(i), 1000); } // Prints: 3, 3, 3 ❌ Fix it with let — which creates a new binding per iteration: for (let i = 0; i < 3; i++) {  setTimeout(() => console.log(i), 1000); } // Prints: 0, 1, 2 ✅ —————————————————— 💡 Quick recap:  → Closure = function + its surrounding scope  → The scope is preserved even after the outer function returns  → Used everywhere: React hooks, event listeners, module patterns, caching —————————————————— Closures aren't magic — they're just functions with a good memory. 🧠 Once you truly understand closures, concepts like React's useState, debounce, and the module pattern all start to make perfect sense. Save this post for your next JS interview prep session! 🔖 What's the closure concept that tripped you up the most? Drop it below 👇 ♻️ Repost to help a fellow dev crack this once and for all. #JavaScript #Closures #WebDevelopment #Frontend #Programming #JSInterviewPrep #LearnJavaScript #SoftwareEngineering #100DaysOfCode #CodeNewbie #TechCommunity #DeveloperTips #ReactJS

💡 JavaScript IIFE (Immediately Invoked Function Expression) and Interview Classic: The setTimeout + var Trap Ever seen this weird-looking function? 👇 (function() { console.log("Hello World"); })(); 🤔 Looks different, right? 🧠 What is an IIFE? 👉 An IIFE (Immediately Invoked Function Expression) is a function that: ✔️ Is defined ✔️ And executed immediately No need to call it separately! 🔍 How does it work? (function(name) { console.log("Hello " + name); })("Javascript"); 👉 Output: Hello Javascript 🚀 Why do we use IIFE? 🔒 1. Creates a private scope Variables inside it cannot be accessed outside (function() { var secret = "hidden"; })(); ❌ secret is not accessible outside 🌍 2. Avoids global scope pollution Keeps your code clean and prevents conflicts. ⚡ 3. Helps with closures (classic interview use-case) This is one of the most famous questions asked in interviews 👇 for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000); } 🤔 What will be the output? 👉 Most people expect: 0 1 2 3 4 ❌ But the actual output is: 5 5 5 5 5 🧠 What’s happening here? 🔹 var is function-scoped, not block-scoped 🔹 The loop finishes execution first → i becomes 5 🔹 setTimeout runs later (asynchronously) 🔹 All callbacks share the same reference of i 👉 So every console.log prints 5 ✅ How to fix it? 🔹a) Using let (block scope): for (let i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000); } ✔️ Output: 0 1 2 3 4 🔹b) Using Closure (if you must use var): for (var i = 0; i < 5; i++) { (function(i) { setTimeout(() => { console.log(i); }, 1000); })(i); } What is this (function(i) { ... })(i)? 👉 This is an Immediately Invoked Function Expression (IIFE) (It runs immediately after being defined) So for each loop iteration: 🔹A new function is created 🔹It gets its own copy of i as a parameter 👉How closure helps here Inside the loop: First iteration → i = 0 → function runs with i = 0 → setTimeout remembers this i Second iteration → i = 1 → new function with i = 1 → new closure created 👉 This happens for all iterations So instead of sharing one i, we now have 5 different i values stored separately Final result After 1 second: 0 1 2 3 4 ✅ Each setTimeout prints its own preserved value 🔥 Simple analogy Think of it like: ❌ Without closure → 5 people sharing one notebook ✅ With closure → each person gets their own notebook 🚀 Key takeaway 👉 Closures allow functions to remember the variables from their scope 👉 IIFE creates a new scope for each iteration 👉 That’s why this fixes the var problem #JavaScript #CodingInterview #FrontendDevelopment #WebDevelopment #LearnInPublic