JavaScript this Keyword Behavior in setTimeout

🧩 JavaScript Output-Based Question (this + setTimeout) ❓ What will be the output? 👉 Comment your answer below (Don’t run the code ❌) Output: undefined 🧠 Why this output comes? (Step-by-Step) 1️⃣ print() is called as a method obj.print(); So inside print, this correctly refers to obj. 2️⃣ But inside setTimeout… setTimeout(function () { console.log(this.name); }, 0); The callback is a regular function, not a method of obj. When it executes: • this does NOT refer to obj • In non-strict mode → this points to the global object • In strict mode → this is undefined Either way: this.name → undefined 3️⃣ The key mistake ❌ Assuming this is preserved automatically in async callbacks 🔑 Key Takeaways ✔️ this depends on how a function is called ✔️ setTimeout callbacks lose object context ✔️ Use arrow functions or .bind() to fix this ✔️ This bug appears frequently in real projects #JavaScript #ThisKeyword #AsyncJavaScript #setTimeout #InterviewQuestions #FrontendDeveloper #MERNStack #ReactJS

JavaScript Output-Based Question (this + setTimeout) What will be the output? Comment your answer below (Don’t run the code) Output: undefined Why this output comes? (Step-by-Step) print() is called as a method. So inside print, this correctly refers to obj. But inside setTimeout… The callback is a regular function, not a method of obj. When it executes: • this does NOT refer to obj • In non-strict mode → this points to the global object • In strict mode → this is undefined Either way: this.name → undefined The key mistake Assuming this is preserved automatically in async callbacks. Key Takeaways ✔ this depends on how a function is called ✔ setTimeout callbacks lose object context ✔ Use arrow functions or bind to fix this ✔ This bug appears frequently in real projects Async code doesn’t preserve this by default. How would you fix this so it prints "JS"? Drop your solution in comments #JavaScript #ThisKeyword #InterviewQuestions #FrontendDeveloper #MERNStack

Ever wondered how JavaScript remembers variables even after a function has finished execution? It's The magic of Closure.  A closure gives a function access to its outer scope. In JavaScript, closures are created every time a function is created, at function creation time. Example: function outer() {  let count = 0;  return function inner() {   count++;   console.log(count);  }; } const counter = outer(); counter(); Result => 1 counter(); Result => 2 counter(); Result => 3 Explanation: Inner function remembers count from outer. Every time you call counter(), it retains the previous value. Usefulness of Closure: => Data encapsulation (private variables) => Memoization / caching => Event handlers & async callbacks Do you use closures in your projects? Share your use case below! #JavaScript #WebDevelopment #Closures #ReactJS #NexjJS #MERNStack #CodingTips

JavaScript Output-Based Question What will be logged (line by line)? Comment your answer in order (Don’t run the code) Correct Output: 10 2 undefined undefined Why this output comes? (Step-by-Step) Global scope a = 5; Creates a global variable a.. obj.printA(); • Called as a method of obj • this → obj • this.a → 10 fn(); const fn = obj.printA; fn(); • Function is called without context • this → global object (non-strict mode) • a = 2 updates the global variable a • this.a → 2 obj.printA.call(this); • this explicitly set to global context • But this.a is not a property lookup here • Result → undefined obj.printA.bind(this)(); • bind permanently binds this to global • this.a still doesn’t exist as an object property • Result → undefined Key Takeaways ✔ this depends on how a function is called ✔ Variable assignment ≠ object property ✔ Extracting a method loses its context ✔ call sets this temporarily ✔ bind sets this permanently One wrong assumption about this can break production code. #JavaScript #ThisKeyword #CallBindApply #InterviewQuestions #FrontendDeveloper #MERNStack

🔥 JavaScript Output-Based Question What will be the output of the above code? 👉 Comment your answer below (Don’t run the code ❌) Output: 1 2 1 3 🧠 Why this output comes? (Step-by-Step Explanation) This example is all about JavaScript closures. 1️⃣ Each function call creates a new closure Counter1 and Counter2 are created by separate executions. Each execution creates its own count variable in memory. Internally: Counter1 → count = 0 Counter2 → count = 0 (completely independent) 2️⃣ Execution flow First call of Counter1 → count becomes 1 → prints 1 Second call of Counter1 → count becomes 2 → prints 2 First call of Counter2 → separate closure → count becomes 1 → prints 1 Third call of Counter1 → back to first closure → count becomes 3 → prints 3 #JavaScript #Closures #FrontendDeveloper #MERNStack #ReactJS #InterviewQuestions

JavaScript Event Loop – Simple Explanation JavaScript is single-threaded. It can do only one task at a time. So how does it handle async tasks like: setTimeout fetch Promises 👉 Answer: Event Loop 🧠 Step by Step: 1️⃣ Synchronous code runs in the Call Stack 2️⃣ Async tasks go to Web APIs 3️⃣ When completed: Promises → Microtask Queue (High Priority) setTimeout → Callback Queue (Low Priority) 4️⃣ Event Loop checks: If Call Stack is empty → First runs Microtasks → Then runs Callback tasks Example: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); ✅ Output: Start End Promise Timeout Because Promises run before setTimeout 🔥 Understanding Event Loop = Strong JavaScript foundation 💪 #JavaScript #Frontend #ReactJS #WebDevelopment #CodingInterview

✨ Shallow Copy vs Deep Copy in JavaScript In today’s post, I’ve explained the difference between shallow copy and deep copy in JavaScript in a simple, practical, and easy-to-understand way. This is one of those concepts that quietly causes bugs if not understood properly, especially while working with objects and arrays. If you’ve ever faced unexpected mutations in your code, this post will help you understand why it happens and how to avoid it. 👇 Which one confused you more when you first learned — shallow copy or deep copy? Follow Muhammad Nouman for more useful content #learningoftheday #900daysofcodingchallenge #FrontendDevelopment #WebDevelopment #JavaScript #React #CodingCommunity

𝗪𝗲𝗹𝗰𝗼𝗺𝗲 𝘁𝗼 𝗗𝗮𝘆 𝟴 Have you ever seen JavaScript behave correctly… but still give the wrong output? 🤔 𝘉𝘦𝘧𝘰𝘳𝘦 𝘴𝘤𝘳𝘰𝘭𝘭𝘪𝘯𝘨, 𝘨𝘶𝘦𝘴𝘴 𝘵𝘩𝘦 𝘰𝘶𝘵𝘱𝘶𝘵 𝘰𝘧 𝘵𝘩𝘪𝘴 𝘴𝘪𝘮𝘱𝘭𝘦 𝘤𝘰𝘥𝘦 𝚏𝚘𝚛 (𝚟𝚊𝚛 𝚒 = 𝟷; 𝚒 <= 𝟹; 𝚒++) {  𝚜𝚎𝚝𝚃𝚒𝚖𝚎𝚘𝚞𝚝(() => {   𝚌𝚘𝚗𝚜𝚘𝚕𝚎．𝚕𝚘𝚐(𝚒);  }, 𝟷𝟶𝟶𝟶); } 𝗘𝘅𝗽𝗹𝗲𝗰𝘁𝗲𝗱 1, 2, 3 𝗔𝗰𝘁𝘂𝗮𝗹𝗹𝘆 𝗿𝗲𝘀𝘂𝗹𝘁 4,4,4 𝗧𝗵𝗶𝘀 𝗶𝘀 𝗮 𝗰𝗹𝗼𝘀𝘂𝗿𝗲 𝗯𝘂𝗴 — 𝗼𝗻𝗲 𝗼𝗳 𝘁𝗵𝗲 𝗺𝗼𝘀𝘁 𝗰𝗼𝗺𝗺𝗼𝗻 (𝗮𝗻𝗱 𝗰𝗼𝗻𝗳𝘂𝘀𝗶𝗻𝗴) 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗽𝗶𝘁𝗳𝗮𝗹𝗹𝘀. 𝗪𝗵𝘆 𝗧𝗵𝗶𝘀 𝗛𝗮𝗽𝗽𝗲𝗻𝘀 • var is function-scoped • setTimeout creates a closure • All callbacks reference the same variable i • When they execute, the loop has already finished Closures don’t capture values — they capture references. 𝗧𝗵𝗲 𝗙𝗶𝘅 𝚏𝚘𝚛 (𝚕𝚎𝚝 𝚒 = 𝟷; 𝚒 <= 𝟹; 𝚒++) {  𝚜𝚎𝚝𝚃𝚒𝚖𝚎𝚘𝚞𝚝(() => {   𝚌𝚘𝚗𝚜𝚘𝚕𝚎．𝚕𝚘𝚐(𝚒);  }, 𝟷𝟶𝟶𝟶); } 𝗪𝗵𝘆 𝘁𝗵𝗶𝘀 𝘄𝗼𝗿𝗸𝘀: • let is block-scoped • Each iteration gets its own binding • Each closure remembers a different i 𝗬𝗼𝘂’𝗹𝗹 𝘀𝗲𝗲 𝘁𝗵𝗶𝘀 𝗽𝗮𝘁𝘁𝗲𝗿𝗻 𝗶𝗻: • Event handlers • Async loops • API callbacks • Timers • React effects If you don’t understand closures, You don’t see the bug — you just debug longer. #JavaScript #JSFundamentals #Closures #FrontendDevelopment #WebDevelopment #BugFixing #ReactJS #LearningInPublic