Understanding the 'this' keyword in JavaScript

Day 17/100 of JavaScript Today’s topic: DOM Events (deeper understanding) Events allow JavaScript to respond to user interactions and system actions 🔹Adding events btn.addEventListener("click", handleClick); function handleClick() { console.log("Clicked"); } 🔹Event flow Events follow two phases: - Capturing (top → down) - Bubbling (bottom → up) btn.addEventListener("click", handler, true); // capturing btn.addEventListener("click", handler); // bubbling 🔹Event object btn.addEventListener("click", (e) => { console.log(e.target); // actual clicked element console.log(e.currentTarget); // element with listener }); 🔹Event delegation Handling events at parent instead of multiple children parent.addEventListener("click", (e) => { if (e.target.tagName === "LI") { console.log("List item clicked"); } }); 🔹Prevent default behavior form.addEventListener("submit", (e) => { e.preventDefault(); }); #Day17 #JavaScript #100DaysOfCode

𝗠𝗮𝘀𝘁𝗲𝗿𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗶𝗻 𝟮𝟬𝟮𝟲 JavaScript changed. Tools are better now. You still fall into old traps. Avoid these 5 mistakes. - Top-level await It is risky in libraries. It creates race conditions. Use a singleton pattern. This protects your bundle size. - The == operator Stop using ==. It uses confusing logic. It ruins type safety. Use === for all checks. - let in async loops let is block-scoped. Async loops capture live values. Your logs will show the same number. Use a const inside the loop. - The this keyword Arrow functions do not bind this. They use the outer scope. This leads to undefined. Use regular functions for methods. - JSON and Dates JSON.parse returns strings. It does not create Date objects. Your code will crash. Use a reviver function. Source: https://lnkd.in/g4yDDjNe

Day 22/100 of JavaScript Today’s topic: Prototypes in JavaScript JavaScript uses a prototype-based inheritance model. Every object in JavaScript has an internal link to another object called its prototype. Example function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log("Hello " + this.name); }; const user = new Person("Apsar"); user.greet(); Here, "greet" is not inside the object itself, but shared through the prototype. 🔹Prototype chain If a property or method is not found on the object, JavaScript looks up the prototype chain. console.log(user.toString()); 👉 "toString()" comes from the base object prototype. 🔑 Key points - Functions have a "prototype" property. - Objects inherit from their prototype. - Helps in memory efficiency by sharing methods. #Day22 #JavaScript #100DaysOfCode

A common misconception in JavaScript: “Objects are copied.” Let’s test that: let obj1 = { name: "John" }; let obj2 = obj1; obj2.name = "Doe"; console.log(obj1.name); // "Doe" At first, this feels unexpected. But here’s what’s really happening: JavaScript doesn’t copy the object. It copies the reference to that object. So both obj1 and obj2 point to the same memory location. That’s why changing one reflects in the other. This is one of the most common concepts tested in interviews — often with tricky variations. Understanding this clearly means you won’t rely on guesses anymore. 👉 I’ve broken this and similar concepts step-by-step in the full video (link in comments)

🚀 Understanding Recursion + Finding Maximum in Nested Arrays (JavaScript) Today I practiced a powerful concept in JavaScript — recursion with nested arrays — and used it to solve a real problem: 👉 Find the maximum number from a deeply nested array 💡 Example: [1, 0, 7, [2, 5, [10], 4]] 🔍 Approach I followed: ✅ Step 1: Used recursion to flatten the nested array If the element is a number → push into result If it’s an array → call the same function again ✅ Step 2: After flattening, used a loop to find the maximum value 🧠 Key Learnings: • Each recursive call creates its own memory (execution context) • Data is temporarily stored in the call stack • The return keyword helps pass results back step by step • Without capturing the returned value, recursion results can be lost • Breaking problems into smaller parts makes complex logic easier ⚡ Final Output: 👉 Maximum number: 10 💬 This exercise really helped me understand: How recursion works internally How data flows through function calls Difference between primitive and reference types #JavaScript #Recursion #ProblemSolving #WebDevelopment #CodingJourney

🚀 Exploring Blog 9 of the JS series: Map and Set in JavaScript. While developers often rely on objects and arrays, there are specific scenarios where Maps and Sets offer distinct advantages. Understanding when to use these data structures can enhance your coding practices. For insights into these use cases, check out the short blog linked below. Blog link: https://lnkd.in/gWRsZxy6 Hitesh Choudhary Piyush Garg Chai Aur Code #webdevcohort2026 #javascript #jsdatatypes

Day 11 of My JavaScript Journey 🚀 Today, I learned about objects in JavaScript. Objects are used to store data in key-value pairs, making it easier to organize related information. Example: const user = { name: "John", age: 25 }; Objects are written using curly brackets {}. I also learned how to retrieve and update data in objects using: • Dot notation: user.name • Bracket notation: user["name"] Both methods allow you to access and modify object properties. One thing I realized: Objects are powerful for structuring data in a more meaningful way. Key takeaway: Understanding objects is essential for working with real-world data in JavaScript. #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode

🔍 A small JavaScript detail that can cause unexpected bugs: Object key ordering Many developers assume object keys are always returned in insertion order, but JavaScript actually follows a specific ordering rule when you iterate over object properties (Object.keys, Object.entries, for...in). The order is: • Integer index keys → sorted in ascending order • String keys → insertion order • Symbol keys → insertion order (not included in Object.keys) This is one of the reasons why using Object as a map can sometimes lead to unexpected iteration behavior when numeric keys are involved. If key order matters, Map is usually the more predictable choice since it preserves insertion order for all key types. Small language details like this are easy to overlook, but they often explain those subtle bugs you run into during debugging. #JavaScript #SoftwareEngineering #Frontend

Day 8/100 of JavaScript 🚀 Today’s Topic: Objects and their manipulation Objects in JavaScript store data in key-value pairs Example: const user = { name: "Apsar", age: 24 }; 🔹Accessing values user.name user["age"] 🔹Adding / updating user.city = "Chennai"; user.age = 25; 🔹Deleting delete user.city; 🔹Iteration for (let key in user) { console.log(key, user[key]); } 🔹Useful methods Object.keys(user); Object.values(user); Object.entries(user); 🔹Copy (shallow) const newUser = { ...user }; 🔹Object.freeze() Object.freeze(user); user.age = 30; // ❌ no change Prevents adding, deleting, or updating properties 🔹Object.seal() Object.seal(user); user.age = 30; // ✅ allowed user.city = "Chennai"; // ❌ not allowed Allows update, but prevents add/delete 🔹Object.assign() const obj = Object.assign({}, user); Used to copy or merge objects Objects are reference types. Methods like "freeze" and "seal" help control how data can be modified #Day8 #JavaScript #100DaysOfCode