Debouncing in JavaScript: Delaying Function Execution

Day 26/50 – JavaScript Interview Question? Question: What is currying in JavaScript? Simple Answer: Currying transforms a function that takes multiple arguments into a sequence of functions, each taking a single argument. Instead of add(a, b), you get add(a)(b). 🧠 Why it matters in real projects: Currying enables partial application, function composition, and more reusable code. It's fundamental to functional programming libraries like Ramda and is used in Redux middleware, event handlers, and configuration functions. 💡 One common mistake: Over-currying simple functions where it adds complexity without benefit. Use currying when you need partial application or composition, not everywhere. 📌 Bonus: // Regular function function add(a, b, c) { return a + b + c; } add(1, 2, 3); // 6 // Curried version function curriedAdd(a) { return function(b) { return function(c) { return a + b + c; }; }; } curriedAdd(1)(2)(3); // 6 // Practical use: Partial application const add5 = curriedAdd(5); const add5and10 = add5(10); console.log(add5and10(3)); // 18 // Generic curry function function curry(fn) { return function curried(...args) { if (args.length >= fn.length) { return fn.apply(this, args); } return function(...nextArgs) { return curried.apply(this, [...args, ...nextArgs]); }; }; } // Usage const multiply = (a, b, c) => a * b * c; const curriedMultiply = curry(multiply); curriedMultiply(2)(3)(4); // 24 curriedMultiply(2, 3)(4); // 24 - flexible! #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #FunctionalProgramming #Currying #WebDev #InterviewPrep

Recent javascript interview questions I was interviewed. Though i wasn't selected but it gave me clear picture of the missing gaps. When i retrospect : Idea here is not just understanding the concepts is enough, you need to practice them with examples to stay with them to demonstrate when asked. Most intervewiers start with asking its definition and then a followup to demonstrate with an example problem to be given to you. Also very importantly simulate to build logic under pressurized circumstances (This can be done by keeping consistency in writing atleast 1 or 2 programs everyday to solve from simple to medium complexity problems). You may start with already seeing the solution to program them to 'wet' yourself but over the time start thinking first to build a pseudocode and then gradually uplift to solve problems atleast partially before looking for answers. Key here is : Patience and the practice and I truly mean here after experiencing the rejection under the hot seat. 1.) Event loop test by predicting output below : console.log('1'); console.log('2'); setTimeout(() => { console.log("This message appears after 2 seconds."); }, 0) Promise.resolve(console.log('4')); console.log('5'); 2.) Implement to sort by ID and then by score : const users = [{ id: '3', name: 'Alex', score: '45'}, { id: '4', name: 'Steve', score: '10'}, { id: '1', name: 'John', score: '24'}, { id: '2', name: 'James', score: '45'}]; 3.) write a closure to increment/decrement count in javascript 4.) What is event propagation and delegation, stateless vs stateful Vs Pure components 5.) What are synthetic events , throttling and debouncing 6.) React lifecycle and what is producer and consumer in Context in react 7.) what is CORS 8.) CSS rendering and styling 9.) Different types of Promise with specifically allSettled.

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 3 Topic: JavaScript Event Loop Explained Simply Continuing my daily JavaScript interview brush-up, today I revised one of the most important interview topics: 👉 The JavaScript Event Loop This concept explains how JavaScript handles asynchronous tasks while still being single-threaded. Let’s break it down with a simple real-world example. 🍽 Real-World Example: Restaurant Kitchen Imagine a busy restaurant kitchen. 👨🍳 Chef = Call Stack The chef cooks one order at a time. 🧾 Order Board = Task Queue New orders are pinned and wait their turn. 🏃 Runner/Manager = Event Loop Checks if the chef is free and gives the next order. If cooking takes time, the chef doesn’t stand idle. Instead: Other quick tasks continue, Completed orders are delivered later. This keeps the kitchen efficient. JavaScript works the same way. 💻 JavaScript Example console.log("Start"); setTimeout(() => { console.log("Timer finished"); }, 2000); console.log("End"); Output: Start End Timer finished Why? 1️⃣ "Start" runs immediately. 2️⃣ Timer is sent to Web APIs. 3️⃣ "End" runs without waiting. 4️⃣ After 2 seconds, callback goes to queue. 5️⃣ Event Loop pushes it to stack when free. ✅ Why Event Loop Matters in Interviews Understanding it helps explain: • setTimeout behavior • Promises & async/await • Non-blocking JavaScript • UI responsiveness • Callback & microtask queues 📌 Goal: Revise JavaScript daily and share learnings while preparing for interviews. Next topics: Promises, Async/Await, Execution Context, Hoisting, and more. Let’s keep learning in public 🚀 #JavaScript #InterviewPrep #EventLoop #WebDevelopment #Frontend #LearningInPublic #Developers #CodingJourney #AsyncJavaScript

🚀 JavaScript Interview Prep Series — Day 18 Topic: Type Coercion in JavaScript (Implicit vs Explicit) Continuing my JavaScript interview revision journey, today I revisited one of the most confusing but commonly asked topics: 👉 Type Coercion JavaScript is loosely typed, which means it sometimes automatically converts types — and that can surprise you in interviews. ✈️ Real-World Example: Currency Converter Imagine you’re at an airport currency exchange. 🟡 Implicit Coercion (Automatic) You insert dollars into an automatic machine, and it silently converts to euros. You didn’t ask — it just happened. JavaScript sometimes does the same. 🔵 Explicit Coercion (Manual) You go to the teller and say: “Please convert this to euros.” Now the conversion is intentional and clear. 🔴 Unexpected Behavior Sometimes a weird converter gives a strange result 😅 That’s how JavaScript coercion bugs happen. 💻 Implicit Coercion Examples 5 + "5" // "55" (number → string) "10" - 5 // 5 (string → number) "5" * "2" // 10 (both → number) true + true // 2 👉 Rule of thumb: + prefers strings, other math operators prefer numbers 💻 Explicit Coercion Examples String(123) // "123" Number("456") // 456 Boolean(1) // true parseInt("42") // 42 This is the safe and recommended approach. ⚠️ Tricky Interview Questions [] + [] // "" [] + {} // "[object Object]" "5" + 3 + 2 // "532" 3 + 2 + "5" // "55" "2" == 2 // true "2" === 2 // false ✅ Golden Rules ✔ JavaScript may convert types automatically ✔ == allows coercion ✔ === prevents coercion (recommended) ✔ Be careful with + operator ✔ Prefer explicit conversion in production code ✅ Why Interviewers Ask This Because it tests: • Deep JS understanding • Edge case awareness • Debugging ability • Clean coding habits 📌 Goal: Share daily JavaScript concepts while preparing for interviews and learning in public. Next topics: Closures deep dive, Event Delegation, Memory leaks, and more. Let’s keep sharpening fundamentals 🚀 #JavaScript #InterviewPreparation #TypeCoercion #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

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

🚀 JavaScript Interview Prep Series — Day 11 Topic: Debounce, Throttle & Memoization in JavaScript Continuing my JavaScript interview revision journey, today I focused on performance optimization techniques often asked in frontend interviews: 👉 Debounce, Throttle, and Memoization These techniques help improve performance when functions are called frequently. Let’s simplify them with real-world examples. ⏱ Debounce — Wait Until User Stops Imagine an elevator door. If people keep entering, the door keeps reopening and only closes once no one enters anymore. In JavaScript: The function runs only after calls stop for a certain time. Example — Search Input function debounce(fn, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); }; } Used when typing in search bars to avoid firing API calls on every keystroke. 🚗 Throttle — Limit Execution Rate Think of a toll booth allowing one car every few seconds, even if many cars are waiting. In JavaScript: The function runs at fixed intervals, no matter how often triggered. Example — Scroll Event function throttle(fn, limit) { let lastCall = 0; return function (...args) { const now = Date.now(); if (now - lastCall >= limit) { lastCall = now; fn.apply(this, args); } }; } Useful for scroll or resize events. 🧠 Memoization — Cache Results Imagine a librarian remembering your previous book request instead of searching again. In JavaScript: Results are stored and reused for the same inputs. Example function memoize(fn) { const cache = {}; return function (arg) { if (cache[arg]) return cache[arg]; const result = fn(arg); cache[arg] = result; return result; }; } Great for heavy calculations. ✅ Why Interviewers Ask This Because it tests: • Performance optimization knowledge • Event handling understanding • Real-world frontend scenarios • Efficient function execution 📌 Goal: Share JavaScript concepts daily while revising interview topics and learning in public. Next topics: Event Delegation, Hoisting Deep Dive, Execution Context, and more. Let’s keep improving step by step 🚀 #JavaScript #InterviewPreparation #Debounce #Throttle #Memoization #Frontend #WebDevelopment #LearningInPublic #Developers #CodingJourney

🚀 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 Quick Revision Q. What is the difference between localStorage and sessionStorage? Answer: Persistence duration — localStorage persists indefinitely; sessionStorage clears on tab close. Q. What is the difference between document.ready and window.onload? Answer: document.ready triggers when DOM is ready; window.onload when all assets load. Q. What are JavaScript timers? Answer: Functions like setTimeout and setInterval to schedule code execution. Q. What is debouncing? Answer: Technique to limit how often a function is called. Q. What is throttling? Answer: Technique to make sure a function is called at most once per interval. 📘 These are part of my 3000+ JavaScript Interview Questions & Answers book. If you're preparing for frontend interviews, structured revision matters. Comment “JS” if you want the book link.

🚀 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