Understanding Async/Await in JavaScript Promises

Day 42/50 – JavaScript Interview Question? Question: What is the Temporal Dead Zone (TDZ) and why does it exist? Simple Answer: The Temporal Dead Zone is the period from entering a scope until a let or const variable is declared. During this time, accessing the variable throws a ReferenceError. It exists to catch errors early and make code more predictable. 🧠 Why it matters in real projects: Understanding TDZ helps debug confusing ReferenceErrors and explains why let/const behave differently from var. It enforces better coding practices by preventing access to uninitialized variables, making bugs more obvious during development rather than in production. 💡 One common mistake: Assuming let and const aren't hoisted because of TDZ. They ARE hoisted, but remain uninitialized in the TDZ. Also, using variables before declaration in complex scopes and getting unexpected ReferenceErrors. 📌 Bonus: // var - no TDZ (hoisted with undefined) console.log(varVariable); // undefined var varVariable = 'Hello'; // let/const - TDZ exists console.log(letVariable); // ReferenceError! let letVariable = 'World'; // TDZ in block scope function example() { // TDZ starts here for 'x' console.log(x); // ReferenceError: Cannot access before initialization let x = 10; // TDZ ends here console.log(x); // 10 } // Tricky TDZ scenario let x = 'outer'; function test() { // TDZ for inner 'x' starts here console.log(x); // ReferenceError! (not 'outer') let x = 'inner'; // TDZ ends } // Why TDZ exists: // 1. Catch errors early function process() { console.log(value); // Intentional? Typo? TDZ makes it obvious! let value = 42; } // 2. Make const meaningful const PI = 3.14159; // Without TDZ, accessing PI before declaration would give undefined // making const less useful // 3. Prevent confusing behavior function confusing() { // What should this print? function getValue() { return value; // 'outer' or ReferenceError? } let value = 'inner'; console.log(getValue()); } // typeof operator gotcha console.log(typeof undeclaredVar); // "undefined" - safe console.log(typeof declaredLater); // ReferenceError! - TDZ let declaredLater = 10; // Best practices: // ✓ Declare variables at the top of their scope function betterCode() { let x, y, z; // Declare first x = getValue(); y = processData(x); z = x + y; } // ✓ Use const by default, let when needed const config = { api: '/api' }; // Won't reassign let counter = 0; // Will change #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #TDZ #ES6 #InterviewPrep #Hoisting

Day 50/50 – JavaScript Interview Question? Question: What is the difference between setTimeout(), setImmediate(), and process.nextTick() in Node.js? Simple Answer: setTimeout() schedules callback in macrotask queue after delay. setImmediate() executes in next event loop iteration. process.nextTick() executes before next phase (microtask, highest priority). Order: nextTick() → Promises → setImmediate() → setTimeout(). 🧠 Why it matters in real projects: Understanding these is crucial for Node.js performance, avoiding event loop starvation, and controlling async execution order. Misusing them causes performance bottlenecks or unexpected behavior. 💡 One common mistake: Overusing process.nextTick() starves the event loop since it runs before I/O. Also assuming setImmediate() runs immediately—it's actually next iteration, and order with setTimeout(0) can vary. 📌 Bonus: console.log('1: Start'); setTimeout(() => console.log('2: setTimeout'), 0); setImmediate(() => console.log('3: setImmediate')); process.nextTick(() => console.log('4: nextTick')); Promise.resolve().then(() => console.log('5: Promise')); console.log('6: End'); // Output: // 1: Start // 6: End // 4: nextTick (highest priority) // 5: Promise (microtask) // 3: setImmediate (next loop) // 2: setTimeout (timer phase) // Use cases: // nextTick - let constructor complete class AsyncResource { constructor() { process.nextTick(() => this.init()); } } // setImmediate - break up long operations function processLargeArray(arr) { const chunk = arr.splice(0, 100); processChunk(chunk); if (arr.length > 0) { setImmediate(() => processLargeArray(arr)); // ✓ Yields } } // Danger: Recursive nextTick starves I/O! function dangerous() { process.nextTick(dangerous); // ✗ Infinite, blocks I/O } // Better: use setImmediate for recursion function better() { setImmediate(better); // ✓ Allows I/O } // Modern alternative to nextTick Promise.resolve().then(() => { // Microtask like nextTick, less aggressive }); 🎉 Series Complete! 50/50 JavaScript Interview Questions #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #NodeJS #EventLoop #AsyncProgramming #WebDev #SeriesComplete

Day 47/50 – JavaScript Interview Question? Question: What is the difference between prototype and __proto__? Simple Answer: prototype is a property on constructor functions containing the object used as prototype for new instances. __proto__ is the actual internal link on every object pointing to its prototype. Use Object.getPrototypeOf() instead of __proto__. 🧠 Why it matters in real projects: Understanding the prototype chain explains how JavaScript inheritance works, how methods like .map() are available on arrays, and how classes work under the hood. Essential for creating efficient object hierarchies. 💡 One common mistake: Confusing prototype with __proto__, or modifying Object.prototype which affects all objects globally. Also using deprecated __proto__ instead of standard Object.getPrototypeOf(). 📌 Bonus: // Constructor function function Person(name) { this.name = name; } Person.prototype.greet = function() { return `Hello, I'm ${this.name}`; }; const alice = new Person('Alice'); // Key difference: console.log(Person.prototype); // Object with greet method console.log(alice.__proto__ === Person.prototype); // true console.log(Object.getPrototypeOf(alice) === Person.prototype); // true // Prototype chain: // alice → Person.prototype → Object.prototype → null // Inheritance example function Employee(name, title) { Person.call(this, name); this.title = title; } Employee.prototype = Object.create(Person.prototype); Employee.prototype.constructor = Employee; const bob = new Employee('Bob', 'Developer'); console.log(bob.greet()); // Inherited from Person // Modern ES6 equivalent class ModernEmployee extends Person { constructor(name, title) { super(name); this.title = title; } } // Best practices: // ✓ Use Object.getPrototypeOf() const proto = Object.getPrototypeOf(alice); // ✗ Don't modify Object.prototype Object.prototype.myMethod = function() {}; // BAD! // ✗ Don't use __proto__ directly (deprecated) // ✓ Use Object.setPrototypeOf() instead #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

Day 45/50 – JavaScript Interview Question? Question: What is the difference between call(), apply(), and bind()? Simple Answer: All three set the this context explicitly. call(thisArg, arg1, arg2, ...) invokes immediately with individual arguments. apply(thisArg, [args]) invokes immediately with an array of arguments. bind(thisArg) returns a new function with this permanently bound, without invoking. Why it matters in real projects: These methods are essential for method borrowing, event handlers with correct context, React class component methods, and functional programming patterns. Understanding them prevents common this binding bugs and enables powerful composition techniques. One common mistake: Confusing when to use each method. Use call when you know arguments, apply when you have an array, and bind when you need a reusable function with fixed context. Also, forgetting that arrow functions can't have their this rebound. Bonus: const person = { name: 'Alice', greet(greeting, punctuation) { console.log(`${greeting}, ${ this.name }${punctuation}`); } }; const person2 = { name: 'Bob' }; // call() - invoke immediately with individual args person.greet.call(person2, 'Hello', '!'); // "Hello, Bob!" // apply() - invoke immediately with array person.greet.apply(person2, ['Hi', '?']); // "Hi, Bob?" // bind() - return new function (doesn't invoke) const greetBob = person.greet.bind(person2); greetBob('Hey', '.'); // "Hey, Bob." // Practical use cases: // 1. Method borrowing const arrayLike = { 0: 'a', 1: 'b', length: 2 }; const arr = Array.prototype.slice.call(arrayLike); console.log(arr); // ['a', 'b'] // Modern alternative const arr2 = Array.from(arrayLike); // 2. Finding max/min with apply const numbers = [5, 2, 9, 1, 7]; const max = Math.max.apply(null, numbers); // 9 // Modern alternative const max2 = Math.max(...numbers); // 3. Event handlers with correct context class Button { constructor(label) { this.label = label; this.clicks = 0; } handleClick() { this.clicks++; console.log(`${this.label}: ${this.clicks} clicks`); } render() { const btn = document.createElement('button'); // ✗ Wrong - loses context btn.addEventListener('click', this.handleClick); // ✓ Right - preserves context btn.addEventListener('click', this.handleClick.bind(this)); } } // 4. Partial application with bind function multiply(a, b) { return a * b; } const double = multiply.bind(null, 2); console.log(double(5)); // 10 console.log(double(10)); // 20 // 5. Function composition function add(x, y) { return x + y; } const add5 = add.bind(null, 5); const result = [1, 2, 3].map(add5); // [6, 7, 8] // Polyfill for bind (interview favorite) Function.prototype.myBind = function(context, ...args) { const fn = this; return function(...newArgs) { return fn.apply(context, [...args, ...newArgs]); }; }; // Arrow functions can't be rebound const arrowFunc = () => { console.log(this.name); }; const obj = { name: 'Test' }; arrowFunc.call(obj); // Won't bind 'this' to obj!

🚀 JavaScript Interview Prep Series — Day 22 Topic: Proxy & Reflect in JavaScript Continuing my JS deep-dive, today I explored a powerful metaprogramming concept: 👉 Proxy & Reflect This is a favorite advanced interview topic because it shows how well you understand object behavior control in JavaScript. 🛡️ Real-World Analogy: VIP Security Checkpoint Think of a celebrity entering a hotel. 🔵 Proxy = Bodyguard (Interceptor) The bodyguard stands between the public and the celebrity. Every action goes through the bodyguard: Someone tries to read info → bodyguard checks Someone tries to change data → bodyguard validates Someone tries to delete → bodyguard can block ✅ Controls access ✅ Adds validation ✅ Logs activity In JavaScript, Proxy wraps an object and intercepts operations. 🟢 Reflect = Official Rulebook Now imagine the bodyguard has a standard protocol manual. When no special rule is needed, he simply follows the manual. 👉 That manual is Reflect Reflect provides default object operations and is commonly used inside Proxy traps to safely forward behavior. 💻 Basic Proxy Example const user = { name: "Raja" }; const proxy = new Proxy(user, { get(target, prop) { console.log(`Reading ${prop}`); return target[prop]; } }); console.log(proxy.name); ✅ Intercepts property access ✅ Adds custom behavior 💻 Proxy + Reflect (Best Practice) const user = { age: 25 }; const proxy = new Proxy(user, { set(target, prop, value) { if (prop === "age" && value < 0) { throw new Error("Invalid age"); } return Reflect.set(target, prop, value); } }); proxy.age = 30; 👉 Proxy handles logic 👉 Reflect performs the default operation Perfect combo 🔥 ⚡ Common Use Cases ✔ Validation layers ✔ Logging & debugging ✔ Access control ✔ Reactive frameworks (like Vue) ✔ Data binding ✔ API observability Proxies are widely used to intercept fundamental operations like get/set/delete. 🧠 Interview Quick Summary FeatureProxyReflectPurposeIntercept operationsPerform default operationsRoleControllerHelperUsed forCustom behaviorSafe forwardingWorks withhandler trapsstandard methods ⚠️ Pro Tips ✅ Always return true in set trap ✅ Prefer Reflect inside traps ✅ Avoid heavy proxies in hot paths (performance) ✅ Remember: Proxy wraps the target 📌 Goal: Share daily JavaScript concepts while preparing for interviews and learning in public. Next topics: Event Delegation deep dive, Web Workers, Advanced closures. Let’s keep growing consistently 🚀 #JavaScript #InterviewPreparation #Proxy #Reflect #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

Day 38/50 – JavaScript Interview Question? Question: What are JavaScript Generators and the yield keyword? Simple Answer: Generators are special functions that can pause and resume execution. They're defined with function* and use yield to return values one at a time. Each call to .next() resumes execution until the next yield or return statement. 🧠 Why it matters in real projects: Generators enable lazy evaluation (processing large datasets without loading everything into memory), implementing custom iterators, managing async flow (Redux-Saga uses generators), and creating infinite sequences efficiently. 💡 One common mistake: Forgetting that calling a generator function doesn't execute it immediately—it returns an iterator object. You must call .next() to start execution. Also, not understanding that yield can both send and receive values. 📌 Bonus: // Basic generator function* numberGenerator() { console.log('Start'); yield 1; console.log('After 1'); yield 2; console.log('After 2'); yield 3; return 'Done'; } const gen = numberGenerator(); // Doesn't execute yet! console.log(gen.next()); // { value: 1, done: false } console.log(gen.next()); // { value: 2, done: false } console.log(gen.next()); // { value: 3, done: false } console.log(gen.next()); // { value: 'Done', done: true } // Practical use cases: // 1. Infinite sequences function* fibonacci() { let [a, b] = [0, 1]; while (true) { yield a; [a, b] = [b, a + b]; } } const fib = fibonacci(); console.log(fib.next().value); // 0 console.log(fib.next().value); // 1 console.log(fib.next().value); // 1 console.log(fib.next().value); // 2 // 2. Lazy evaluation (memory efficient) function* readLargeFile(file) { for (let line of file) { yield processLine(line); // Process one line at a time } } // 3. Custom iterators function* range(start, end) { for (let i = start; i <= end; i++) { yield i; } } for (let num of range(1, 5)) { console.log(num); // 1, 2, 3, 4, 5 } // 4. Two-way communication function* twoWay() { const a = yield 'First'; console.log('Received:', a); const b = yield 'Second'; console.log('Received:', b); } const gen2 = twoWay(); gen2.next(); // { value: 'First', done: false } gen2.next('Hello'); // Logs: Received: Hello gen2.next('World'); // Logs: Received: World #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #Generators #ES6 #WebDev #InterviewPrep #AdvancedJS

Day 40/50 – JavaScript Interview Question? Question: What is the Map object and how does it differ from a plain Object? Simple Answer: A Map is a key-value collection where keys can be any type (objects, functions, primitives). Unlike plain objects, Maps maintain insertion order, have a size property, are iterable by default, and don't have prototype chain issues. 🧠 Why it matters in real projects: Maps are superior for frequently adding/removing entries, using non-string keys (like objects or DOM elements), maintaining order, and avoiding prototype pollution. They're essential for caching, memoization, and when you need dictionary-like behavior with better performance. 💡 One common mistake: Using objects as dictionaries when Map would be more appropriate, especially when keys might collide with prototype properties like toString or constructor. Also, forgetting that object keys are always converted to strings. 📌 Bonus: // Creating Maps const map = new Map(); map.set('name', 'Alice'); map.set(42, 'number key'); map.set(true, 'boolean key'); // Objects as keys (impossible with plain objects!) const objKey = { id: 1 }; map.set(objKey, 'object value'); // Basic operations map.get('name'); // 'Alice' map.has(42); // true map.delete(true); // Remove entry map.size; // 3 (not length) map.clear(); // Remove all // Key differences from Objects: // 1. Any type as key const func = () => {}; map.set(func, 'function key'); // ✓ Works! const obj = { [func]: 'test' }; // ✗ Converts to string // 2. Size property (O(1)) map.size; // Instant Object.keys(obj).length; // O(n) - slower // 3. Iteration order guaranteed const map2 = new Map(); map2.set('z', 1); map2.set('a', 2); map2.set('m', 3); for (let [key, value] of map2) { console.log(key); // 'z', 'a', 'm' (insertion order) } // 4. No prototype pollution const obj2 = {}; obj2.toString = 'hacked'; // Problem! const map3 = new Map(); map3.set('toString', 'safe'); // No issues // Practical use cases: // Caching with object keys const cache = new Map(); function expensiveOp(obj) { if (cache.has(obj)) { return cache.get(obj); } const result = /* expensive calculation */; cache.set(obj, result); return result; } // Counting occurrences const count = new Map(); for (let item of items) { count.set(item, (count.get(item) || 0) + 1); } // Converting between Object and Map const obj3 = { a: 1, b: 2 }; const map4 = new Map(Object.entries(obj3)); const obj4 = Object.fromEntries(map4); // When to use Map vs Object: // Use Map: frequent add/delete, non-string keys, need size // Use Object: static structure, JSON serialization, prototype methods #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #Map #DataStructures #InterviewPrep #ES6

🚀 JavaScript Interview Prep Series — Day 28 Topic: Functional Programming in JavaScript Continuing my JavaScript interview journey, today I revised a powerful paradigm that interviewers love: 👉 Functional Programming (FP) Functional programming is about writing predictable, side-effect-free, and reusable code by treating functions like mathematical transformations. 🏭 Real-World Example: Assembly Line Imagine a clean factory conveyor belt: 🍎 Raw apple enters 🧼 Wash station cleans it 🔪 Slice station cuts it 📦 Package station boxes it Each station: ✅ Works independently ✅ Doesn’t modify the original apple ✅ Always produces the same output for the same input That’s exactly how functional programming works. 🧠 Core Principles ✅ Pure Functions Same input → Same output No hidden changes. ✅ Immutability Don’t modify existing data — create new data. ✅ Function Composition Combine small functions to build powerful pipelines. ✅ Declarative Style Focus on what to do, not how to do it. 💻 Example 1: Pure Function const double = (x) => x * 2; double(5); // 10 double(5); // 10 (always same) ✔ No side effects ✔ Predictable ✔ Easy to test 💻 Example 2: Immutability const numbers = [1, 2, 3]; const doubled = numbers.map(x => x * 2); console.log(numbers); // [1, 2, 3] ✅ unchanged console.log(doubled); // [2, 4, 6] 👉 Original data is safe. 💻 Example 3: Function Composition const add5 = x => x + 5; const multiply2 = x => x * 2; const transform = x => multiply2(add5(x)); transform(10); // 30 🧩 Small functions → powerful pipeline 💻 Example 4: Functional Array Chain const nums = [1, 2, 3, 4, 5]; const result = nums .filter(x => x > 2) .map(x => x * 2) .reduce((sum, x) => sum + x, 0); console.log(result); // 24 🔥 This is the functional style interviewers expect. ⚠️ Avoid This (Imperative Style) let total = 0; for (let i = 0; i < nums.length; i++) { if (nums[i] > 2) { total += nums[i] * 2; } } Works… but harder to read and maintain. 🎯 Why Interviewers Ask This Because FP shows: • Clean coding mindset • Predictable logic • Better scalability • Modern JavaScript mastery 🧠 When to Use Functional Programming ✔ Data transformations ✔ Array processing ✔ React state updates ✔ Utility libraries ✔ Pipeline processing 📌 Goal: Share daily JavaScript concepts while preparing for interviews and learning in public. Next topics: Event Delegation deep dive, Advanced closures patterns, Performance optimizations. Let’s keep the streak strong 🚀 #JavaScript #InterviewPreparation #FunctionalProgramming #Frontend #WebDevelopment #LearningInPublic #Developers

here's some important JavaScript questions to crack interviews 𝟭. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗶𝘀 𝗸𝗲𝘆𝘄𝗼𝗿𝗱? - Refers to the object that is currently executing the function - In global scope, this is the window object (in browsers) - Arrow functions do not have their own this 𝟮. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗮𝗹 𝗜𝗻𝗵𝗲𝗿𝗶𝘁𝗮𝗻𝗰𝗲? - JS objects inherit properties and methods from other objects via a prototype chain - Every object has a hidden __proto__ property pointing to its prototype - ES6 class syntax is just cleaner syntax over prototypal inheritance 𝟯. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗦𝗽𝗿𝗲𝗮𝗱 𝗮𝗻𝗱 𝗥𝗲𝘀𝘁 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿 (...)? - Spread expands an array or object: const newArr = [...arr, 4, 5] - Rest collects remaining arguments into an array: function fn(a, ...rest) {} - Same syntax, different context position determines behavior - Great for copying arrays/objects without mutation 𝟰. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗗𝗲𝘀𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗶𝗻𝗴? - Extract values from arrays or objects into variables cleanly - Array: const [first, second] = [1, 2] - Object: const { name, age } = user - Supports default values: const { name = 'Guest' } = user 𝟱. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗘𝘃𝗲𝗻𝘁 𝗗𝗲𝗹𝗲𝗴𝗮𝘁𝗶𝗼𝗻? - Instead of adding listeners to each child element, add one listener to the parent - Uses event bubbling events travel up the DOM tree - More memory efficient for large lists or dynamic content - Check event.target inside the handler to identify which child was clicked 𝟲. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝗯𝗲𝘁𝘄𝗲𝗲𝗻 𝗰𝗮𝗹𝗹(), 𝗮𝗽𝗽𝗹𝘆()? - All three explicitly set the value of this - call() invokes immediately, passes args one by one - apply() invokes immediately, passes args as an array 𝟳. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗠𝗲𝗺𝗼𝗶𝘇𝗮𝘁𝗶𝗼𝗻? - Caching the result of a function call so it doesn't recompute for the same input - Improves performance for expensive or repeated operations - Commonly implemented using closures and objects/Maps 𝟴. 𝗪𝗵𝗮𝘁 𝗮𝗿𝗲 𝗛𝗶𝗴𝗵𝗲𝗿-𝗢𝗿𝗱𝗲𝗿 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀? - Functions that take other functions as arguments or return them - Examples: .map(), .filter(), .reduce(), .forEach() - Core concept in functional programming with JavaScript 𝟵. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝘁𝗵𝗲 𝗱𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝗯𝗲𝘁𝘄𝗲𝗲𝗻 𝗗𝗲𝗲𝗽 𝗖𝗼𝗽𝘆 𝗮𝗻𝗱 𝗦𝗵𝗮𝗹𝗹𝗼𝘄 𝗖𝗼𝗽𝘆? - Shallow copy copies only the top level nested objects are still referenced - Object.assign() and spread {...obj} create shallow copies - Deep copy duplicates everything including nested levels 𝟭𝟬. 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗼𝗽𝘁𝗶𝗼𝗻𝗮𝗹 𝗰𝗵𝗮𝗶𝗻𝗶𝗻𝗴 (?.) 𝗮𝗻𝗱 𝗻𝘂𝗹𝗹𝗶𝘀𝗵 𝗰𝗼𝗮𝗹𝗲𝘀𝗰𝗶𝗻𝗴 (??)? - ?. safely accesses nested properties without throwing if something is null/undefined - user?.address?.city returns undefined instead of crashing - ?? returns the right side only if the left is null or undefined Follow the Frontend Circle By Sakshi channel on WhatsApp: https://lnkd.in/gj5dp3fm 𝗙𝗼𝗹𝗹𝗼𝘄𝘀 𝘂𝘀 𝗵𝗲𝗿𝗲 → https://lnkd.in/geqez4re

Day 43/50 – JavaScript Interview Question? Question: What is Event Loop, Call Stack, and Task Queue in JavaScript? Simple Answer: The Call Stack tracks function execution (LIFO). The Task Queue (Callback Queue) holds callbacks from async operations. The Event Loop continuously checks if the Call Stack is empty, then moves tasks from the queue to the stack. Microtasks (Promises) have priority over Macrotasks (setTimeout). 🧠 Why it matters in real projects: Understanding the Event Loop is crucial for debugging async behavior, preventing UI blocking, and optimizing performance. It explains why promises execute before setTimeout(0), and helps you write non-blocking code in a single-threaded environment. 💡 One common mistake: Not understanding microtask vs macrotask priority, leading to unexpected execution order. Also, creating infinite microtask loops that starve the macrotask queue and freeze the UI. 📌 Bonus:  // Example demonstrating execution order console.log('1: Sync Start'); setTimeout(() => {  console.log('2: setTimeout (Macrotask)'); }, 0); Promise.resolve().then(() => {  console.log('3: Promise 1 (Microtask)'); }).then(() => {  console.log('4: Promise 2 (Microtask)'); }); console.log('5: Sync End'); // Output: // 1: Sync Start // 5: Sync End // 3: Promise 1 (Microtask) // 4: Promise 2 (Microtask) // 2: setTimeout (Macrotask) // Event Loop phases: // 1. Execute all synchronous code // 2. Execute all microtasks (Promises, queueMicrotask) // 3. Execute one macrotask (setTimeout, setInterval, I/O) // 4. Repeat // Call Stack visualization function first() {  console.log('First');  second();  console.log('First again'); } function second() {  console.log('Second');  third(); } function third() {  console.log('Third'); } first(); // Stack: [first] → [first, second] → [first, second, third] // Output: First, Second, Third, First again // Microtask vs Macrotask setTimeout(() => console.log('Macro 1'), 0); Promise.resolve()  .then(() => {  console.log('Micro 1');  Promise.resolve().then(() => console.log('Micro 2'));  })  .then(() => console.log('Micro 3')); setTimeout(() => console.log('Macro 2'), 0); // Output: Micro 1, Micro 2, Micro 3, Macro 1, Macro 2 // All microtasks complete before next macrotask! // Blocking the Event Loop (BAD!) function blockingOperation() {  const start = Date.now();  while (Date.now() - start < 3000) {  // Blocks for 3 seconds - UI freezes!  } } // Better: Break into chunks async function nonBlockingOperation() {  for (let i = 0; i < 1000; i++) {  // Do work...  if (i % 100 === 0) {  await new Promise(resolve => setTimeout(resolve, 0));  // Yields to Event Loop every 100 iterations  }  } } // Microtask starvation (infinite loop) function starveEventLoop() {  Promise.resolve().then(() => {  starveEventLoop(); // Creates endless microtasks!  // Macrotasks never run - UI freezes  }); }