JavaScript Event Loop: Microtasks vs Callback Queue Explained

Day 15/365 – Advanced JavaScript Interview Questions 🔥 Part4 Q1. Explain the JavaScript event loop in detail. How do microtasks and macrotasks work? Q2. What are memory leaks in JavaScript? How do you detect and prevent them? Q3. How does garbage collection work in JavaScript? Q4. What is execution context? Explain call stack, heap, and scope chain. Q5. How does this behave in different scenarios (strict mode, arrow functions, callbacks, event handlers)? Q6. What are weak collections (WeakMap, WeakSet)? When would you use them? Q7. Explain immutability. Why is it important in large-scale applications? Q8. What are design patterns you’ve used in JavaScript? (Module, Singleton, Observer, Factory) Q9. How does prototype chaining work internally? Q10. What is the difference between Object.create() and constructor functions? Q11. How do you handle race conditions in async JavaScript? Q12. What are web workers? When should you use them? Q13. How does JavaScript handle concurrency despite being single-threaded? Q14. What are pure functions? Why are they important for scalability and testing? Q15. How does debouncing/throttling differ from requestAnimationFrame-based optimizations? Q16. Explain deep cloning strategies and their performance trade-offs. Q17. How does tree shaking work in JavaScript bundlers? Q18. What is code splitting and how does it improve performance? Q19. How do you design a reusable and scalable JavaScript utility library? Q20. What JavaScript performance issues have you faced in production and how did you fix them? #javascript #interview #jsinterview #interiewprepration #webdevelopment #js #performace #optimization #365daysofjs

JavaScript Interview/Concept Question – What Prints First? Recently revised an interesting JavaScript behavior related to Execution Order, setTimeout, and Promises. 💻 Consider this code: console.log("Start"); setTimeout(() => { console.log("setTimeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); 🖨 Output: Start End Promise setTimeout ⚙️ JavaScript Runtime Architecture Involved JavaScript execution is not handled by a single component. It’s a collaboration between: • JS Engine (V8) • Call Stack • Web APIs / Node APIs • Microtask Queue • Macrotask Queue • Event Loop 1️⃣ Global Execution Context (Call Stack) • console.log("Start") → executed immediately • setTimeout() → delegated to Web APIs • Promise.then() → scheduled in Microtask Queue • console.log("End") → executed At this point, the Call Stack is empty. ⸻ 2️⃣ Event Loop — Microtask Phase (High Priority) • The Event Loop first checks the Microtask Queue • Promise callbacks are executed immediately after the call stack clears • "Promise" is logged ⸻ 3️⃣ Event Loop — Macrotask Phase (Lower Priority) • Only after all microtasks are drained • Event Loop pulls from the Macrotask Queue • setTimeout callback executes • "setTimeout" is logged ⸻ 🧠 Rules to Remember ✔ JavaScript is single-threaded, but the runtime is not ✔ Promises bypass Web APIs and enter the Microtask Queue ✔ Microtasks always execute before macrotasks ✔ setTimeout(0) is delayed by the event loop cycle, not time. #javascript #frontenddevelopment

Interviewer:- Explain Hoisting in Javascript. Answer:- JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables, classes, or imports to the top of their scope, prior to execution of the code.(MDN Defination) Hoisting is a core JavaScript behavior where declarations are processed before code execution. This means the JS engine scans the code first and allocates memory for variables and functions. 🔹 var Hoisting Variables declared with var are hoisted and initialized with undefined. You can access them before declaration, but the value won’t be available yet. 🔹 let & const Hoisting These are also hoisted, but not initialized. They exist in the Temporal Dead Zone (TDZ) until the declaration line is executed. Accessing them early throws a ReferenceError. 🔹 Function Hoisting Function declarations are fully hoisted, including their definitions, so they can be called before being defined. Function expressions and arrow functions follow variable hoisting rules. 🔹Arrow Function Hoisting in JavaScript Arrow functions are not hoisted like function declarations. Their hoisting behavior depends on how they are defined. 1. Arrow Functions with var The variable is hoisted and initialized as undefined, but the function is not. Calling it before assignment results in a TypeError. 2. Arrow Functions with let or const They are hoisted but remain in the Temporal Dead Zone (TDZ). Accessing them before initialization throws a ReferenceError. 🔹 Key Difference Unlike normal function declarations, arrow functions cannot be called before they are defined. 📌 Best Practice Always define arrow functions before using them to avoid unexpected runtime errors. 📌 Why it matters? Understanding hoisting helps prevent runtime errors, improves debugging, and leads to more predictable and maintainable JavaScript code. #JavaScript #JS #Hoisting #WebDevelopment #FrontendDevelopment #Frontend #Programming #Coding #Developer #SoftwareDevelopment #LearningToCode #Tech #CodeNewbie #100DaysOfCode #WebDev #ReactJS #NodeJS

🤔 Ever confused by the three dots (...) in JavaScript? They look the same, but default parameters, rest, and spread solve very different problems. 🧠 JavaScript interview question What’s the difference between default parameters, rest parameters, and the spread operator? ✅ Short answer • Default parameters give fallback values • Rest collects multiple values into one • Spread expands one value into many Same syntax, different intent. 🔍 Default parameters — “Give me a fallback” Used when a function argument is missing or undefined. Instead of manual checks, JavaScript handles it for you. function greet(name = "there") { return "Hi " + name; } greet(); // "Hi there" greet("Sam"); // "Hi Sam" 🔍 Rest parameters — “Collect the leftovers” Used in function definitions to gather extra arguments into a real array. function sum(...nums) { return nums.reduce((a, b) => a + b, 0); } sum(1, 2, 3, 4); // 10 🔍 Spread operator — “Unpack things” Used in function calls, arrays, and objects to expand values. const a = [1, 2]; const b = [3, 4]; const combined = [...a, ...b]; // [1,2,3,4] With objects (shallow copy): const user = { name: "A", meta: { v: 1 } }; const copy = { ...user, role: "admin" }; ⚠️ Common misconceptions • Rest ≠ arguments (rest is a real array) • Spread does not deep clone objects • Default params apply only when value is undefined 🧩 Easy way to remember Rest gathers. Spread scatters. #javascript #frontend #webdevelopment #interviewprep #react #codingtips

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗡𝗼𝘁𝗲𝘀: 𝗙𝗿𝗼𝗺 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀 𝘁𝗼 𝗔𝗱𝘃𝗮𝗻𝗰𝗲𝗱 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀 (𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 & 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻 𝗥𝗲𝗮𝗱𝘆) These JavaScript notes are a structured, practical, and interview-oriented collection of concepts that every frontend and full-stack developer must understand deeply, not just memorize. Instead of surface-level definitions, these notes focus on how JavaScript actually works under the hood, why certain bugs occur, and how JS behaviour affects React performance, scalability, and real-world production applications. The content is built from: Real interview questions Debugging experience from real projects Common mistakes developers make even after years of experience What these notes cover JavaScript Fundamentals Execution context & call stack Scope, lexical environment & scope chain var, let, const (memory & hoisting differences) Hoisting explained with execution flow Core JavaScript Concepts this keyword (implicit, explicit, arrow functions) Closures (memory behaviour & real use cases) Prototypes & prototypal inheritance Shallow vs deep copy Reference vs value Asynchronous JavaScript Callbacks & callback hell Promises (microtask queue behaviour) Async/Await (what actually pauses execution) Event loop, microtasks vs macrotasks Real execution order questions asked in interviews Advanced & Interview-Critical Topics Debouncing & throttling Currying & function composition Polyfills (map, filter, reduce, bind) Equality operators (== vs ===) Memory leaks & garbage collection basics JavaScript for React Developers Closures inside hooks Reference equality & re-renders Immutability & state updates Async state behaviour Performance pitfalls caused by JS misunderstandings #ReactJS #JavaScriptForReact #FrontendPerformance #Hooks #WebDevelopers

Day 15/50 – JavaScript Interview Question? Question: What is the Event Loop in JavaScript? Simple Answer: The Event Loop is the mechanism that handles asynchronous operations in JavaScript's single-threaded environment. It continuously checks the Call Stack and Task Queues, executing code in a specific order: synchronous code first, then microtasks (promises), then macrotasks (setTimeout, events). 🧠 Why it matters in real projects: Understanding the Event Loop is crucial for debugging asynchronous behavior, preventing UI blocking, and optimizing performance. It explains why promises execute before setTimeout even with 0ms delay. 💡 One common mistake: Not understanding the priority of microtasks vs macrotasks, leading to unexpected execution order in complex async code. 📌 Bonus: console.log('1: Start'); setTimeout(() => console.log('2: Timeout'), 0); Promise.resolve() .then(() => console.log('3: Promise 1')) .then(() => console.log('4: Promise 2')); console.log('5: End'); // Output order: // 1: Start // 5: End // 3: Promise 1 // 4: Promise 2 // 2: Timeout // Why? Sync code → Microtasks (Promises) → Macrotasks (setTimeout) #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

🧠 JavaScript – Scope, Hoisting & this Understanding How JavaScript Works Internally To write better JavaScript, it’s not enough to know what to write we must understand how JavaScript executes code behind the scenes. This is where scope, hoisting, and this become important. 🔹 Scope in JavaScript Scope defines where a variable can be accessed. 🌍 Global Scope Variables declared outside functions or blocks. let appName = "MyApp"; function showName() { console.log(appName); } 👉 Accessible everywhere in the program. 🏠 Local (Function) Scope Variables declared inside a function. function greet() { let message = "Hello"; console.log(message); } 👉 Cannot be accessed outside the function. 📦 Block Scope Variables declared using let and const inside {}. if (true) { let count = 5; } 👉 count is not accessible outside the block. 🔹 Hoisting (Important Concept) Hoisting means JavaScript moves declarations to the top before execution. console.log(a); var a = 10; 👉 Output: undefined (The declaration is hoisted, not the value.) let and const with Hoisting console.log(b); let b = 5; 👉 This causes an error. Why? let and const are hoisted But not initialized (Temporal Dead Zone) 🔹 The this Keyword this refers to the object that is currently using the function. In a Regular Function console.log(this); 👉 Refers to the global object (window in browsers). Inside an Object let user = { name: "Alex", greet() { console.log(this.name); } }; 👉 this refers to the user object. Arrow Functions & this let user = { name: "Alex", greet: () => { console.log(this.name); } }; 👉 Arrow functions do not have their own this. 🧠 Simple Way to Remember Scope → where variables live Hoisting → how JS reads code this → who owns the function Understanding these prevents confusing bugs. ✅ Why This Matters Helps write predictable code Avoids scope-related errors Makes frameworks easier to understand Often asked in interviews If you understand this, you’re thinking like a real JavaScript developer. . . #JavaScript #WebDevelopment #ProgrammingBasics #LearningInPublic #FrontendDevelopment #FullStackJourney

When I’m taking interviews or sitting on the other side of the table these questions come up almost every single time. 🔹 Angular 1. What is Angular, and how is it different from other frontend frameworks? 2. Explain component lifecycle hooks. Which one is most commonly used? 3. What is data binding, and what are its types in Angular? 4. What is the difference between ngOnInit and constructor? 5. What are services, and why are they used? 6. How does dependency injection work in Angular? 7. What is the difference between template-driven forms and reactive forms? 🔹 JavaScript 8. What is the difference between var, let, and const? 9. Explain closures with a real-world example. 10. What is hoisting in JavaScript? 11. What is the difference between == and ===? 12. What are promises, and how do async/await work? 13. Explain the JavaScript event loop. 🔹 HTML 14. What is semantic HTML, and why is it important? 15. What is the difference between div and span? 16. What is the difference between inline and block elements? 🔹 CSS 17. What is the CSS box model? 18. What is the difference between position: relative, absolute, and fixed? 19. How does Flexbox differ from CSS Grid? 🔹 Git 20. What is the difference between git merge and git rebase? 21. What is the difference between git pull and git fetch? 22. How do you resolve merge conflicts in Git? 23. What is git stash, and when would you use it? #Angular #JavaScript #Git #FrontendInterview #WebDevelopment #InterviewPreparation #SoftwareEngineer

🤔 Ever wondered how JavaScript decides which variable a function can access? It’s not about where the function is called, it’s about where it’s written. 🧠 JavaScript interview question What is lexical scope in JavaScript? ✅ Short answer • Variable visibility is determined by where code is written • Inner scopes can access outer scopes • Outer scopes cannot access inner scopes 🔍 A bit more detail Lexical scope means: • Scope is fixed at definition (parse) time • Functions and blocks create scopes • Variable lookup walks outward through enclosing scopes JavaScript searches for variables: • In the current scope • Then parent scopes • Until it reaches the global scope 💻 Example const outer = "outside"; function test() { const inner = "inside"; console.log(outer); // works } test(); // console.log(inner); // ReferenceError ⚠️ Small but important detail Lexical scope is what makes closures possible. A function keeps access to the scope where it was defined, even after that outer function has returned. 🧩 Common misconceptions • Scope does NOT depend on who calls the function • Blocks with let and const create scope • Closures don’t create new scopes, they capture existing ones I’m sharing one JavaScript interview-style concept every day to build intuition, not just memorization. #javascript #frontend #webdevelopment #interviewprep