JavaScript Event Loop Explained Simply

🚀 JavaScript Interview Prep Series — Day 6 Topic: Callbacks in JavaScript (Explained Simply) Continuing my JavaScript interview prep series, today I revised one of the most important asynchronous concepts: 👉 Callbacks in JavaScript Callbacks are fundamental to understanding async JavaScript, event handling, APIs, and even Promises. 🍽 Real-World Example: Restaurant Ordering Imagine ordering food at a restaurant. 1️⃣ You place your order and give your number/buzzer. 2️⃣ Kitchen prepares your food while you relax or do something else. 3️⃣ When food is ready, the waiter calls you. You don’t wait at the counter the whole time. Mapping to JavaScript Ordering food → Calling a function Cooking → Asynchronous work Waiter calling you → Callback execution 💻 Clean Callback Example function orderFood(dish, callback) { console.log("Order placed for:", dish); setTimeout(() => { console.log("Preparing food..."); callback(dish); }, 2000); } function notifyCustomer(dish) { console.log(dish + " is ready! Please collect it."); } orderFood("Burger", notifyCustomer); Output Order placed for: Burger Preparing food... Burger is ready! Please collect it. ✅ Why Callbacks Matter in Interviews Callbacks are used in: • Async operations • Event listeners • API calls • Timers • Node.js patterns Understanding callbacks makes learning Promises and async/await much easier. 📌 Goal: Share JavaScript concepts daily while preparing for interviews and help others revise core fundamentals. Next topics: callback hell, promises, async/await, execution context, and more. Let’s keep learning in public 🚀 #JavaScript #InterviewPreparation #Callbacks #AsyncJavaScript #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

🚀 JavaScript Interview Prep Series — Day 4 Topic: Higher Order Functions in JavaScript Continuing my JavaScript interview brush-up series, today’s topic is another core JavaScript concept used everywhere in modern development: 👉 Higher Order Functions (HOF) You use them daily in JavaScript, often without realizing it. ☕ Real-World Example: Coffee Shop Customization Imagine ordering coffee. The barista takes: A base drink, and Your custom instructions Then prepares a personalized drink. Mapping to JavaScript Barista → Higher Order Function Custom instructions → Callback Function Final drink → Returned Function / Result So the barista doesn’t just make coffee — they use instructions to customize it. Similarly, Higher Order Functions: ✔ Take functions as input ✔ Or return functions as output 💻 JavaScript Example Example 1 — Using map() const numbers = [1, 2, 3, 4]; const doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6, 8] Here: map() is a Higher Order Function num => num * 2 is the callback Example 2 — Function Returning Function function createMultiplier(factor) { return function(number) { return number * factor; }; } const double = createMultiplier(2); console.log(double(5)); // 10 The function remembers the factor and creates custom multipliers. ✅ Why This Matters in Interviews Higher Order Functions are everywhere: • map, filter, reduce • Event handling • Functional programming • React patterns • Data transformation logic Understanding them improves code readability and reuse. 📌 Goal: Share daily JavaScript concepts while preparing for interviews and help others revise fundamentals too. Next topics coming: promises, async/await, execution context, hoisting, and more. Let’s keep learning in public 🚀 #JavaScript #InterviewPreparation #HigherOrderFunctions #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney #FunctionalProgramming

🚀 JavaScript Interview Prep Series — Day 13 Topic: Destructuring & Spread Operator in JavaScript Continuing my JavaScript interview revision journey, today’s focus was on two powerful and commonly used ES6 features: 👉 Destructuring 👉 Spread Operator Both help write cleaner, shorter, and more readable code. 📦 Real-World Example 1️⃣ Destructuring — Unpacking a Box Imagine receiving a box with many items, but you only take what you need: Laptop, charger, headphones, etc. Instead of using the whole box, you extract specific items. JavaScript destructuring works the same way — we extract values from arrays or objects. 2️⃣ Spread Operator — Combining Items Now imagine combining items from multiple boxes into one large container. Spread operator allows us to combine or expand values easily. 💻 Practical JavaScript Examples Array Destructuring const numbers = [10, 20, 30]; const [first, second] = numbers; console.log(first); // 10 console.log(second); // 20 Object Destructuring const user = { name: "Raja", age: 25 }; const { name, age } = user; console.log(name, age); Spread Operator — Combine Arrays const arr1 = [1, 2]; const arr2 = [3, 4]; const combined = [...arr1, ...arr2]; console.log(combined); // [1,2,3,4] Spread — Copy Object const userCopy = { ...user }; ✅ Why This Matters in Interviews Interviewers expect developers to know: • Modern JavaScript syntax • Clean data extraction • Immutable data patterns • Object/array manipulation Destructuring and spread are used everywhere in React and modern JS. 📌 Goal: Share daily JavaScript interview topics while preparing and learning in public. Next topics: Rest operator, shallow vs deep copy, event delegation, and more. Let’s keep improving daily 🚀 #JavaScript #InterviewPreparation #Destructuring #SpreadOperator #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

🚀 JavaScript Interview Prep Series — Day 12 Topic: Error Handling in JavaScript (try, catch, finally) Continuing my JavaScript interview revision series, today’s focus was on a very important but often overlooked topic: 👉 Error Handling using try–catch–finally Good developers don’t just write code that works — they write code that handles failures gracefully. 🎪 Real-World Example: Circus Safety Net Imagine a trapeze performance in a circus. 1️⃣ Acrobat attempts a risky trick (TRY). 2️⃣ If something goes wrong, the safety net catches them (CATCH). 3️⃣ After performance, crew resets equipment no matter what (FINALLY). Whether success or failure, cleanup always happens. JavaScript error handling works the same way. 💻 Practical JavaScript Example async function fetchUser() { try { console.log("Fetching user data..."); const response = await fetch("https://lnkd.in/dAktZdHe"); if (!response.ok) { throw new Error("Failed to fetch data"); } const data = await response.json(); console.log("User:", data); } catch (error) { console.error("Something went wrong:", error.message); } finally { console.log("Cleanup: Stop loader / close connection"); } } fetchUser(); Execution Flow ✅ If request succeeds → catch block is skipped ❌ If request fails → catch handles error 🔁 finally runs in both cases ✅ Why Interviewers Ask This Because it tests: • Defensive coding skills • Async error handling understanding • Custom error throwing • Production-ready code thinking 📌 Goal: Share daily JavaScript concepts while preparing for interviews and help others revise fundamentals. Next topics: Event delegation, closures deep dive, execution context, and more. Let’s keep learning in public 🚀 #JavaScript #InterviewPreparation #ErrorHandling #AsyncJavaScript #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

🎯 A JavaScript Interview Question About var vs let (Execution Context Perspective) In an interview, I was asked to explain the output of this code: for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1000); } Output: 3 3 3 But when var is replaced with let: for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1000); } Output: 0 1 2 At first it looks like a setTimeout trick, but the real concept is about Execution Context and Scope. ⚙ Case 1 — Using var var is function-scoped, so the loop runs inside one execution context with one shared variable i. Visualizing it: Execution Context ----------------- i = 0 → timer scheduled i = 1 → timer scheduled i = 2 → timer scheduled i = 3 → loop finished All setTimeout callbacks reference the same variable i. When the timers finally execute after 1 second: console.log(i) console.log(i) console.log(i) The value of i is already 3. So the output becomes: 3 3 3 ⚙ Case 2 — Using let let is block-scoped. For every loop iteration, JavaScript creates a new lexical environment (new execution context for that variable). Visualizing it: Iteration 1 → i = 0 (separate context) Iteration 2 → i = 1 (separate context) Iteration 3 → i = 2 (separate context) Each setTimeout callback captures its own i value. When timers run: console.log(0) console.log(1) console.log(2) Output: 0 1 2 💡 Simple way to remember this var → one execution context → shared variable let → new lexical context per iteration → separate variable This question is often used in interviews to test understanding of: • Execution Context • Closures • Block Scope in JavaScript Small detail… but a powerful concept. #JavaScript #NodeJS #ExecutionContext #Closures #CodingInterview

🚀 JavaScript Interview Prep Series — Day 7 Topic: Currying in JavaScript (Made Simple) Continuing my JavaScript interview prep series, today’s topic is: 👉 Currying in JavaScript Currying is often asked in interviews and used in functional programming patterns, but it’s actually simpler than it sounds. 🥪 Real-World Example: Sandwich Customization Imagine ordering a sandwich in steps: 1️⃣ Choose bread 2️⃣ Choose protein 3️⃣ Choose toppings At each step, your previous choice is remembered until the sandwich is complete. You don’t choose everything at once — choices are applied step by step. JavaScript works similarly with currying: A function takes one argument at a time and returns another function that takes the next argument. 💻 Currying Example in JavaScript Normal function Copy code Javascript function makeSandwich(bread, protein, toppings) { return `${bread} sandwich with ${protein} and ${toppings}`; } Curried version const makeSandwich = (bread) => (protein) => (toppings) => `${bread} sandwich with ${protein} and ${toppings}`; const wheatBase = makeSandwich("Wheat"); const turkeySandwich = wheatBase("Turkey"); console.log(turkeySandwich("Lettuce & Tomato")); Output Wheat sandwich with Turkey and Lettuce & Tomato Each step locks in previous values. ✅ Why Currying Matters in Interviews Currying helps with: • Partial application • Reusable functions • Functional programming patterns • Cleaner data pipelines • Framework-level optimizations 📌 Goal: Share daily JavaScript interview concepts while revising fundamentals and learning in public. Next topics: Debouncing, Throttling, Hoisting deep dive, Execution Context, and more. Let’s keep building consistency 🚀 #JavaScript #InterviewPreparation #Currying #FunctionalProgramming #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

Day 20/50 – JavaScript Interview Question? Question: What is prototypal inheritance in JavaScript? Simple Answer: Prototypal inheritance is JavaScript's mechanism for objects to inherit properties and methods from other objects through the prototype chain. When you access a property, JavaScript first checks the object itself, then walks up the prototype chain until it finds the property or reaches null. 🧠 Why it matters in real projects: Understanding prototypes is fundamental to JavaScript's object model. It's how classes work under the hood, how built-in methods like Array.prototype.map() are available, and how you can extend native objects or create efficient object hierarchies. 💡 One common mistake: Confusing __proto__ (the actual link) with prototype (the property on constructor functions). Also, modifying built-in prototypes like Array.prototype in production code is considered a bad practice. 📌 Bonus: // Constructor function function Person(name) { this.name = name; } // Add method to prototype (shared by all instances) Person.prototype.greet = function() { return `Hello, I'm ${this.name}`; }; const alice = new Person('Alice'); alice.greet(); // "Hello, I'm Alice" // Prototype chain alice.hasOwnProperty('name'); // true (own property) alice.hasOwnProperty('greet'); // false (inherited) alice.__proto__ === Person.prototype; // true // Modern ES6 class syntax (same prototype underneath) class Employee extends Person { constructor(name, title) { super(name); this.title = title; } } const bob = new Employee('Bob', 'Developer'); console.log(bob.greet()); // Inherits from Person #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #Prototypes #OOP

🚀 JavaScript Interview Prep Series — Day 19 Topic: JavaScript Modules — ESM vs CommonJS Continuing my JavaScript interview preparation journey, today I revised an important modern JS topic: 👉 JavaScript Modules (ESM vs CommonJS) Modules help us organize code, reuse functions, and keep projects maintainable. But in interviews, one common question is: What is the difference between ES Modules and CommonJS? Let’s simplify it. 📚 Real-World Example: Library Borrowing 🟢 ES Modules (Modern Library) Imagine a modern self-service library. You can: Pick only the chapters you need Borrow specific books Load things on demand ✅ Lightweight ✅ Efficient ✅ Future standard This is how ESM imports work. 🟠 CommonJS (Traditional Library) In an old library: You ask for one recipe… But the librarian gives you the entire cookbook set 😅 ❌ Loads whole module ❌ Synchronous ✅ Still widely used in Node.js This is how require() works. 💻 ES Modules Example (Modern) math.js export const add = (a, b) => a + b; export const multiply = (a, b) => a * b; app.js import { add } from "./math.js"; console.log(add(2, 3)); ✅ Static ✅ Tree-shakable ✅ Works in browsers 💻 CommonJS Example (Node.js) math.js const add = (a, b) => a + b; module.exports = { add }; app.js const math = require("./math"); console.log(math.add(2, 3)); 🔥 Key Differences Feature ESM CommonJS Loading Static Runtime ✅ When to Use 👉 Use ESM for modern frontend and new Node projects 👉 Use CommonJS when working with legacy Node codebases 📌 Goal: Share daily JavaScript concepts while preparing for interviews and learning in public. Next topics: Event Delegation deep dive, Memory leaks, and more. Let’s keep learning consistently 🚀 #JavaScript #InterviewPreparation #ESModules #CommonJS #NodeJS #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

Javascript Interview Question ❓ 🧠 JavaScript Call Stack Explained (With Nested Functions) Ever wondered which function runs first when functions are nested in JavaScript? Let’s break it down 👇 function fn1() { function fn2() { function fn3() { console.log("fn3"); } fn3(); console.log("fn2"); } fn2(); console.log("fn1"); } fn1(); 🔍 What actually happens? JavaScript uses a Call Stack to execute functions. 📌 Rule: Call Stack follows LIFO (Last In, First Out) 🪜 Call Stack Flow (Visualized) Copy code fn3() ← executed & finished first fn2() fn1() ← called first, finished last ✔️ fn1 is called first ✔️ fn3 finishes first That’s LIFO in action 🔥 ❌ FIFO vs ✅ LIFO in JavaScript Call Stack ✅ LIFO Event Queue (setTimeout)✅ FIFO Microtask Queue (Promise)✅ FIFO 📌 Golden rule for interviews: Execution stack = LIFO Async queues = FIFO 🎯 Interview One-Liner JavaScript executes functions using a LIFO call stack, while asynchronous callbacks are processed via FIFO queues. If this cleared things up, drop a 👍 If you’ve ever been confused by this — you’re not alone 😄 Follow for JavaScript + Angular internals explained simply 🚀 #JavaScript #FrontendDevelopment #WebDevelopment #CallStack #EventLoop #JSInterview #Angular #Programming #SoftwareEngineering

Day 17 – JavaScript Interview Q&A Series 🚀 Continuing my JavaScript interview learnings – Day Series, focusing on how data is handled in real-world frontend applications. 🔹 Day 17 Topic: Mutability vs Immutability 1️⃣ What is Mutability? Mutability means changing the original object or array directly. 📌 Examples: • push(), pop() • Direct object property assignment 2️⃣ What is Immutability? Immutability means creating a new copy instead of modifying existing data. 📌 Examples: • Spread operator (...) • map, filter, concat 3️⃣ Why is immutability important? • Predictable state updates • Efficient change detection • Easier debugging and time-travel debugging 4️⃣ How does this affect React & Angular? • React relies on reference changes to trigger re-renders • Angular’s OnPush change detection benefits from immutability 5️⃣ Interview takeaway Immutability helps avoid side effects and unexpected UI bugs. 📌 This concept separates beginner vs experienced frontend developers. ➡️ Day 18 coming soon… (JavaScript Design Patterns – Module, Singleton) 🧠⚙️ #JavaScript #Immutability #FrontendDeveloper #InterviewPreparation #Angular #React #LearningInPublic