Debounce vs Throttle in JavaScript: Debouncing vs Throttling Explained

🚀 JavaScript Output Challenge — Can You Guess Them All? Let’s test your core JavaScript knowledge — Event Loop, Closures, Hoisting, and Shallow Copy. 👇 Try to guess the output before running the code. 🧩 Question 1 — Event Loop + Promises + setTimeout console.log(1) const promise = new Promise((resolve) => { console.log(2) resolve() console.log(3) }) console.log(4) promise.then(() => { console.log(5) }).then(() => { console.log(6) }) console.log(7) setTimeout(() => { console.log(8) }, 10) setTimeout(() => { console.log(9) }, 0) 👉 What is the exact order of logs? 🧩 Question 2 — Spread Operator (Shallow Copy) let person = { name: "Ram", age: 29, marks: { math: 21, physics: 25 } } let person2 = { ...person } person2.name = "Shyam" person2.age = 21 person2.marks.math = 50 console.log(person, person2) 👉 Will both objects change or only person2? 🧩 Question 3 — Closure Inside Loop function test(arr, x) { var a, c = 0; for (var i = 0; i < arr.length; i++) { if (i === x) { a = function () { console.log(i, c++) } } } return a; } var t = test([1,2,3,4,5,6,7,8,9], 5) t(); t(); t(); 👉 What gets printed each time and why? 🧩 Question 4 — Hoisting + Scope Confusion var a = 10; var b = 100; function test() { a = 30; var a; console.log(a); b = 200; console.log(b); b = 300; } test(); console.log(a); console.log(b); 👉 What are the final values of a and b? 💬 Drop your answers in the comments (no cheating 😄). I’ll share detailed explanations in the next post! #JavaScript #FrontendDevelopment #WebDevelopment #InterviewPrep #JSChallenge #100DaysOfCode

Day 71 – Deep Dive into JavaScript Functions & Advanced Concepts Today I explored one of the most powerful building blocks in JavaScript — Functions. Functions help us write reusable, modular, and organized code. But today wasn’t just about basic functions — I went deeper into advanced function concepts. 🔹 Function Declaration Created using the function keyword: function add(a, b){ return a + b; } ✔️ Hoisted ✔️ Can be called before declaration ✔️ Globally accessible 🔹 Function Expression (Anonymous Function) const xs = function(){ console.log("Suha Digitech"); } ✔️ Assigned to a variable ✔️ Not hoisted like normal functions ✔️ Cannot call before definition 🔹 Constructor Function const sum = new Function("a", "b", "return a + b"); ✔️ Created using new Function() ✔️ Executes in a single line ✔️ Parameters passed as strings 🔹 Function Scope 🔸 Global Scope – Accessible everywhere 🔸 Local Scope – Accessible only inside the function Understanding scope prevents unexpected errors and improves code structure. 🔹 Rest Parameters function add(a, ...b){ return b; } ✔️ Collects remaining arguments into an array ✔️ Useful for handling dynamic inputs 🔹 Default Parameters function add(a, b = 10){ return a + b; } ✔️ Uses default value if argument not passed 🔹 Callback Function Passing one function as an argument to another: function display(value){ return value; } display(add(10, 30)); ✔️ Enables reusable and flexible logic ✔️ Core concept for async programming 🔹 Arrow Functions const add = (a, b) => a + b; ✔️ Short syntax ✔️ Clean and modern ✔️ Implicit return for single-line expressions 🔹 Higher Order Functions 🔸 map() Returns a new array after transforming every element. 🔸 filter() Returns elements that satisfy a condition. 🔸 reduce() Reduces the array into a single value. These are powerful tools for writing clean and functional-style JavaScript. 🔹 Objects & this Keyword Created object methods and understood how this refers to the current object. var obj = { fname: "Suha", lname: "Digitech", fullName: function(){ return this.fname + " " + this.lname; } } 🔹 call() & bind() Methods ✔️ call() – Immediately invokes a function with a different object context ✔️ bind() – Creates a new function with bound context These concepts helped me understand how JavaScript handles execution context internally. 💡 Key Takeaway: Functions are not just reusable blocks — they are the backbone of advanced JavaScript concepts like callbacks, higher-order functions, and object-oriented behavior. #JavaScript #WebDevelopment #FrontendDevelopment #Programming #FunctionalProgramming

🚀 Day 17 of JavaScript Daily Series JavaScript Events — click, input, change, keyup (Super Easy Hinglish + Real-Life Web Examples) Aaj hum JavaScript ka woh topic seekhenge jo websites ko truly interactive banata hai: 👉 Events Buttons click hona, input type karna, dropdown change hona, search bar me typing — yeh sab EVENTS ki wajah se possible hota hai. 💡 What Are Events? (Simple English) Events are actions that happen on a webpage. Examples: ✔ User clicks a button ✔ User types in a textbox ✔ User changes a dropdown ✔ User presses a key ✔ Mouse moves JavaScript can listen to these events and respond to them. 🧠 Hinglish Explanation Socho website ek shop hai. Customer koi bhi action kare → click, bolna, dekhna, move hona… Shopkeeper (JavaScript) turant react karta hai. “Click kiya? Chalo button ka color badal deta hoon.” “Typing shuru? Chalo search results dikhata hoon.” Today’s 4 Most Important Events 1️⃣ click 2️⃣ input 3️⃣ change 4️⃣ keyup 1️⃣ click Event — Jab User Button/Element Click Kare 📱 Example: Button text change <button id="btn">Login</button> let btn = document.getElementById("btn"); btn.addEventListener("click", function () { btn.innerText = "Logging in..."; }); Real-life use: ✔ Login button ✔ Buy Now button ✔ Like 👍 button 2️⃣ input Event — Jab User Kuch Type Kare 📱 Example: Live search bar <input id="search" placeholder="Search here..." /> <p id="output"></p> let search = document.getElementById("search"); let output = document.getElementById("output"); search.addEventListener("input", () => { output.innerText = `You typed: ${search.value}`; }); Real-life use: ✔ Search bar ✔ Live filters ✔ Form inputs 3️⃣ change Event — Jab Value Change Ho (Dropdown, Checkbox) 📱 Example: Theme selector <select id="theme"> <option value="light">Light</option> <option value="dark">Dark</option> </select> let theme = document.getElementById("theme"); theme.addEventListener("change", () => { console.log(`Theme changed to: ${theme.value}`); }); Real-life use: ✔ Country → State dropdown ✔ Dark/Light mode ✔ Payment method selection 4️⃣ keyup Event — Jab User Key Chhodta Hai 📱 Example: Password strength indicator <input id="pass" placeholder="Enter password" /> <p id="strength"></p> let pass = document.getElementById("pass"); pass.addEventListener("keyup", () => { if (pass.value.length < 6) { strength.innerText = "Weak Password"; } else { strength.innerText = "Strong Password 💪"; } }); Real-life use: ✔ OTP boxes ✔ Password checker ✔ Live validation 🔥 Quick Summary Table EventTriggerReal UseclickButton clickedActions & UI changesinputTypingSearch, formschangeValue changedDropdowns, checkboxeskeyupKey releasedValidation, search 🧠 Why Events Are Important? ✔ Website becomes interactive ✔ Real-time UI updates ✔ Forms validation ✔ Buttons functionality ✔ Every real web app uses events (React/Node bhi!) Without events → Website = Static poster.

#JavaScript Pro Tip: What Does !!window Actually Do? (The Double Negation Deep Dive) Ever seen !! in JavaScript code and wondered what this double exclamation mark sorcery does? Especially when checking DOM properties like !!window or !!document? Let me demystify this common pattern and explain why it's so crucial for robust feature detection and browser fingerprinting. 🔍 The Double Negation (!!) Explained In essence, !! is JavaScript's explicit boolean converter. It takes any value and forces it to true or false. How it works: !!value // Step 1: !value → Returns the logical opposite (true becomes false, false becomes true) // Step 2: !!value → Negates again, giving us the original value's boolean equivalent 💡 Key Insights for DOM Properties For objects that exist: !!window // true (the global object exists) !!document // true (document exists) !!navigator // true (navigator exists) !!document.body // true (if body has loaded) The Critical Distinction: · Exists ≠ Truthy - A property can exist but hold a falsy value · !! checks existence AND truthiness in one operation Property Example Value !! Result Why? window.location Object true Objects are truthy document.getElementById('ghost') null false null is falsy window.innerWidth 0 true ⚠️ Numbers (even 0) are truthy undefinedProperty undefined false Doesn't exist document.all (legacy) HTMLCollection false Famous browser quirk! 🛠 Why This Matters in Real Development 1. Feature Detection (Modern Approach): // Instead of assuming, test for support const hasWebGL = !!window.WebGLRenderingContext; const hasServiceWorker = !!navigator.serviceWorker; const canUseLocalStorage = !!window.localStorage; // Now you can branch safely if (hasWebGL) { // Render 3D graphics } else { // Provide fallback } 2. Building Reliable Browser Fingerprints: Fingerprinters use!! to create consistent binary profiles: const capabilities = { webgl: !!window.WebGLRenderingContext, geolocation: !!navigator.geolocation, touch: !!('ontouchstart' in window), audioContext: !!window.AudioContext }; // Creates: {webgl: true, geolocation: false, touch: true, ...} 3. Safer Than Truthy Checks Alone: // Problematic: if (window.feature) { } // Could fail if feature === 0 or false // Better: if (!!window.feature) { } // Explicit intent: convert THEN check 🎯 The Professional Takeaway !! isn't just syntactic sugar—it's a defensive coding practice that: · Makes boolean conversion explicit (readability matters!) · Creates consistent type coercion across your codebase · Prevents subtle bugs with edge cases (0, empty string, false) · Forms the foundation of reliable feature detection systems Remember: In most cases, if (window.property) works the same as if (!!window.property) because if() implicitly converts to boolean. The !! is useful when you need to store, return, or pass the boolean value explicitly. #JavaScript #Portswigger #CyborgTek

🚀 Day 13 of JavaScript Daily Series JavaScript Strings — slice, substring, toUpperCase, trim (Super Easy Hinglish + Real-Life Examples) Aaj hum JavaScript ke 4 most useful string methods seekhenge. Yeh daily life coding me 100% use hote hain — chahe forms ho, search bars ho, validation ho ya UI formatting. 📝 What is a String? (Simple English Definition) A string is a sequence of characters used to store text like names, messages, sentences, etc. Example: let name = "Ritesh Singh"; 1️⃣ slice() — Cut & Extract Part of the String 🔹 Definition Returns a portion of string from start index to end index (end not included). 🧠 Hinglish Explanation Socho tum movie clip ka ek scene cut karke nikalna chahte ho → yahi slice karta hai. 📱 Real-Life Example Instagram username crop karna: let username = "aapanrasoi_official"; let shortName = username.slice(0, 10); console.log(shortName); // "aapanraso" 2️⃣ substring() — Extract Part of String (Like slice, but safer) 🔹 Definition Works like slice but doesn’t accept negative indexes. 🧠 Hinglish Explanation Slice ka hi shareef version — negative cheezein nahi leta. 😄 📱 Example let text = "JavaScript"; console.log(text.substring(4, 10)); // "Script" 3️⃣ toUpperCase() — Convert to CAPITAL Letters 🔹 Definition Returns the string in uppercase. 🧠 Hinglish Explanation Whatsapp pe aise lagta hai jaise koi chillaa kar message bhej raha ho. 😆 📱 Example let city = "varanasi"; console.log(city.toUpperCase()); // "VARANASI" 4️⃣ trim() — Remove Extra Spaces 🔹 Definition Removes spaces from start and end. 🧠 Hinglish Explanation Form bharte time users extra space daal dete hain, trim unko clean kar deta hai. 📱 Real-Life Example (Form Input Clean) let email = " ritesh@gmail.com "; console.log(email.trim()); // "ritesh@gmail.com" 🔥 Quick Summary Table MethodKaamReal Useslice()Part nikalnaUsername / Title Shortensubstring()Safe extractionWord pickingtoUpperCase()Text ko caps meLabels / Highlightstrim()Extra space hatanaForm inputs 🧠 Why These 4 Methods Matter? ✔ Clean data ✔ Better UI ✔ Faster string manipulation ✔ Interviews me 100% pooch lete hain

🚀 𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲, __𝗽𝗿𝗼𝘁𝗼__, 𝗮𝗻𝗱 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲 𝗜𝗻𝗵𝗲𝗿𝗶𝘁𝗮𝗻𝗰𝗲 𝗶𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 Most JavaScript developers use objects daily… But not everyone truly understands how JavaScript inheritance actually works under the hood. Let’s break it down simply 👇 🔹 𝟭️ 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗽𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲? In JavaScript, every function automatically gets a special property called: 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝗡𝗮𝗺𝗲.𝗽𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲 It is used when we create objects using new. Example: 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗣𝗲𝗿𝘀𝗼𝗻(𝗻𝗮𝗺𝗲) {  𝘁𝗵𝗶𝘀.𝗻𝗮𝗺𝗲 = 𝗻𝗮𝗺𝗲; } 𝗣𝗲𝗿𝘀𝗼𝗻.𝗽𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲.𝘀𝗮𝘆𝗛𝗲𝗹𝗹𝗼 = 𝗳𝘂𝗻𝗰𝘁𝗶𝗼𝗻 () {  𝗰𝗼𝗻𝘀𝗼𝗹𝗲.𝗹𝗼𝗴("𝗛𝗲𝗹𝗹𝗼 " + 𝘁𝗵𝗶𝘀.𝗻𝗮𝗺𝗲); }; 𝗰𝗼𝗻𝘀𝘁 𝘂𝘀𝗲𝗿 = 𝗻𝗲𝘄 𝗣𝗲𝗿𝘀𝗼𝗻("𝗔𝗺𝗮𝗻"); 𝘂𝘀𝗲𝗿.𝘀𝗮𝘆𝗛𝗲𝗹𝗹𝗼(); // 𝗛𝗲𝗹𝗹𝗼 𝗔𝗺𝗮𝗻 Here: sayHello is not copied into every object It is shared via the prototype This saves memory 🔹 𝟮️ 𝗪𝗵𝗮𝘁 𝗶𝘀 __𝗽𝗿𝗼𝘁𝗼__? __proto__ is a reference to an object's parent prototype. console.log(user.__proto__ === Person.prototype);  // true Important: prototype → belongs to functions __proto__ → belongs to objects Think of it like this: function → prototype object → __proto__ 🔹 𝟯️ 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲 𝗖𝗵𝗮𝗶𝗻𝗶𝗻𝗴? When you try to access a property: user.sayHello() JavaScript searches like this: Does user have sayHello? ❌ Check user.__proto__ (Person.prototype) ✅ If not found, go to next prototype Eventually reaches Object.prototype This chain is called: 👉 Prototype Chaining 🔹 𝟰️.𝗪𝗵𝘆 𝗶𝘀 𝘁𝗵𝗶𝘀 𝗣𝗼𝘄𝗲𝗿𝗳𝘂𝗹? Because JavaScript inheritance is: Dynamic Memory efficient Flexible Every object in JavaScript is connected to a prototype. Even this works: [].__proto__ === Array.prototype Everything eventually links to: Object.prototype 🔥 Final Takeaway prototype → used by constructor functions __proto__ → internal link to parent Prototype chaining → how JavaScript finds properties Arrow functions ❌ don’t have prototype 𝗜𝗳 𝘆𝗼𝘂'𝗿𝗲 𝗹𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗱𝗲𝗲𝗽𝗹𝘆, 𝗱𝗼𝗻’𝘁 𝘀𝗸𝗶𝗽 𝗽𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲𝘀. 𝗧𝗵𝗲𝘆 𝗮𝗿𝗲 𝘁𝗵𝗲 𝗳𝗼𝘂𝗻𝗱𝗮𝘁𝗶𝗼𝗻 𝗼𝗳 𝗵𝗼𝘄 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗿𝗲𝗮𝗹𝗹𝘆 𝘄𝗼𝗿𝗸𝘀. 💡 #JavaScript #WebDevelopment #Programming #CodingTips #CareerGrowth #DevCommunity

💛 Debouncing & Throttling in JavaScript — Boost Performance Like a Pro Ever built: 👉 Search input 👉 Scroll animation 👉 Resize handler 👉 Button click spam …and your app suddenly became slow or laggy? 😵 Because events like: ▪️ scroll ▪️ resize ▪️ mousemove ▪️ keyup can fire 100+ times per second. If your API or heavy logic runs each time… 💥 Performance destroyed. That’s where Debouncing & Throttling save the day. ♦️ The Core Problem 🧠 window.addEventListener("scroll", () => { console.log("Scrolling..."); }); Scroll once → fires hundreds of times 😬 👉 Too many function calls 👉 Too many API requests 👉 UI jank We need control. ♦️ 1️⃣ Debouncing ⏳ 📌 Definition 👉 Execute function only after user stops triggering the event Think: “Wait… let them finish first” Example (Search Bar 🔍) searchInput.addEventListener("keyup", debounce(fetchResults, 500)); User types: r → ra → raj → rajk Without debounce: ❌ 4 API calls With debounce: ✅ 1 API call (after typing stops) 🧠 How It Works Every event: 👉 clears previous timer 👉 sets new timer Only last one survives. ✅ Debounce Polyfill function debounce(fn, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay); }; } ✅ Real-World Use Cases ✔️ Search suggestions ✔️ Auto-save ✔️ Form validation ✔️ API calls ✔️ Resize events 👉 “Execute after user stops” ♦️ 2️⃣ Throttling 🚦 📌 Definition 👉 Execute function at most once every X milliseconds Think: “Run regularly, but limit frequency” Example (Scroll Tracking 📜) window.addEventListener("scroll", throttle(updateUI, 200)); Scrolling for 5 seconds: Without throttle: ❌ 1000+ calls With throttle: ✅ ~25 calls 🧠 How It Works 👉 First call runs 👉 Next calls ignored until delay passes ✅ Throttle Polyfill function throttle(fn, limit) { let flag = true; return function (...args) { if (!flag) return; fn.apply(this, args); flag = false; setTimeout(() => { flag = true; }, limit); }; } ✅ Real-World Use Cases ✔️ Infinite scroll ✔️ Scroll animations ✔️ Button spam prevention ✔️ Window resize ✔️ Game controls 👉 “Run at controlled intervals” ♦️ Debounce vs Throttle ⚔️ 👉 Debouncing delays execution until events stop firing 👉 Throttling limits execution to fixed intervals Both: ✔️ Reduce unnecessary calls ✔️ Improve performance ✔️ Prevent UI lag ♦️ Mental Model 🧠 Debounce: “Wait till user is done” Throttle: “Slow down the calls” 🥇 Interview One-Liner Debouncing delays execution until events stop firing, while throttling limits execution to fixed intervals — both help optimize performance for high-frequency events like scroll, resize, and input. If this helped, drop a 💛 or share 🔁 Next deep dive 👉 ( Event Propagation ) - Bubbling, Capturing, and Deligation #JavaScript #JSInternals #LearnJavaScript #WebDevelopment  #ProgrammingConcepts #WebDevJourney #BuildInPublic

What is result of [] === [] in javascript ? If you can’t answer this, your React apps are likely re-rendering way more than they should. In JavaScript and TypeScript, the answer is false. But why? Understanding this is the key to mastering performance and avoiding those "phantom" bugs in useEffect. 🏠 The "Two Houses" Analogy Imagine two houses. They have the exact same floor plan, the same paint color, and the same furniture. * Are they the same style? Yes. * Are they the same address? No. In JavaScript, Objects, Arrays, and Functions are Reference Types. When you create [], you aren't just creating a value; you are allocating a specific spot in memory (an address). * The first [] lives at Address A. * The second [] lives at Address B. When you use ===, JavaScript doesn't look at the "furniture" inside the array. It asks: "Are these two pointing to the exact same address?" Since Address A is not Address B, the result is false. ⚠️ Why this is a "React Killer" React uses Shallow Comparison to decide if it should re-render or trigger an effect. If you define an object or array inside your component body like this: useEffect(() => { // This runs on EVERY single render! console.log("Data fetched"); }, [ { id: 1 } ]); // ❌ New object = New reference every time Even though the ID is always 1, React sees a new address every time the component functions runs. It thinks the data has changed, so it triggers the effect again. And again. And again. ✅ How to fix it To keep your app fast, you need to preserve the Reference: * Move it outside: If the data is static, define it outside the component. * useMemo: Wrap objects/arrays in useMemo to keep the same memory address between renders. * useCallback: Use this for functions to prevent them from being "re-created" on every render. The Golden Rule: In React, it's not just about what the data is, it's about where it lives in memory. Have you ever spent hours debugging a useEffect loop only to realize it was a reference issue? Let’s talk about it in the comments! 👇 w3schools.com JavaScript Mastery #JavaScript #TypeScript #ReactJS #WebDevelopment #FrontendEngineering #CodingTips #PerformanceOptimization