setTimeout, setInterval, requestAnimationFrame: Key differences and use cases

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

Day-16 🔥 20 JavaScript questions asked before EVERY Angular interview — how many can you answer? 👇 1️⃣ What is the difference between var, let and const? 2️⃣ What is hoisting in JavaScript? 3️⃣ Explain closures with a real example 4️⃣ What is the difference between == and ===? 5️⃣ What is event bubbling and event capturing? 6️⃣ What is the difference between call, apply and bind? 7️⃣ What are arrow functions and how are they different from regular functions? 8️⃣ What is a pure function? 9️⃣ Explain higher order functions with example 🔟 What is the difference between synchronous and asynchronous code? Advanced Concepts: 1️⃣1️⃣ What is a Promise? How is it different from a callback? 1️⃣2️⃣ What is async/await and how does it work internally? 1️⃣3️⃣ What is the event loop in JavaScript? 1️⃣4️⃣ What is prototypal inheritance? 1️⃣5️⃣ Difference between shallow copy and deep copy? 1️⃣6️⃣ What are JavaScript Modules? (import/export) 1️⃣7️⃣ What is destructuring in JavaScript? 1️⃣8️⃣ What is the spread operator vs rest operator? 1️⃣9️⃣ What are template literals? 2️⃣0️⃣ What is optional chaining (?.) and nullish coalescing (??)? Reply in comments: 👍Which Question you can explain confidently in an interview? ♻️ Repost this to help fellow Angular developers prepare better. 🔔 Follow for more Angular + JavaScript interview content every week. #Angular #Javascript #WebDevelopment #InterviewPrep #FrontendDeveloper #AngularDeveloper #JavaScriptInterview #SoftwareEngineering #TechInterview #CodingInterview

💡 One of the Most Asked JavaScript Closure Questions in Interviews Closures are one of the most frequently tested concepts in JavaScript interviews. A classic output-based question looks like this: function createFunctions() { var arr = []; for (var i = 0; i < 3; i++) { arr.push(function () { console.log(i); }); } return arr; } const functions = createFunctions(); functions[0](); functions[1](); functions[2](); ❓ What will be the output? 3 3 3 🤔 Why does this happen? Because of closures. Each function inside the array does not capture the value of i. Instead, it captures the reference to the same variable i. By the time the functions are executed, the loop has already finished and i becomes 3. So every function prints: 3 ✅ How to fix it? Use let instead of var: for (let i = 0; i < 3; i++) { arr.push(function () { console.log(i); }); } Now the output will be: 0 1 2 Because let creates a new block-scoped variable for each iteration. 📌 Interview Tip Whenever closures are used inside loops: • var → Same variable shared • let → New variable per iteration Understanding this difference can help you solve many tricky JavaScript interview questions. 💬 Quick challenge: Without using let, how would you modify the code to print 0 1 2? Comment your solution 👇 #JavaScript #FrontendDevelopment #WebDevelopment #Closures #JavaScriptInterview

🚀 JavaScript Interview Question That Confuses 80% Developers Think you truly understand JavaScript’s async behavior? Let’s test it 👇 console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); 👉 What will be the output? Most developers answer: Start Timeout Promise End ❌ That’s WRONG. ✅ Correct Output: Start End Promise Timeout 💡 Why Does This Happen? This happens because of how the Event Loop works in JavaScript. Promise.then() → goes to the Microtask Queue setTimeout() → goes to the Macrotask Queue After the Call Stack is empty → Microtasks run first Then Macrotasks execute Understanding this difference is crucial for writing predictable asynchronous code. 📌 If You’re Preparing for Frontend Interviews, Master These: ✔ Event Loop & Execution Context ✔ Closures ✔ Hoisting ✔ Debouncing vs Throttling ✔ Shallow Copy vs Deep Copy ✔ Async/Await vs Promises ✔ Call, Apply, Bind ✔ This keyword behavior These are frequently asked in React, Next.js and modern JavaScript interviews. Drop your answer in the comments before checking the solution 👇 And share one tricky JS question you’ve faced recently! #JavaScript #FrontendDeveloper #WebDevelopment #ReactJS #NextJS #InterviewPreparation #CodingInterview #SoftwareDeveloper #TechCareers #Programming #100DaysOfCode

🚀 20 Advanced JavaScript Interview Questions Every Developer Should Know If you're preparing for interviews or want to test your JavaScript depth, try answering these without Googling. Let’s see how many you get right 👇 1️⃣ What is the difference between shallow copy and deep copy in JavaScript? 2️⃣ How does the JavaScript event loop work? 3️⃣ What is a closure, and how is it useful in real-world applications? 4️⃣ What is the difference between call(), apply(), and bind()? 5️⃣ What is currying in JavaScript? 6️⃣ What is the difference between Promise.all(), Promise.allSettled(), Promise.race(), and Promise.any()? 7️⃣ What is hoisting in JavaScript, and how does it affect var, let, and const? 8️⃣ What is the difference between microtasks and macrotasks in the event loop? 9️⃣ What are prototypes and the prototype chain in JavaScript? 🔟 What is debouncing vs throttling, and when should each be used? 1️⃣1️⃣ What is the difference between null and undefined? 1️⃣2️⃣ What is type coercion in JavaScript? 1️⃣3️⃣ What are pure functions in JavaScript? 1️⃣4️⃣ What is the difference between synchronous and asynchronous JavaScript? 1️⃣5️⃣ What is the difference between map(), filter(), and reduce()? 1️⃣6️⃣ What is the difference between Object.freeze() and Object.seal()? 1️⃣7️⃣ What are generators in JavaScript? 1️⃣8️⃣ What is the difference between ES Modules and CommonJS? 1️⃣9️⃣ What is memoization in JavaScript? 2️⃣0️⃣ How does garbage collection work in JavaScript? #javascript #webdevelopment #frontend #coding #softwareengineering #developers

You can't crack Frontend Interview without these JavaScript topics -> 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀: variables, data types, operators. -> 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀: scope, closures, and the this keyword. -> 𝗘𝗦6 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀: arrow functions, destructuring, spread/rest, template literals. -> 𝗔𝘀𝘆𝗻𝗰 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁: promises and async/await. -> 𝗗𝗢𝗠 𝗠𝗮𝗻𝗶𝗽𝘂𝗹𝗮𝘁𝗶𝗼𝗻: working effectively with the Document Object Model. -> 𝗘𝘃𝗲𝗻𝘁 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴: listeners, delegation, event object. -> 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲𝘀 & 𝗖𝗹𝗮𝘀𝘀𝗲𝘀: prototypal inheritance and ES6 classes. -> 𝗖𝗹𝗼𝘀𝘂𝗿𝗲𝘀: an essential and frequently tested concept. -> 𝗠𝗼𝗱𝘂𝗹𝗲 𝗦𝘆𝘀𝘁𝗲𝗺𝘀: CommonJS, AMD, ES6 modules. -> 𝗔𝗝𝗔𝗫 & 𝗙𝗲𝘁𝗰𝗵 𝗔𝗣𝗜: making asynchronous HTTP requests. -> 𝗗𝗲𝘀𝗶𝗴𝗻 𝗣𝗮𝘁𝘁𝗲𝗿𝗻𝘀: Singleton, Observer, Module. -> 𝗝𝗦𝗢𝗡: parsing and stringifying data. -> 𝗘𝗿𝗿𝗼𝗿 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴: using try…catch effectively. -> 𝗗𝗮𝘁𝗮 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲𝘀: arrays, objects, maps, sets. -> 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝗮𝗹 𝗣𝗿𝗼𝗴𝗿𝗮𝗺𝗺𝗶𝗻𝗴: map, filter, reduce. -> 𝗕𝘂𝗶𝗹𝗱 𝗧𝗼𝗼𝗹𝘀: Webpack, Babel. -> 𝗧𝗲𝘀𝘁𝗶𝗻𝗴: Jest, Mocha, or similar frameworks. -> 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴: mastering browser developer tools. -> 𝗖𝗼𝗱𝗲 𝗤𝘂𝗮𝗹𝗶𝘁𝘆: ESLint and clean coding practices. -> 𝗦𝗲𝗰𝘂𝗿𝗶𝘁𝘆: XSS, CSRF, and other common vulnerabilities. -> 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 & 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁: handling async code with confidence. -> 𝗠𝗼𝗱𝗲𝗿𝗻 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀: React, Angular, or Vue. -> 𝗔𝗣𝗜𝘀: integrating external APIs. -> 𝗗𝗼𝗰𝘂𝗺𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻: writing clear and maintainable docs. -> 𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗶𝗼𝗻: task runners like Gulp, Grunt. -> 𝗣𝗪𝗔𝘀: service workers and offline-first concepts. -> 𝗪𝗲𝗯 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲: writing optimized, efficient code. If you’re preparing for frontend interviews, JavaScript is non-negotiable.

You Can’t Crack a Frontend Interview Without Mastering These JavaScript Topics Everyone says they “know JavaScript.” But interviews don’t test familiarity. They test clarity under pressure. Here’s what you must truly understand (not just recognize): → 𝗙𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀: variables, data types, operators → 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝘀: scope, closures, this keyword → 𝗘𝗦6+: arrow functions, destructuring, spread/rest, modules → 𝗔𝘀𝘆𝗻𝗰 𝗝𝗦: promises, async/await, event loop → 𝗗𝗢𝗠 𝗠𝗮𝗻𝗶𝗽𝘂𝗹𝗮𝘁𝗶𝗼𝗻 & 𝗘𝘃𝗲𝗻𝘁𝘀: delegation, bubbling, capturing → 𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲𝘀 & 𝗖𝗹𝗮𝘀𝘀𝗲𝘀: inheritance model → 𝗗𝗮𝘁𝗮 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲𝘀: arrays, objects, maps, sets → 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝗮𝗹 𝗠𝗲𝘁𝗵𝗼𝗱𝘀: map, filter, reduce → 𝗔𝗝𝗔𝗫 & 𝗙𝗲𝘁𝗰𝗵 𝗔𝗣𝗜 → 𝗘𝗿𝗿𝗼𝗿 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴: try/catch patterns → 𝗠𝗼𝗱𝘂𝗹𝗲 𝗦𝘆𝘀𝘁𝗲𝗺𝘀 → 𝗗𝗲𝘀𝗶𝗴𝗻 𝗣𝗮𝘁𝘁𝗲𝗿𝗻𝘀 → 𝗪𝗲𝗯 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 & 𝗦𝗲𝗰𝘂𝗿𝗶𝘁𝘆 → 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 & 𝗗𝗲𝗯𝘂𝗴𝗴𝗶𝗻𝗴 → 𝗠𝗼𝗱𝗲𝗿𝗻 𝗙𝗿𝗮𝗺𝗲𝘄𝗼𝗿𝗸𝘀: React / Angular / Vue Most people read these topics. Very few can: ✔ Explain clearly ✔ Write clean code ✔ Debug live ✔ Handle edge cases ✔ Optimize performance That difference = Offer Letter. If your preparation is random YouTube hopping… You’re gambling. Frontend interviews reward: • Structured fundamentals • Real implementation practice • Repeated revision • Mock interview pressure JavaScript is not optional. It’s the foundation. If you’re serious about cracking frontend roles, build depth — not just notes. Stay focused. Stay consistent. 🚀 #javascript #frontend #webdevelopment #interviewprep #reactjs #programming #careergrowth

🚀 JavaScript Polyfill: Implementing bind() from Scratch As a Frontend Developer, understanding how JavaScript works internally gives you a serious edge in interviews. One commonly asked question: 👉 “Can you write a polyfill for Function.prototype.bind?” Let’s break it down 👇 🔹 What does bind() do? Returns a new function Permanently binds this to a given object Supports partial application (pre-filling arguments) Works correctly with the new keyword 🔥 Basic Polyfill if (!Function.prototype.myBind) { Function.prototype.myBind = function (context, ...args) { const fn = this; return function (...newArgs) { return fn.apply(context, [...args, ...newArgs]); }; }; } 🚀 Interview-Level Polyfill (Handles new keyword) if (!Function.prototype.myBind) { Function.prototype.myBind = function (context, ...args) { const fn = this; function boundFunction(...newArgs) { // If used with `new` if (this instanceof boundFunction) { return new fn(...args, ...newArgs); } return fn.apply(context, [...args, ...newArgs]); } // Maintain prototype chain boundFunction.prototype = Object.create(fn.prototype); return boundFunction; }; } 🧠 Why This Matters? Most developers know how to use bind() Few understand how to implement it. Interviewers love this question because it tests: ✔️ this behavior ✔️ Prototypes ✔️ Closures ✔️ apply() usage ✔️ Constructor behavior 💡 Pro Tip for Interviews When explaining: “bind returns a new function with permanently bound this. In polyfill, we store original function reference, return a wrapper, control context using apply, and handle constructor case using instanceof.” Clear. Confident. Complete. ✅ If you’re preparing for JavaScript interviews, mastering polyfills like this is a game changer. call() polyfill apply() polyfill debounce() throttle() Which one should I post next? 👇 #JavaScript #Frontend #Angular #WebDevelopment #InterviewPrep #Polyfills #NodeJS #ReactJS

🚀 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 26 Topic: DOM Events in JavaScript (How the Browser Listens & Responds) Continuing my JavaScript interview journey, today I revised a core frontend concept: 👉 DOM Events DOM events are how JavaScript reacts to user actions like clicks, typing, hovering, and form submissions. If you understand events well, you understand how interactive web apps really work. 🔔 Real-World Example: Smart Doorbell Think of a smart doorbell system: 1️⃣ Visitor presses the doorbell button → Event Trigger 2️⃣ Doorbell system detects the press → Browser detects event 3️⃣ Phone inside rings → Event Handler runs In JavaScript terms: Button → Event Target Click → Event Handler function → Response 💻 Basic DOM Event Example // Get the button element const button = document.querySelector(".doorbell"); // Setup event listener button.addEventListener("click", function (event) { alert("Someone is at the door!"); console.log("Button was clicked"); }); Flow User clicks → Browser detects → Handler executes → Response shown 🧠 Key Parts of an Event ✔ Event Target → element where event happens ✔ Event Type → click, submit, keypress, etc. ✔ Event Handler → function that runs ✔ addEventListener → method to attach handler ⚡ Common DOM Events "click" // Mouse click "submit" // Form submit "keypress" // Keyboard input "mouseover" // Mouse hover "change" // Input change "load" // Page loaded 🎯 Why Interviewers Ask This Because events test: • Real DOM understanding • Interactive UI knowledge • Event flow awareness • Practical frontend skills ⚠️ Pro Tips ✅ Always use addEventListener (not inline handlers) ✅ Remove listeners when not needed ✅ Learn event bubbling & capturing (very important!) ✅ Use event delegation for performance 📌 Goal: Share daily JavaScript concepts while preparing for interviews and learning in public. Next topics: Event Bubbling vs Capturing, Event Delegation deep dive, and more. Let’s keep the streak strong 🚀 #JavaScript #InterviewPreparation #DOMEvents #Frontend #WebDevelopment #LearningInPublic #Developers