Manas Mishra’s Post

Ever wondered why JavaScript prints output in a specific order, even when async code looks confusing? This visual clearly explains how the JavaScript Event Loop works behind the scenes: 🔹 Key Components • Call Stack – Executes synchronous code • Web APIs – Handles async operations (setTimeout, fetch, DOM events) • Microtask Queue – Promises (then, catch, finally) • Macrotask Queue – Timers (setTimeout, setInterval) • Event Loop – Decides what runs next 🔹 Execution Order Synchronous code runs first Microtasks (Promises) execute next Macrotasks (Timers) run after microtasks That’s why: Start → End → Promise → Timeout Understanding this flow is crucial for JavaScript, React, Node.js, and frontend interviews — and helps avoid real-world bugs related to async behavior. Strong fundamentals = confident debugging. #JavaScript #EventLoop #AsyncJavaScript #Promises #FrontendDevelopment #NodeJS #InterviewPreparation #WebDevelopment

🚀 Debouncing vs Throttling in JavaScript Ever wondered why your API gets called multiple times on scroll, resize, or keypress events? That’s where Debouncing and Throttling save performance 💡 🔹 Debouncing 👉 Executes the function only after the user stops the action 🟢 Best for: Search input (auto-suggestions) Form validation Resize events 🔹 Throttling 👉 Executes the function at regular time intervals 🟢 Best for: Scroll events Window resizing Button click rate limiting 📌 Key Difference ➡️ Debouncing = “Wait until the user stops” ➡️ Throttling = “Execute every X milliseconds” These concepts are must-know for interviews and real-world frontend performance optimization. 💬 Which one do you use more in your projects — Debounce or Throttle? Let’s discuss 👇 #JavaScript #WebDevelopment #FrontendDevelopment #ReactJS #PerformanceOptimization #CodingTips #100DaysOfCode #Developer

JavaScript can be weird sometimes… 😵💫 Ever tried guessing outputs and thought: “Wait… HOW is this even possible?” Here are some JavaScript exceptions that confuse even experienced devs 👇 🧠 Try guessing the output before checking: 1️⃣ [] + [] → "" 2️⃣ [] + {} → "[object Object]" 3️⃣ {} + [] → 0 4️⃣ true + false → 1 5️⃣ null + 1 → 1 JavaScript type coercion can feel magical… until it breaks your logic 😅 If you truly understand why these happen, you’re already ahead of most developers. 👉 If you want a complete list of JavaScript exceptions & tricky output-based questions, Follow me and DM me “JS” — I’ll share them with you 🚀 #JavaScript #FrontendDevelopment #WebDevelopment #JavaScriptTips #LearnJavaScript #CodingLife #DeveloperCommunity #FrontendEngineer

JavaScript didn’t betray you. You just didn’t copy the object the way you thought you did. Shallow copy vs Deep copy in JavaScript Think of it like a shared Google Doc: Shallow copy -You made a shortcut to the doc -Edit one line & everyone sees the change Deep copy -You downloaded your own copy -Edit freely & no one else is affected Same in JavaScript: -Shallow copy copies references -Deep copy copies actual data If you’ve ever changed an object and thought, “Why did this other variable update too?” that’s shallow copy saying hello 👋 #javascript #frontend #reactjs

🟨 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗗𝗮𝘆 𝟰𝟴: 𝗔𝘀𝘆𝗻𝗰 & 𝗔𝘄𝗮𝗶𝘁 (𝗗𝗲𝗲𝗽 𝗯𝘂𝘁 𝗦𝗶𝗺𝗽𝗹𝗲) Some JavaScript operations take time — and async & await help us handle them cleanly. 🔹 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗮𝘀𝘆𝗻𝗰? • async is a keyword used to create an async function • An async function always returns a Promise • Even a normal return value is wrapped inside a Promise async function getData() { return "JavaScript"; } 🔹 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗮𝘄𝗮𝗶𝘁? • await can only be used inside an async function • It pauses the execution of that function only • JavaScript continues running other code const result = await fetch("/api"); 🔹 𝗛𝗼𝘄 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 𝗪𝗼𝗿𝗸𝘀 • Code runs normally until it hits await • Function execution is suspended • Once the Promise resolves, execution continues from the same line 🔹 𝗪𝗵𝘆 𝗪𝗲 𝗨𝘀𝗲 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 • Makes async code look synchronous • Improves readability • Easier error handling with try / catch 🔹 𝗞𝗲𝘆 𝗣𝗼𝗶𝗻𝘁 Async & await do not block JavaScript They only pause the async function — not the event loop. 💬 GitHub link in the comments for examples #JavaScript #Day48 #100DaysOfCode #Frontend

Day 17: Common Confusion Topics (JS) 🚀 Many beginners (and even intermediates) get stuck on the same JS concepts. Let’s clear the fog! 🔍 Commonly Confused Topics 1. var vs let vs const – scope & reassigning 2. == vs === – loose vs strict comparison 3. null vs undefined – intentional vs unassigned 4. Arrow Function vs Normal Function – this behavior 5. map() vs forEach() – return value difference 6. slice() vs splice() – non-mutating vs mutating 7. Synchronous vs Asynchronous JS – blocking vs non-blocking 8. Callback vs Promise vs Async/Await – evolution of async 9.this keyword – context depends on call-site 10. Shallow Copy vs Deep Copy – reference pitfalls. 🧠 Why this matters? Understanding these removes bugs, boosts interview confidence, and makes your code cleaner and predictable. #️⃣ Hashtags #JavaScript #WebDevelopment #FrontendDeveloper #LearningJavaScript #JSConfusion #CodingTips #DeveloperJourney #LinkedInLearning #InterviewPreparation

🚀 Difference Between Synchronous & Asynchronous JavaScript (Explained Simply) Ever wondered why JavaScript sometimes waits… and sometimes doesn’t? In this short video, I explain the difference between Synchronous and Asynchronous JavaScript using a real-life restaurant example 🍽️ — no complex theory, just simple logic. 👉 Synchronous JavaScript “One task at a time. Wait until it finishes.” 👉 Asynchronous JavaScript “Multiple tasks together. No waiting.” If you’re a beginner in JavaScript or preparing for frontend / backend interviews, this concept is a must-know. 📌 Save this for revision 📌 Share with someone learning JavaScript #JavaScript #WebDevelopment #FrontendDevelopment #ProgrammingBasics #LearnJavaScript #Developers #CodingJourney #AsyncJS

🚀 JavaScript Promises — explained simply A Promise represents an asynchronous task in JavaScript. It starts in a Pending state and ends in one of two ways: ✅ Resolved → task completed successfully ❌ Rejected → task failed with an error Promises help us write clean, readable async code and avoid callback hell. ✨ Key methods: then() → handle success catch() → handle errors finally() → runs no matter what Mastering Promises is a must before moving to async/await. Strong fundamentals = strong full-stack developer 💪 Are you comfortable with Promises yet? 👇 #JavaScript #Promises #AsyncJavaScript #WebDevelopment #FrontendDeveloper #FullStackDeveloper #MERN #CodingLife #LearnJavaScript #DeveloperCommunity

⏳ Who Runs First in JavaScript — Promise or Timer? If fetch() and setTimeout() both finish at the same time — which one goes into the call stack first? 🤔 To answer this, let' see how JavaScript actually schedules async work. JavaScript does one thing at a time. When something takes time (API calls, timers, promises), JavaScript delegates the work and continues executing without blocking. So… where does this delegated work go, and how does it come back? 👇 Let's dig more... Call Stack → Executes code one step at a time. Whatever is on top, runs first. Web APIs → Timers (setTimeout, setInterval), fetch, DOM events, console these are not part of JavaScript itself, but are provided by the JS runtime environment (browser / Node). Callback Queue / Microtask Queue → When async work completes: • setTimeout → callback is pushed to Callback Queue • Promises → callback is pushed to Microtask Queue Event Loop → The real hero, its only job is to keep checking: 👉 Is the call stack empty? If yes → move tasks from the queue to the stack (based on priority). What Priority and what about the question? If fetch() (promise) and setTimeout() complete at the same time 👉 Promise callbacks (Microtask Queue) always get priority over timers (Callback Queue). #JavaScript #FrontendDevelopment #WebDevelopment

JavaScript Array Methods Every Developer Must Know Writing clean, readable, and efficient JavaScript becomes much easier when you truly understand array methods. This guide covers essential JavaScript array methods like: 👉 map() 👉 filter() 👉 reduce() 👉 forEach() 👉 find() 👉 some() & every() 👉 sort() …and many more, with real-world use cases and interview-focused explanations. Perfect for: •Frontend Developers •JavaScript Interview Preparation •Daily Revision & Skill Polishing •Beginners to Intermediate Developers If you work with JavaScript daily, this is a must-save resource. 📥 Download and keep it handy for quick reference. #JavaScript #ArrayMethods #JSBasics #FrontendDevelopment