JavaScript var, let, const differences explained

Day 6/50 – JavaScript Interview Question? Question: How do arrow functions differ from regular functions? Simple Answer: Arrow functions don't have their own this (they inherit from the enclosing scope), don't have arguments object, and cannot be used as constructors with new. They also have a more concise syntax. 🧠 Why it matters in real projects: Arrow functions are perfect for callbacks and methods where you want to preserve the outer this context (like in React class components or event handlers). However, they're not suitable for object methods where you need dynamic this. 💡 One common mistake: Using arrow functions as object methods and wondering why this is undefined or refers to the wrong object. Always use regular functions for object methods! 📌 Bonus: const obj = { name: 'Widget', // ❌ Wrong - arrow function greet: () => { console.log(this.name); // undefined (this = window/global) }, // ✅ Correct - regular function greet2: function() { console.log(this.name); // "Widget" } }; #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

JavaScript Interview Question: var vs let vs const (Theory) Q: What is the difference between var, let, and const in JavaScript? The difference comes down to scope, hoisting, and reassignment behavior. A) var 1) Function-scoped 2) Hoisted and initialized with undefined 3) Can be redeclared and reassigned 4) Can cause bugs due to scope leakage B) let 1) Block-scoped 2) Hoisted but in the Temporal Dead Zone (TDZ) 3) Can be reassigned but not redeclared in the same scope C) const 1) Block-scoped 2) Hoisted but in TDZ 3) Cannot be reassigned 4) Object properties can still be mutated 📌 Best Practice: Use const by default, let when reassignment is needed, and avoid var in modern JavaScript. #JavaScript #WebDevelopment #FrontendDevelopment #MERNStack #InterviewPreparation #SoftwareEngineering #Developers

Day 16/50 – JavaScript Interview Question? Question: What's the difference between == comparison and Object.is()? Simple Answer: Both compare values, but Object.is() is more precise. Unlike == (which coerces types) and === (which has special cases for NaN and -0), Object.is() treats NaN as equal to NaN and distinguishes between +0 and -0. 🧠 Why it matters in real projects: While you'll mostly use ===, Object.is() is important for precise comparisons in algorithms, polyfills, and when implementing state management libraries. React uses Object.is() internally for comparing dependencies in hooks. 💡 One common mistake: Not knowing that NaN === NaN is false in JavaScript, which can cause bugs when checking for NaN values in data processing. 📌 Bonus: // Special cases where === fails NaN === NaN // false Object.is(NaN, NaN) // true ✓ +0 === -0 // true Object.is(+0, -0) // false ✓ // For most cases, === works fine Object.is(5, 5) // true 5 === 5 // true Object.is('foo', 'foo') // true 'foo' === 'foo' // true // Checking for NaN the right way Number.isNaN(value) // ✓ Best practice Object.is(value, NaN) // ✓ Also works value !== value // ✓ Clever trick (only NaN !== itself) #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

Day 10/50 – JavaScript Interview Question? Question: What's the difference between null and undefined? Simple Answer: undefined means a variable has been declared but not assigned a value, or a function doesn't return anything. null is an explicit assignment representing "no value" or "empty." 🧠 Why it matters in real projects: Understanding this distinction helps with API responses, function returns, and optional parameters. null is typically used to explicitly indicate "no object" while undefined usually indicates something wasn't initialized or doesn't exist. 💡 One common mistake: Using typeof null and expecting "null", but it actually returns "object" due to a historical JavaScript bug that was never fixed for backward compatibility. 📌 Bonus: let x; console.log(x); // undefined console.log(typeof x); // "undefined" let y = null; console.log(y); // null console.log(typeof y); // "object" (legacy bug!) // Checking for both if (value == null) { // true for both null AND undefined } if (value === null) { // true only for null } if (value === undefined) { // true only for undefined } #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

Day 7/50 – JavaScript Interview Question? Question: What is Event Delegation and why should you use it? Simple Answer: Event Delegation is the technique of attaching a single event listener to a parent element instead of multiple listeners to individual child elements, taking advantage of event bubbling. 🧠 Why it matters in real projects: When you have hundreds or thousands of similar elements (like a large list or table), event delegation drastically reduces memory usage and improves initialization performance. It also automatically handles dynamically added elements without needing to attach new listeners. 💡 One common mistake: Forgetting to check the event target before executing logic, which can cause your handler to fire for unintended elements (like the parent container itself). 📌 Bonus: // ❌ Bad - 10,000 event listeners items.forEach(item => { item.addEventListener('click', handleClick); }); // ✅ Good - Just 1 event listener document.querySelector('.list').addEventListener('click', (e) => { if (e.target.matches('.item')) { handleClick(e); } }); #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

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 Interview Question ❓ 🧠 JavaScript Call Stack Explained (With Nested Functions) Ever wondered which function runs first when functions are nested in JavaScript? Let’s break it down 👇 function fn1() { function fn2() { function fn3() { console.log("fn3"); } fn3(); console.log("fn2"); } fn2(); console.log("fn1"); } fn1(); 🔍 What actually happens? JavaScript uses a Call Stack to execute functions. 📌 Rule: Call Stack follows LIFO (Last In, First Out) 🪜 Call Stack Flow (Visualized) Copy code fn3() ← executed & finished first fn2() fn1() ← called first, finished last ✔️ fn1 is called first ✔️ fn3 finishes first That’s LIFO in action 🔥 ❌ FIFO vs ✅ LIFO in JavaScript Call Stack ✅ LIFO Event Queue (setTimeout)✅ FIFO Microtask Queue (Promise)✅ FIFO 📌 Golden rule for interviews: Execution stack = LIFO Async queues = FIFO 🎯 Interview One-Liner JavaScript executes functions using a LIFO call stack, while asynchronous callbacks are processed via FIFO queues. If this cleared things up, drop a 👍 If you’ve ever been confused by this — you’re not alone 😄 Follow for JavaScript + Angular internals explained simply 🚀 #JavaScript #FrontendDevelopment #WebDevelopment #CallStack #EventLoop #JSInterview #Angular #Programming #SoftwareEngineering

Day 9/50 – JavaScript Interview Question? Question: What is a closure and why is it useful? Simple Answer: A closure is a function that retains access to variables from its outer (enclosing) scope, even after the outer function has finished executing. 🧠 Why it matters in real projects: Closures enable data privacy (creating private variables), factory functions, memoization, and functional programming patterns. They're fundamental to modern JavaScript frameworks and libraries like React (hooks rely heavily on closures). 💡 One common mistake: Expecting closures to capture the value of a variable at the time of creation. Closures capture variables by reference, not by value, which can cause issues in loops with var. 📌 Bonus: // Classic closure problem with var for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } // Prints: 3, 3, 3 // Fixed with let (block scope) for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } // Prints: 0, 1, 2 // Practical use - private variables function createCounter() { let count = 0; // Private! return { increment: () => ++count, getCount: () => count }; } #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

🛑 JavaScript Interview: Do you know the Return Types? We use .map(), .filter(), and .reduce() every day. But can you explain precisely what they Return? Here is the breakdown that separates Junior Devs from Senior Devs: 1️⃣ .map() ➡️ Returns a New Array 📦 It creates a modified copy of the original array. Input: [1, 2, 3] (Array) Output: [2, 4, 6] (Array of same length) Use case: Transformation. 2️⃣ .filter() ➡️ Returns a New Array 📦 It returns a subset of the original array. Input: [1, 2, 3] (Array) Output: [2] (Array of smaller length) Use case: Selection/Removal. 3️⃣ .reduce() ➡️ Returns a Single Value 💎 This is the game changer. It processes the array to produce ONE result. Input: [1, 2, 3] (Array) Output: 6 (Number / String / Object) Use case: Accumulation (Sum, Object creation). 💡 The "Gotcha": If you assign .forEach() to a variable, it returns undefined. But .map() and .filter() will always give you an Array. Which one do you find most powerful? For me, .reduce() is pure magic. ✨ #javascript #webdevelopment #codingtips #reactjs #frontenddeveloper #softwareengineering #interviewquestions

🚀 Two Button Problem in HTML – A Common JavaScript Mistake Explained 👨💻 Just uploaded a short video where I explain a very common frontend issue that many developers face 👇 🎯 The Problem: Two buttons (Green 🟢 & Red 🔴) should change the background color, but the function gets executed immediately on page load instead of on click. ⚠️ This happens when we call the function instead of passing it as a reference. 💡 The Fix: Return a function and let JavaScript execute it only when the user clicks. This small change helps you understand: Event handling 🖱️ Closures 🔁 Function reference vs function call 🧠 Real interview concepts 💬 📌 Simple example, but a very important concept for every frontend developer. #JavaScript #HTML #FrontendDevelopment #WebDevelopment #Coding #LearnInPublic #InterviewPrep #Developers #Programming #TechCareer #GeeksforGeeks