Event Bubbling vs Capturing in JavaScript

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 5/50 – JavaScript Interview Question? Question: What is the difference between var, let, and const? Simple Answer: var is function-scoped and gets hoisted with undefined, let is block-scoped and has a Temporal Dead Zone, and const is also block-scoped but cannot be reassigned (though objects/arrays it references can still be mutated). 🧠 Why it matters in real projects: Using let and const prevents common bugs related to scope leakage and accidental global variables. Modern codebases typically avoid var entirely, using const by default and let only when reassignment is needed. 💡 One common mistake: Thinking const makes objects immutable. It only prevents reassignment of the variable itself. The object's properties can still be changed! 📌 Bonus: const user = { name: 'John' }; user.name = 'Jane'; // ✅ This works! user = {}; // ❌ TypeError: Assignment to constant // For true immutability, use Object.freeze() const frozen = Object.freeze({ name: 'John' }); frozen.name = 'Jane'; // Silently fails (or throws in strict mode) #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews

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

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

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

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗔𝗿𝗿𝗮𝘆 𝗠𝗲𝘁𝗵𝗼𝗱𝘀 JavaScript arrays are more powerful than many of us realize. I’ve listed all commonly used array methods in a single visual, covering everything from: 🔹 Iteration (map, forEach, filter) 🔹 Searching (find, includes, indexOf) 🔹 Transformation (reduce, flat, slice) 🔹 Mutation & sorting (push, splice, sort) 🔹 And many more… Whether you’re: - Revising core JavaScript - Preparing for interviews - Or writing cleaner, more expressive code This visual can be a handy quick reference. 📌 Save it 📌 Share it with someone learning JavaScript 📌 Let me know which array method you use most in real projects #JavaScript #WebDevelopment #Frontend #Programming #LearnJavaScript #Developers #CodingTips

🚀 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

Day 27/50 – JavaScript Interview Question? Question: What is the difference between for...in and for...of loops? Simple Answer: for...in iterates over enumerable property keys (strings) of an object, including inherited properties. for...of iterates over iterable values (like arrays, strings, Maps, Sets) and doesn't work with plain objects. 🧠 Why it matters in real projects: Using the wrong loop causes bugs. for...in on arrays gives you indices as strings (not ideal), while for...of gives values directly. For objects, use Object.keys/values/entries with for...of instead of for...in. 💡 One common mistake: Using for...in on arrays and expecting numeric indices or values, but getting string keys. Also, for...in can iterate over inherited properties from the prototype chain. 📌 Bonus: const arr = ['a', 'b', 'c']; // for...in - keys (indices as strings) for (let key in arr) { console.log(key); // "0", "1", "2" (strings!) console.log(typeof key); // "string" } // for...of - values for (let value of arr) { console.log(value); // "a", "b", "c" } // Object iteration const person = { name: 'Alice', age: 30 }; // for...in works on objects for (let key in person) { console.log(key, person[key]); // "name Alice", "age 30" } // for...of doesn't work on plain objects for (let value of person) {} // ✗ TypeError! // Better object iteration: for (let [key, value] of Object.entries(person)) { console.log(key, value); // ✓ Best practice } // Prototype pollution issue with for...in Array.prototype.custom = 'surprise'; for (let key in arr) { console.log(key); // "0", "1", "2", "custom" - Oops! } #JavaScript #WebDevelopment #Frontend #LearnInPublic #InterviewQuestions #Programming #TechInterviews #Loops #ES6

Don't let curly braces trick you in JavaScript! 🚀 I came across this tricky interview question today and it’s a perfect reminder of how small syntax details change everything. Many developers would glance at this and expect [2, 4, 6]. But if you run this code, the result is actually [undefined, undefined, undefined]. Why? In JavaScript arrow functions, if you use curly braces { }, you must use an explicit return keyword. Without it, the function returns undefined by default for every element in the map. Fix it by: 1. Adding the return keyword inside the block. 2. Or, removing the curly braces for an implicit return: nums.map(num => num * 2). Small details make big differences in debugging! 💻 Feel free to reach me out for any career mentoring. Naveen .G.R | CareerByteCode #javascript #mernstack #webdevelopment #codingtips #learningjourney #60daychallenge

🧠 This JavaScript Function Call Looks Normal… But Think Carefully 👀 Most people focus on the value. Very few notice how the function is called 😄 function show() { return "Hello"; } console.log(show); console.log(show()); Same function. Two console logs. Completely different outputs. 🤔 Why this question is interesting Tests function reference vs function execution Very common beginner confusion Asked indirectly in interviews Looks simple → answers vary a lot Almost everyone comments confidently 💬 Your Turn Comment your answers like this 👇 Line 1 → Line 2 → Why? → ⚠️ Don’t run the code. Answer based on understanding. I Will post the correct output + simple explanation in the evening. 📌 This post is to understand JavaScript behavior, not to trick anyone. #JavaScript #LearnJS #FrontendDevelopment #CodingInterview #TechWithVeera #WebDevelopment