Promise.all() vs Promise.allSettled() JavaScript Interview Concept

💡 JavaScript IIFE (Immediately Invoked Function Expression) and Interview Classic: The setTimeout + var Trap Ever seen this weird-looking function? 👇 (function() { console.log("Hello World"); })(); 🤔 Looks different, right? 🧠 What is an IIFE? 👉 An IIFE (Immediately Invoked Function Expression) is a function that: ✔️ Is defined ✔️ And executed immediately No need to call it separately! 🔍 How does it work? (function(name) { console.log("Hello " + name); })("Javascript"); 👉 Output: Hello Javascript 🚀 Why do we use IIFE? 🔒 1. Creates a private scope Variables inside it cannot be accessed outside (function() { var secret = "hidden"; })(); ❌ secret is not accessible outside 🌍 2. Avoids global scope pollution Keeps your code clean and prevents conflicts. ⚡ 3. Helps with closures (classic interview use-case) This is one of the most famous questions asked in interviews 👇 for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000); } 🤔 What will be the output? 👉 Most people expect: 0 1 2 3 4 ❌ But the actual output is: 5 5 5 5 5 🧠 What’s happening here? 🔹 var is function-scoped, not block-scoped 🔹 The loop finishes execution first → i becomes 5 🔹 setTimeout runs later (asynchronously) 🔹 All callbacks share the same reference of i 👉 So every console.log prints 5 ✅ How to fix it? 🔹a) Using let (block scope): for (let i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000); } ✔️ Output: 0 1 2 3 4 🔹b) Using Closure (if you must use var): for (var i = 0; i < 5; i++) { (function(i) { setTimeout(() => { console.log(i); }, 1000); })(i); } What is this (function(i) { ... })(i)? 👉 This is an Immediately Invoked Function Expression (IIFE) (It runs immediately after being defined) So for each loop iteration: 🔹A new function is created 🔹It gets its own copy of i as a parameter 👉How closure helps here Inside the loop: First iteration → i = 0 → function runs with i = 0 → setTimeout remembers this i Second iteration → i = 1 → new function with i = 1 → new closure created 👉 This happens for all iterations So instead of sharing one i, we now have 5 different i values stored separately Final result After 1 second: 0 1 2 3 4 ✅ Each setTimeout prints its own preserved value 🔥 Simple analogy Think of it like: ❌ Without closure → 5 people sharing one notebook ✅ With closure → each person gets their own notebook 🚀 Key takeaway 👉 Closures allow functions to remember the variables from their scope 👉 IIFE creates a new scope for each iteration 👉 That’s why this fixes the var problem #JavaScript #CodingInterview #FrontendDevelopment #WebDevelopment #LearnInPublic

🚀 Most commonly asked JavaScript Interview Questions (with Code Snippets) Tired of the same old JS questions? Here are some real-world, scenario-based questions that actually test problem-solving 👇 🔹 1. Debounce vs Throttle (UI Performance) 👉 Scenario: Search input hitting API on every keystroke — how do you optimize? function debounce(fn, delay) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); }; } 🔹 2. Flatten Deeply Nested Array 👉 Scenario: API returns unpredictable nested data function flatten(arr) { return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val) , []); } 🔹 3. Memoization (Performance Optimization) 👉 Scenario: Expensive calculations running repeatedly function memoize(fn) { const cache = {}; return (n) => { if (cache[n]) return cache[n]; return cache[n] = fn(n); }; } 🔹 4. Event Delegation 👉 Scenario: Handling clicks on dynamically added elements document.getElementById("parent").addEventListener("click", (e) => { if (e.target.tagName === "BUTTON") { console.log("Button clicked:", e.target.innerText); } }); 🔹 5. Prevent Multiple API Calls 👉 Scenario: User clicks “Submit” multiple times let isProcessing = false; async function handleSubmit() { if (isProcessing) return; isProcessing = true; await apiCall(); isProcessing = false; } 🔹 6. Deep Clone Object 👉 Scenario: Avoid mutation bugs const clone = structuredClone(obj); 🔹 7. Custom Promise.all 👉 Scenario: Understand async control deeply function myPromiseAll(promises) { return new Promise((resolve, reject) => { let results = []; let count = 0; promises.forEach((p, i) => { Promise.resolve(p) .then(res => { results[i] = res; count++; if (count === promises.length) resolve(results); }) .catch(reject); }); }); } 💡 Pro Tip: Interviewers today focus on real-world scenarios, async handling, and performance optimization — not just syntax. 🔥 If you can explain why and when to use these patterns, you're already ahead of 80% of candidates. #javascript #frontend #webdevelopment #interviewprep #codinginterview #reactjs #nodejs #softwareengineering #careergrowth

Here’s something commonly asked in JavaScript interviews 👇 Shallow vs Deep Copy Shallow Copy Copies only top-level properties. Nested objects are copied by reference, so changes affect the original. 👉 Ways: Object.assign(), spread (...), Array.from() Deep Copy Creates a fully independent copy, including nested objects. A common approach: JSON.parse(JSON.stringify(obj)) ⚠️ Catch with JSON.stringify() It fails for: • functions (removed) • undefined (removed or become null if arr) • Date (becomes string) • NaN / Infinity (become null) • Map, Set, RegExp (structure lost) • circular references (error) ✅ Better approach const newObj = structuredClone(obj) ✔ Handles most cases (Map, Set, Date, circular refs) ❌ Still can’t clone functions 🔥 Advanced: Custom Deep Clone If you also want to handle functions, you need a custom solution: function deepClone(obj) { if (obj === null || typeof obj !== "object") return obj; if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return new RegExp(obj); if (typeof obj === "function") return obj.bind({}); if (Array.isArray(obj)) { return obj.map(item => deepClone(item)); } const cloned = {}; for (let key in obj) { cloned[key] = deepClone(obj[key]); } return cloned; } ⚠️ Note: • Functions are copied by reference (true cloning isn’t really possible) 💡 Takeaway • Use shallow copy for simple cases • Use structuredClone() for most real scenarios • Use custom clone only when you need full control Don't forget to follow Mohit Sharma 🚀 for more. #JavaScript #Frontend #WebDevelopment #InterviewPrep #ReactJS

👉 Solve below o/p based question if u beileve u have good understanding of JS Concepts" 🚨 I’ve appeared for multiple senior full-stack interviews recently, and "this" based quetion are must ask: 🚨 Senior-Level JavaScript Interviews Are NOT About Syntax — They’re About Understanding " .. .... ....... Here are a couple of commonly asked (and often confusing) questions 👇 🧠 Q1: Understanding this and Arrow Functions let obj = { name: "Ravi", fn: function () { console.log(this.name); }, arrFn: function () { (() => { console.log(this.name); })(); }, }; obj.fn(); obj.arrFn(); 💡 Concepts being tested: this binding in regular functions Lexical this in arrow functions Execution context Method invocation vs inner function 👉 Key Insight: Arrow functions don’t have their own this — they inherit it from their surrounding scope. ------------------------------------------------------------------- 🧠 Q2: Classes, Binding, and Function References class Person { age = 20; constructor(name) { this.name = name; this.func = this.func.bind(this); } func() { console.log(this.name); } arrowFunc = () => { console.log(this.name, this.age); }; } const person1 = new Person("Rahul"); person1.func(); person1.arrowFunc(); const copyFn = person1.func; copyFn(); 💡 Concepts being tested: Class fields & initialization Explicit binding using .bind(this) Difference between normal methods vs arrow functions in classes Function reference vs method call How "this" behaves when function is detached Do you really understand this? Can you predict output without running the code? 💬 If you’re preparing for senior roles, don’t just “know” JavaScript — understand its behavior in edge cases. #javascript #frontend #fullstack #webdevelopment #interviewprep #reactjs #nodejs #softwareengineering #codinginterview #jsconcepts

🚀 Browser Storage in JavaScript — Simple to Use, Tricky to Explain in Interviews Saving data in the browser is easy… Explaining when and why to use each option in interviews? That’s where many developers struggle. Let’s make it crystal clear 👇 🔹 1️⃣ sessionStorage • Data is stored per tab/session • Automatically cleared when the tab closes • Not shared across tabs • Size limit ≈ 5MB ✔️ Best for: Temporary data like form steps, session-specific state 🔹 2️⃣ localStorage • Data persists even after browser restart • Shared across tabs (same origin) • Size limit ≈ 5–10MB • Synchronous API ✔️ Best for: User preferences, theme settings, small cached data 🔹 3️⃣ Cookies • Automatically sent with every HTTP request • Very small size (~4KB) • Can have expiry time • Supports HttpOnly & Secure flags ✔️ Best for: Authentication (especially secure tokens via HttpOnly cookies) 🔹 4️⃣ IndexedDB • Stores large, structured data • Asynchronous API (non-blocking) • Supports objects, files, blobs • Much higher storage limits ✔️ Best for: Offline apps, large datasets, complex client-side storage 🎯 Interview-Ready Summary 👉 sessionStorage → per tab, temporary 👉 localStorage → persistent, shared 👉 Cookies → small, sent with requests 👉 IndexedDB → large, structured, async 💡 Key Insight Choosing the right storage is not about syntax… It’s about security, performance, and use-case clarity. That’s exactly what interviewers are looking for. 💬 Which one do you use most in real projects — localStorage or cookies? #JavaScript #FrontendDevelopment #WebDevelopment #BrowserStorage #ReactJS #CodingInterview #FrontendEngineer #WebPerformance 👉 Follow Rahul R Jain for more real interview insights, React fundamentals, and practical frontend engineering content.

𝗧𝗵𝗶𝘀 𝗼𝗻𝗲 𝗳𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗾𝘂𝗲𝘀𝘁𝗶𝗼𝗻 𝗲𝗹𝗶𝗺𝗶𝗻𝗮𝘁𝗲𝘀 𝗺𝗼𝘀𝘁 𝗰𝗮𝗻𝗱𝗶𝗱𝗮𝘁𝗲𝘀…𝗯𝘂𝘁 𝗻𝗼𝘄 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄 𝗵𝗼𝘄 𝘁𝗼 𝘀𝘁𝗮𝘆 𝗶𝗻 𝘁𝗵𝗲 𝗴𝗮𝗺𝗲.... ASKED: "𝗬𝗼𝘂𝗿 𝗮𝗽𝗽 𝘀𝗵𝗶𝗽𝘀 𝟱𝟬𝟬𝗞𝗕 𝗼𝗳 𝗝𝗦 𝘁𝗼 𝗿𝗲𝗻𝗱𝗲𝗿 𝗮 𝗽𝗿𝗼𝗱𝘂𝗰𝘁 𝗹𝗶𝘀𝘁. 𝗛𝗼𝘄 𝘄𝗼𝘂𝗹𝗱 𝘆𝗼𝘂 𝗳𝗶𝘅 𝘁𝗵𝗶𝘀?" Candidate: "Code splitting, lazy loading, tree shaking..." Interviewer: "The list doesn't need interactivity. Just displays data." Candidate: "Um... SSR?" Interviewer: "And the JavaScript bundle?" Silence. That Silence cost them the offer!! 𝗦𝗲𝗿𝘃𝗲𝗿 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 : They're a fundamental architecture shift that lets you render components on the server and send ONLY the output—>no component code to the client. The breakthrough: Non-interactive components don't need JavaScript in the browser at all. 𝗧𝗵𝗲 𝘁𝗵𝗿𝗲𝗲 𝘀𝗺𝗮𝗹𝗹 𝗱𝗲𝘁𝗮𝗶𝗹𝘀 𝘁𝗵𝗮𝘁 𝗯𝗿𝗲𝗮𝗸 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝘀: 𝟭) 𝗦𝗲𝗿𝘃𝗲𝗿 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗡𝗘𝗩𝗘𝗥 𝗿𝗲-𝗿𝗲𝗻𝗱𝗲𝗿 They run once on the server. Send output. Done. No useState. No useEffect. No event handlers. These don't make sense for components that never run in the browser. 𝟮) 𝗬𝗼𝘂 𝗰𝗮𝗻 𝗮𝗰𝗰𝗲𝘀𝘀 𝘁𝗵𝗲 𝗱𝗮𝘁𝗮𝗯𝗮𝘀𝗲 𝗱𝗶𝗿𝗲𝗰𝘁𝗹𝘆 No API routes. No fetch calls. Import your database client and query directly in the component. 𝟯) 𝗦𝗲𝗿𝘃𝗲𝗿 𝗮𝗻𝗱 𝗖𝗹𝗶𝗲𝗻𝘁 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗰𝗼𝗺𝗽𝗼𝘀𝗲 𝘁𝗼𝗴𝗲𝘁𝗵𝗲𝗿 Server Components can render Client Components as children. Client Components CANNOT import Server Components. 𝗧𝗵𝗲 𝗽𝗮𝘁𝘁𝗲𝗿𝗻: Server Component fetches data, renders structure, includes Client Components for interactive pieces. 𝗧𝗵𝗲 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝗶𝗺𝗽𝗮𝗰𝘁 𝗻𝗼𝗯𝗼𝗱𝘆 𝘁𝗮𝗹𝗸𝘀 𝗮𝗯𝗼𝘂𝘁: • 𝗕𝘂𝗻𝗱𝗹𝗲 𝘀𝗶𝘇𝗲: ~800KB → ~150KB (only interactive JS) - ~80% reduction • 𝗧𝗶𝗺𝗲 𝘁𝗼 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲: 3–5s → <1s -Much faster, especially on slow networks • 𝗗𝗮𝘁𝗮 𝗳𝗲𝘁𝗰𝗵𝗶𝗻𝗴: Client → fetch → render Server → render → show instantly -No loading spinners, faster UX 𝗧𝗵𝗲 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄-𝗪𝗶𝗻𝗻𝗶𝗻𝗴 𝗔𝗻𝘀𝘄𝗲𝗿: "I’d make the product list a Server Component since it’s non-interactive. It fetches data directly from the DB and sends only rendered output—no client JS. Interactive parts like ‘Add to Cart’ stay as Client Components. This drastically reduces bundle size and improves load time." 𝗘𝗻𝗱 𝘁𝗵𝗲 𝗶𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝘄𝗶𝘁𝗵 𝟭 𝗰𝗼𝗻𝗰𝗿𝗲𝘁𝗲 𝗲𝘅𝗮𝗺𝗽𝗹𝗲: Blog page with comments: Instead of sending JavaScript for static content like the blog and comments, render them on the server. Only send JS for interactive parts like the comment form and like button. 𝗥𝗲𝘀𝘂𝗹𝘁: ~95% less JS, much faster load, especially on mobile seconds. Mobile users on 3G can actually read your content. 𝗡𝗼𝘄 𝘆𝗼𝘂 𝗸𝗻𝗼𝘄 𝘁𝗵𝗲 𝘀𝗺𝗮𝗹𝗹 𝗱𝗲𝘁𝗮𝗶𝗹𝘀 𝘁𝗵𝗮𝘁 𝗰𝗿𝗲𝗮𝘁𝗲 𝗯𝗶𝗴 𝗽𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲 𝘄𝗶𝗻𝘀! Link in comments 👇

✅ Top 50 Most Asked JavaScript Interview Questions 📌 Save this list — it’s a goldmine for your prep! 1. What is Debouncing in JavaScript? 2. Understanding Promise.all() 3. What is Deep Equal? 4. Understanding Event Emitters 5. What is Array.prototype.reduce()? 6. Simplifying arrays – Flattening 7. Merging data structures 8. Selecting DOM Elements – getElementsByClassName 9. Avoiding redundant computations with memoization? 10. Safer nested property access: get (or optional chaining)? 11. Hoisting in JavaScript? 12. Differences between let, var, and const? 13. Explain the difference between == and === ? 14. Understanding the Event Loop in JavaScript? 15. What is Event Delegation in JavaScript? 16. How does this work in JavaScript? 17. What sets Cookies, sessionStorage, and localStorage apart? 18. How do <script>, <script async>, and <script defer> differ? 19. What's the difference between null, undefined, and undeclared? 20. What's the difference between .call() vs .apply()? 21. How does Function.prototype.bind work? 22. Why use arrow functions in constructors? 23. How does prototypal inheritance work? 24. Differences between: function Person(){}, const person = Person(), and const person = new Person() 25. Function declarations vs. function expressions? 26. What are the different ways to create objects in JavaScript? 27. What is a higher-order function? 28. How do ES2015 classes differ from ES5 constructor functions? 29. What is event bubbling? 30. What is event capturing? 31. How do mouseenter and mouseover differ? 32. What's the difference between synchronous and asynchronous functions? 33. What is AJAX? 34. What are the pros and cons of using AJAX? 35. What are the differences between XMLHttpRequest and fetch()? 36. What are the various data types in JavaScript? 37. How do you iterate over object properties and array items? 38. Benefits of spread syntax vs. rest syntax? 39. Differences between Map vs. plain objects? 40. Differences between Map/Set and WeakMap/WeakSet 41. Practical use cases for arrow functions? 42. What are callback functions in asynchronous operations? 43. What is debouncing and throttling? 44. How does destructuring assignment work? 45. What is function hoisting? 46. How does inheritance work in ES2015 classes? 47. What is lexical scoping? 48. What are scopes in JavaScript? 49. What is the spread operator? 50. How does this work in event handlers? ✅ Go through these, practice, and you’ll be ready for almost any JS interview! Follow Hrithik Garg 🚀 for more. #frontend #interview #opportunity #react #javascript #angular #backend #nodejs

These JavaScript questions show up in almost every frontend interview. Save this. You’ll need it later 👇 ⸻ 🔥 Top 30 JS / Frontend Interview Questions 🧠 Fundamentals 1. Preload, Prefetch, Prerender — difference? 2. Caching strategies in browsers 3. ETag, Cache-Control, DocumentFragment 4. Image optimization (WebP vs PNG vs JPG) 5. What is a Memory Leak? 6. Repaint vs Reflow ⸻ ⚙️ JavaScript Deep Dive 7. Cancel stale API calls (real-world handling) 8. Promise.allSettled — how it works internally 9. Array.sort() — algorithm + tricky outputs 10. Async in JS (Event Loop, microtasks, macrotasks) 11. Closures, Hoisting, Currying 12. Arrow functions, this, new operator edge cases ⸻ 🌐 Browser & Performance 13. Critical Rendering Path (CRP) 14. CRP loading events 15. Render-blocking resources 16. Web Core Vitals + improvements 17. Web Performance Metrics ⸻ 🏗️ Architecture & Design 18. Prototypal vs Classical Inheritance 19. SOLID Principles 20. OOP in JavaScript 21. Webpack build process 22. Multi-device architecture ⸻ 📦 Practical Frontend 23. Semantic HTML 24. srcset in HTML 25. display: none vs visibility: hidden 26. HTTP Headers — why they matter 27. Event Capturing vs Bubbling vs Delegation 28. map vs object in JavaScript 29. Common performance scenarios 30. The new operator — what it really does ⸻ 💡 The pattern I noticed: Most developers know the definitions. Fewer can explain the real impact. Anyone can say: “Closure remembers outer scope.” But strong candidates say: “Here’s how this causes memory leaks in React if misused.” 👉 That’s the difference. ⸻ If this helped you, repost so others can prepare better 🔁 And tell me in comments: Which one would you struggle to explain in an interview? — Sachin Kasana

🚀 JavaScript Interview Questions (Must Know in 2026) Preparing for frontend interviews? Here are top JavaScript questions with clear explanations + examples 👇 🔹 1. What is ECMAScript? ECMAScript (ES) is the standard/specification on which JavaScript is based (ES6, ES7…). 👉 JS = Implementation of ECMAScript 🔹 2. Difference: var vs let vs const var → function scoped, hoisted let → block scoped, re-assignable const → block scoped, NOT re-assignable let a = 10; a = 20; // ✅ const b = 10; b = 20; // ❌ Error 🔹 3. Spread vs Rest vs Default Params Spread → expands values Rest → collects values Default → fallback values const arr = [1,2]; const newArr = [...arr, 3]; // Spread function sum(...nums) { return nums.reduce((a,b)=>a+b); } // Rest function greet(name = "Guest") { return name; } // Default 🔹 4. Deep Copy vs Shallow Copy Shallow → copies reference Deep → copies actual values const obj = {a:1}; const copy = {...obj}; // shallow 🔹 5. Promise, Callback, Async/Await Callback → function passed Promise → handles async cleanly Async/Await → syntactic sugar async function getData() { const res = await fetch(url); return res.json(); } 🔹 6. Promise vs Callback 👉 Callback → messy (callback hell) 👉 Promise → chainable, readable 🔹 7. Event Bubbling vs Capturing Bubbling → child → parent Capturing → parent → child 🔹 8. Higher Order Function Function that takes/returns another function function greet(fn){ fn(); } 🔹 9. Types of Functions Function Declaration Function Expression 🔹 10. Arrow Function Short syntax + no own this const add = (a,b) => a+b; 🔹 11. call vs apply vs bind call → args separately apply → args as array bind → returns new function 🔹 12. Ways to Create an Object Object literal {} Constructor function Class Object.create() 💡 Pro Tip: Don’t just memorize — practice + explain in interviews 🔥 Want to crack frontend interviews faster? I help developers with mock interviews + guidance 👉 Book here: https://lnkd.in/dBmB5zdi⁠� #javascript #frontend #webdevelopment #interviewpreparation #angular #react #coding #100DaysOfCode

❌ You’re NOT failing frontend interviews because of JavaScript… You’re failing because of Machine Coding Rounds. Most developers prepare: ❌ DSA ❌ Theory ❌ Framework questions But when asked to build something real in 60–90 mins… They freeze. Let’s fix that. Here are 30 REAL Frontend Machine Coding Questions asked in interviews 👇 🧠 UI Components (Most Asked) 1. Build a Modal/Popup component (with open/close + outside click) 2. Create a Toast Notification system 3. Build a Dropdown with keyboard navigation 4. Create a Tabs component 5. Build an Accordion (FAQ section) 6. Implement a Tooltip component 7. Create a Star Rating system 8. Build a Carousel/Slider ⚡ Input & Forms 9. Build a Debounced Search Input 10. Create a Form with validation (email/password) 11. Build a Multi-step form (Stepper UI) 12. Implement Autocomplete / Typeahead search 13. Create a File Upload UI with preview 14. Build a Tag Input (like adding skills) 📊 Data Handling UI 15. Build a Paginated Table 16. Implement Infinite Scroll 17. Create a Sortable & Filterable Table 18. Build a Nested Comments UI 19. Implement a Tree View (folder structure) 🎯 Real-world Features 20. Build a Todo App (CRUD + persistence) 21. Create a Kanban Board (Drag & Drop) 22. Build a Chat UI (basic messaging layout) 23. Implement a Theme Switcher (Dark/Light mode) 24. Create a Dashboard UI (charts + cards) 🔥 Advanced / High Signal 25. Build Virtualized List (performance optimization) 26. Implement Undo/Redo functionality 27. Create a Code Editor (basic) 28. Build a Mini Calendar / Date Picker 29. Implement Drag & Drop File Upload 30. Build Resizable Split Panels 💡 Pro Tip: Don’t just watch tutorials… 👉 Practice building these with: - Clean folder structure - Reusable components - Proper state management - Edge cases handling Because interviewers are checking: ✔ Code quality ✔ Thinking approach ✔ UI/UX decisions ✔ Performance awareness If you can build even 15/30 confidently… You’re already ahead of 80% candidates. 💯 Don't forget to like this post and follow Hrithik Garg 🚀 for more :) #frontend #javascript #reactjs #webdevelopment #interviewpreparation