JavaScript bind() vs call() and apply() explained

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

🚀 Day 15 | Mastering this, call(), apply(), and bind() in JavaScript Today, I learned one of the most important and commonly asked JavaScript concepts in interviews: this keyword and function methods call(), apply(), and bind(). 🔹 this keyword In JavaScript, this refers to the object that is currently calling the function. 🔹 call() Used to invoke a function immediately by setting the value of this and passing arguments normally. 🔹 apply() Same as call(), but arguments are passed as an array. 🔹 bind() Does not execute the function immediately. It returns a new function with a fixed this value, which can be called later. Very useful in DOM event handling to preserve context. 📌 Why is this important? These concepts help us control function context, avoid this related bugs, and write cleaner, more predictable JavaScript — especially while working with objects, events, and callbacks. 💡 Feeling more confident with JavaScript internals and one step closer to becoming a better developer! 🚀 #JavaScript #WebDevelopment #LearningJourney #Frontend #Programming #100DaysOfCode #Developer #DOM #InterviewPreparation

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

JavaScript Array Methods — Explained Visually If JavaScript array methods ever felt confusing, this visual will make them click instantly Instead of memorizing definitions, focus on how data actually transforms step by step. 🔹 map() → transforms every element 🔹 filter() → selects matching elements 🔹 find() → returns the first match 🔹 findIndex() → gives the position 🔹 fill() → fills with a static value 🔹 some() → checks if any element matches 🔹 every() → checks if all elements match Why this matters: Understanding array methods is essential for: ✅ Writing clean JavaScript ✅ Cracking frontend interviews ✅ Working with React & modern JS Save this post for quick revision before coding 📌 #JavaScript #ArrayMethods #WebDevelopment #Frontend #Coding #DSA #LearnJavaScript #ProgrammingBasics

✨ 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

One of the most common JavaScript interview questions that catches many beginners off guard! 👇 The Question: What will be the output? for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } The Expected Output: 0, 1, 2 The Actual Output: 3, 3, 3 Why does this happen? 🤔 1️⃣ Scope Issue: The keyword var is function-scoped. This means all the setTimeout callbacks are pointing to the same variable i. 2️⃣ The Delay: By the time the first setTimeout executes (after 100ms), the loop has already finished, and the value of i has become 3. The Fix: Use let 💡 Simply changing var to let solves the problem: ✔️ for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } Output: 0, 1, 2 Why? Unlike var, let is block-scoped. In every iteration of the loop, a new binding is created for i. Each setTimeout "remembers" its own version of i. Key Takeaway: Avoid var in modern JavaScript. Stick to let and const to prevent scope-related bugs! 🛡️ Did you get it right? Let me know in the comments! 👇 #JavaScript #WebDevelopment #CodingTips #InterviewPrep #Frontend #ReactJS #LearnToCode

🚀 20 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗤𝘂𝗲𝘀𝘁𝗶𝗼𝗻𝘀 𝗧𝗵𝗮𝘁 𝗖𝗮𝗻 𝗛𝗲𝗹𝗽 𝗬𝗼𝘂 𝗖𝗿𝗮𝗰𝗸 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄𝘀 If you’re preparing for frontend roles, make sure you’re confident with these core JavaScript concepts: 1. What are higher-order functions in JavaScript, and can you give an example? 2. What is destructuring in JavaScript, and why is it useful? 3. What are template literals, and how do they improve string handling? 4. How does the spread operator (…) work? 5. What is the rest parameter, and how is it different from the arguments object? 6. What is the difference between an object and an array? 7. How do you properly clone an object or an array? 8. What do Object.keys(), Object.values(), and Object.entries() do? 9. How does the map() method work, and when should you use it? 10. What is the difference between map() and forEach()? 11. What is event delegation, and why is it powerful? 12. What are JavaScript modules, and how do import/export work? 13. What is the prototype chain, and how does inheritance happen in JavaScript? 14. What is the difference between bind(), call(), and apply()? 15. How does JavaScript handle equality comparisons (== vs ===)? 16. What is the DOM, and how does JavaScript interact with it? 17. How do you prevent default behavior and stop event propagation? 18. What is the difference between synchronous and asynchronous code? 19. What is the difference between a native event object and a custom event? 20. How do you optimize performance in JavaScript applications? If you can clearly explain these concepts with examples, you’re in a strong position for most frontend interviews. #JavaScript #FrontendDevelopment #WebDevelopment #InterviewPreparation #ReactJS #SoftwareDevelopment

💼 JavaScript Interview Question I Cracked Today ❓ “Explain the Event Loop in JavaScript.” My answer (simple & interview-ready): 🧠 JavaScript is single-threaded, but it handles async tasks using the Event Loop. How it works: 1️⃣ Call Stack executes synchronous code 2️⃣ Async tasks go to Web APIs 3️⃣ Promises move to the Microtask Queue 4️⃣ setTimeout goes to the Callback Queue 5️⃣ Event Loop pushes microtasks first, then callbacks 💡 Interview Tip: Even setTimeout(fn, 0) runs after Promises. This question tests: ✔ Async understanding ✔ Execution order ✔ Real-world debugging skills If you’re preparing for frontend interviews, master this one concept — it shows up everywhere. Learning → Practicing → Explaining = Growth 🚀 #JavaScript #EventLoop #InterviewPrep #FrontendDeveloper #WebDevelopment #DevTips

Day 15/50 – JavaScript Interview Question? Question: What is the Event Loop in JavaScript? Simple Answer: The Event Loop is the mechanism that handles asynchronous operations in JavaScript's single-threaded environment. It continuously checks the Call Stack and Task Queues, executing code in a specific order: synchronous code first, then microtasks (promises), then macrotasks (setTimeout, events). 🧠 Why it matters in real projects: Understanding the Event Loop is crucial for debugging asynchronous behavior, preventing UI blocking, and optimizing performance. It explains why promises execute before setTimeout even with 0ms delay. 💡 One common mistake: Not understanding the priority of microtasks vs macrotasks, leading to unexpected execution order in complex async code. 📌 Bonus: console.log('1: Start'); setTimeout(() => console.log('2: Timeout'), 0); Promise.resolve() .then(() => console.log('3: Promise 1')) .then(() => console.log('4: Promise 2')); console.log('5: End'); // Output order: // 1: Start // 5: End // 3: Promise 1 // 4: Promise 2 // 2: Timeout // Why? Sync code → Microtasks (Promises) → Macrotasks (setTimeout) #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

🧠 This is one of the MOST important JavaScript interview traps 👀 (Even developers with 3–5+ years pause here.) No frameworks. No libraries. No tricks. Just core JavaScript behavior. 🧩 Output-Based Question (Destructuring + Function Arguments) const example = ({ a, b, c }) => { console.log(a, b, c); }; example(0, 1, 2); ❓ What will be printed? ❌ Don’t run the code 🧠 Think like the JavaScript engine A. 0 1 2 B. 0 undefined undefined C. undefined undefined undefined D. Throws a TypeError 👇 Drop ONE option only (no explanations yet 👀) ⚠️ Why this question is important Senior interviewers love this pattern because it exposes whether you truly understand: • How destructuring really works • How function parameters are passed • The difference between objects and primitives • What happens when types don’t match expectations Most developers assume: “JavaScript will somehow map the values.” It won’t. When your mental model is wrong: APIs break Config objects fail Production errors appear unexpectedly This isn’t a syntax question. It’s a fundamentals question. Strong JavaScript developers don’t memorize answers. They understand how the engine thinks. 💡 I’ll pin the full breakdown after a few answers. #JavaScript #JSFundamentals #CodingInterview #FrontendDeveloper #FullStackDeveloper #InterviewPrep #DevelopersOfLinkedIn #JSInterviewSeries