JavaScript Closures: Understanding Output

🔥 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 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 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 #WebDevelopment

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

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

This JavaScript array question surprises many developers 👀 🧩 JavaScript Output-Based Question (Array length + delete) ❓ What will be the output? 👉 Comment your answer below (Don’t run the code ❌) Correct Output : 11 Why this output comes? (Step-by-Step) 1️⃣ Initial array ['a','b','c','d','e'] Length = 5 2️⃣ Assigning value at index 10 array[10] = 'f'; • JavaScript creates empty slots between index 5–9 • Array becomes sparse • Length becomes highest index + 1 ➡️ Length = 11 3️⃣ Deleting the element delete array[10]; • delete removes the value • ❌ It does NOT reindex the array • ❌ It does NOT reduce length So the slot becomes empty, but length stays the same. ➡️ Final length = 11 🔑 Key Takeaways : ✔️ Array length depends on highest index ✔️ delete removes value, not index ✔️ delete does NOT change array length ✔️ Sparse arrays are common sources of bugs delete is usually a bad choice for arrays. #JavaScript #Arrays #InterviewQuestions #FrontendDeveloper #MERNStack #WebDevelopment

This JavaScript array question surprises many developers 👀 🧩 JavaScript Output-Based Question (Array length + delete) ❓ What will be the output? 👉 Comment your answer below (Don’t run the code ❌) Correct Output : 11 Why this output comes? (Step-by-Step) 1️⃣ Initial array ['a','b','c','d','e'] Length = 5 2️⃣ Assigning value at index 10 array[10] = 'f'; • JavaScript creates empty slots between index 5–9 • Array becomes sparse • Length becomes highest index + 1 ➡️ Length = 11 3️⃣ Deleting the element delete array[10]; • delete removes the value • ❌ It does NOT reindex the array • ❌ It does NOT reduce length So the slot becomes empty, but length stays the same. ➡️ Final length = 11 🔑 Key Takeaways : ✔️ Array length depends on highest index ✔️ delete removes value, not index ✔️ delete does NOT change array length ✔️ Sparse arrays are common sources of bugs delete is usually a bad choice for arrays. #JavaScript #Arrays #InterviewQuestions #FrontendDeveloper #MERNStack #WebDevelopment

Day 7: First-Class Functions, Function Statement, Function Expression & Anonymous Functions (JavaScript) JavaScript treats functions as first-class citizens. But what does that actually mean? 🔹 1️⃣ First-Class Functions In JavaScript, functions can: ✅ Be assigned to a variable ✅ Be passed as arguments ✅ Be returned from another function function greet() { return "Hello"; } function execute(fn) { console.log(fn()); } execute(greet); 👉 This ability makes concepts like callbacks, closures, and higher-order functions possible. 🔹 2️⃣ Function Statement (Function Declaration) function add(a, b) { return a + b; } ✔️ Hoisted completely ✔️ Can be called before definition 🔹 3️⃣ Function Expression const add = function(a, b) { return a + b; }; ✔️ Treated like a variable ❌ Not fully hoisted (lives in Temporal Dead Zone if let/const) 🔹 4️⃣ Anonymous Function A function without a name. setTimeout(function() { console.log("Hello"); }, 1000); 👉 Usually used in function expressions or callbacks. 🧠 Mental model to remember 🔥 Key Difference (Interview Favorite) Function Statement → Hoisted with definition Function Expression → Hoisted as variable (undefined / TDZ) Anonymous → No function name First-Class Function → Ability, not a type #Javascript #FirstClassFunction #FunctionExpression #FunctionStatement #AnonymousFunction #WebDevelopment #LearningInPublic

🧩 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 (call / bind) ❓ What will be logged? 👉 Comment your answer below (Don’t run the code ❌) Correct Output : A 🧠 Why this output comes? (Step-by-Step) 1️⃣ bind() creates a NEW function const bound = greet.bind(a); bind() permanently sets this to object a and returns a new bound function. 2️⃣ call() cannot change a bound this bound.call(b); Once a function is bound: • call() • apply() • bind() again ❌ cannot override the original binding So even though call(b) is used, this still points to a. That’s why : A is printed. 🔑 Key Takeaways ✔️ bind() sets this permanently ✔️ call() and apply() set this only temporarily ✔️ call() cannot override bind() ✔️ This is a very common interview trap If you remember one thing: bind beats call and apply #JavaScript #CallBindApply #InterviewQuestions #FrontendDeveloper #MERNStack #ReactJS

Day 13/365 – Top #JavaScript Interview Questions 🔥Part2 Q19). What are higher-order functions? Q20). What is currying in JavaScript? Q21). What is an IIFE and why is it used? Q22). What is prototypal inheritance? Q23). What is debouncing and throttling? Q24). What is the difference between the spread operator and rest operator? Q25). What is the difference between Object.freeze() and Object.seal()? Q26). What is the difference between a Promise and an Observable? Q27). What is the difference between slice() and splice()? Q28). How do you optimize performance in JavaScript applications? Q29). What is the difference between synchronous and asynchronous code? Q30). What is the difference between null ,undefined and NaN? Q31). What are object methods like Object.keys(), Object.values(), and Object.entries()? Q32). What is the difference between DOM and BOM? Q33). What is destructuring in JavaScript and how is it useful? Q34). What is the difference between filter() and find()? Q35) How do you handle errors in JavaScript? Q36).  What is Object.assign() and how does it work? #javascript #interview #webdevlopment #js #365daysofjs #jsinterview #interviewprepration