Mastering map, filter, and reduce in JavaScript

#Hello_Connections #Day16 of #100DaysofCodeChallenge Project Name: JavaScript Calculator Details:Built a fully functional Calculator using HTML, CSS, and JavaScript that performs basic arithmetic operations with a clean and responsive UI. What I Focused On: DOM manipulation with JavaScript Handling button click events Implementing calculation logic Using JavaScript string methods for delete functionality Creating a structured grid layout using CSS Grid Key Features: Perform basic arithmetic operations (+ − × ÷) AC (clear all) and DEL (delete last digit) functionality Responsive grid-based button layout Clean modern UI with gradient background Challenges:Handling invalid expressions and preventing the calculator from breaking when incorrect inputs are entered. How I Solved It:Used a try...catch block around the eval() function to safely evaluate expressions and display "Error" when invalid calculations occur. This project helped me practice JavaScript event handling, DOM manipulation, and building functional UI components. Code Of School -Avinash Gour & Ritendra Gour #Day16 #100DaysOfCode #FrontendDevelopment #HTML #CSS #JavaScript #WebDevelopment #LearningInPublic 🚀

🔍 Prototypes and this in JavaScript — going beyond the syntax into the actual mechanics. Here's what's worth knowing: 🧬 On Prototypes Methods aren't copied to every object instance. They live once on the prototype — all instances share them via reference. That's how JS stays memory efficient even with thousands of objects. Every method lookup is a live chain traversal, every single time. Object.create is pure prototype wiring — it sets the [[Prototype]] of a new object. That's it. 🎯 On this — four rules, in priority order 1️⃣ new binding → this = newly created object 2️⃣ Explicit binding → .call() .apply() .bind() — you decide 3️⃣ Implicit binding → obj.method() — this = object left of the dot 4️⃣ Default binding → standalone call — this = window or undefined Arrow functions sit outside all four rules — they inherit this lexically from wherever they were defined. ⚠️ The classic trap js setTimeout(this.log, 1000); // this is lost Detach a method from its object and this evaporates. Fix → arrow wrapper, .bind(), or bind in the constructor. Each has different tradeoffs. 🧠 On EventEmitters and memory Per-instance state must always be initialized in the constructor. If it accidentally lands on the prototype — every instance shares the same object. Emitting on one instance fires callbacks registered on all instances. Silent. No error thrown. Every .on() listener holds a closure reference — keeping objects alive in memory long after they're "destroyed." Always implement .off(). Always clean up. Follow along — sharing one deep dive at a time. 🚀 #JavaScript #Prototypes #FrontendEngineering #WebPerformance #PlatformEngineering

💡 JavaScript Tip: Start using the .at(-1) today! If you're still accessing the last element of an array like this: arr[arr.length - 1] There’s a cleaner and more readable way 👇 arr.at(-1) 🔹 Why use .at()? ✅ Cleaner syntax ✅ Easier to read ✅ Supports negative indexing 🔹 Examples const nums = [10, 20, 30, 40]; nums.at(0); // 10 nums.at(2); // 30 nums.at(-1); // 40 (last element) nums.at(-2); // 30 🔹 When to use it? Accessing last or second-last elements Writing cleaner, more modern JavaScript Avoiding repetitive .length calculations ⚠️ Note .at() works in modern JavaScript (ES2022+), so ensure your environment supports it. Small improvements like this can make your code more readable and elegant ✨ Are you using .at() already? #JavaScript #CleanCode #WebDevelopment #FrontendDevelopment #ProgrammingTips #DevCommunity #SoftwareEngineering

Shipping is a habit! 🚀 2 Days, 2 Projects, and a deeper dive into JavaScript. I’ve been heads-down in the #ChaiAurCode journey, and the momentum is real. Over the last 48 hours, I’ve moved from understanding basic logic to shipping functional mini-projects. Project 1: Dynamic List Creator 📝 Focused on mastering the DOM. It’s one thing to see a list on a screen, it’s another to handle real-time user input, state updates, and clean element creation dynamically. 🌐 Try the List Creator: https://lnkd.in/grMrRqMt Project 2: Color Palette Generator 🎨 This one was a technical "Aha!" moment. 🌐 Try the Palette Generator: https://lnkd.in/gCUwyhrc Key takeaways: ➡️ Precision Math: Implementing Math.random() * (max - min) + min to control color tones (Light vs. Dark). ➡️ String Manipulation: Using .padStart(2, "0") to ensure valid Hex codes a small detail that prevents major UI bugs. ➡️ The Backend Loop: I even experimented with running an Express server and frontend logic in a single file to visualize the full Request-Response cycle. Big thanks to my mentors Hitesh Choudhary and Suraj Kumar Jha for the guidance during the T-class sessions! Github repo links - List Creator - https://lnkd.in/gH9hzGY3 Palette Generator - https://lnkd.in/gEAv7NJ4 (I've shared the screen recording for the List Creator in the comments below! 👇) Anirudh J. Akash Kadlag Jay Kadlag Piyush Garg #WebDevelopment #JavaScript #BuildInPublic #FullStackJourney #LearningTogether #Vercel #CodingProgress

Adding event listeners to every element? There’s a smarter way in JavaScript. It’s called Event Delegation. Instead of attaching multiple event listeners to child elements, you attach one listener to the parent element. Why this works? Because of event bubbling. When an event happens, it moves up the DOM tree: Child → Parent → Document Example: document.getElementById("list").addEventListener("click", (e) => { if (e.target.tagName === "LI") { console.log("List item clicked"); } }); Now a single listener can handle all child element clicks. Benefits: • Better performance • Cleaner code • Works for dynamically added elements Small concepts like this make a big difference in real projects. Follow for more JavaScript concepts explained visually. #javascript #frontenddeveloper #webdevelopment #coding #softwareengineering

Today, JavaScript left the browser and talked to the world. For the past few weeks, I've been focused on how JavaScript manages data internally — execution context, closures, state-driven rendering. Today I learned where that data actually comes from. The full pipeline, in plain terms: When a browser requests a website, it first asks DNS to translate a domain name into an IP address. The browser then sends an HTTP request to that address. The server responds. That response travels as a plain string — not an object. This is where JavaScript takes over. fetch() sends the HTTP request and returns a Promise — a placeholder for data that hasn't arrived yet. await pauses execution until it does. .json() converts the string into a usable JavaScript object. From that point, it's just an array — the same render logic I already wrote for my job tracker works without modification. I didn't learn new rendering patterns today. I learned that the array I was hardcoding can come from a server instead. The renderUI() function of now doesn't care where the data came from — filtered, fetched, or local. It just renders what it receives. That's the payoff of state-driven architecture. The data source changes. The render logic doesn't. Still early. Still building from the ground up. #JavaScript #WebDevelopment #HTTP #APIs #LearningInPublic #BackendFirst

💡 Think semicolons don’t matter in JavaScript? Think again. Here’s a subtle but powerful concept: Automatic Semicolon Insertion (ASI). At first glance, this code looks perfectly fine: const arr = [1, 2, 3] (function () { console.log("Hello 👋") })() But instead of printing "Hello 👋", it throws: ❌ TypeError: arr is not a function 👉 Why? JavaScript doesn’t automatically insert a semicolon after the array declaration. So it interprets the code like this: const arr = [1, 2, 3](function () { ... })() Now it tries to call arr as a function — and arrays aren’t callable. ✅ The Fix is simple: const arr = [1, 2, 3]; (function () { console.log("Hello 👋") })() Now everything works as expected. 🔍 Key Takeaways: • JavaScript uses ASI, but it’s not always reliable • Starting a line with (, [, or + can cause unexpected behavior • Missing semicolons can silently change how your code is interpreted • Always be explicit when your next line starts with an IIFE or expression 🚀 Pro Tip: Even if you prefer a “no-semicolon” style, make sure to add one before IIFEs or tricky expressions to avoid bugs that are hard to debug. ⚡ JavaScript isn’t just about writing code — it’s about understanding how the engine reads your code. #JavaScript #WebDevelopment #CodingTips #Frontend #Programming #CleanCode

🔍 JavaScript Logic That Looks Simple… But Isn’t! Ever wondered how this works? 👇 if (!isNaN(str[i]) && str[i] % 2 == 0) { console.log(str[i]); } Let’s break it down: Suppose: let str = "a1b2c3d4"; 🔹 Step 1: str[i] Gives each character → "a", "1", "b", "2"... 🔹 Step 2: !isNaN(str[i]) Checks if the character can be converted to a number "2" → valid number ✅ "a" → not a number ❌ 🔹 Step 3: str[i] % 2 == 0 JavaScript converts "2" → 2 Then checks if it’s even ⚡ Hidden Magic: Short-Circuit (&&) If the first condition fails, JavaScript skips the second condition So for "a": !isNaN("a") → false % 2 is never executed 🚫 ✅ Final Output: 2 4 🚀 Key Takeaways: ✔ JavaScript automatically converts strings to numbers in calculations ✔ isNaN() helps filter numeric values ✔ && prevents errors using short-circuiting 💬 Clean logic like this is often used in string parsing & interview problems Would you like more such real-world JS tricks? 👇 #JavaScript #WebDevelopment #Coding #100DaysOfCode #LearnToCode

📌 JavaScript Complete Notes – Beginner to Advanced Concepts A structured handwritten guide covering JavaScript fundamentals, core concepts, operators, control statements, OOPs, DOM, events, and real-time usage scenarios. What this document covers: • JavaScript Fundamentals What is JavaScript & features Client-side scripting & dynamic web pages Lightweight, interpreted & cross-platform language • Core Concepts Variables (Local & Global) Data Types (Primitive & Non-Primitive) Operators (Arithmetic, Comparison, Logical, Bitwise, Assignment) • JavaScript Basics Comments (Single & Multi-line) Code placement (Head, Body, External JS) Advantages & disadvantages of external JS • Control Statements if, if-else, else-if switch case Loops (for, while, do-while) • Objects & Advanced Topics Objects, Arrays, Strings, Date, Math Functions & Events Exception Handling Cookies • JavaScript OOPs Class, Object, Prototype Constructor & Static methods Encapsulation, Inheritance Polymorphism & Abstraction • DOM & Browser Concepts DOM (Document Object Model) BOM (Browser Object Model) Document Object handling • Real-Time Usage Form validation Popups & alerts Dynamic UI interactions Event handling A complete JavaScript interview and concept revision guide for Developers, Frontend Engineers, and beginners preparing for technical rounds. I’ll continue sharing high-value interview and reference content. 🔗 Follow me: https://lnkd.in/gAJ9-6w3 — Aravind Kumar Bysani #JavaScript #WebDevelopment #Frontend #Coding #Programming #DOM #OOPS #SoftwareDevelopment #InterviewPreparation

📌 JavaScript Complete Notes – Beginner to Advanced Concepts A structured handwritten guide covering JavaScript fundamentals, core concepts, operators, control statements, OOPs, DOM, events, and real-time usage scenarios. What this document covers: • JavaScript Fundamentals What is JavaScript & features Client-side scripting & dynamic web pages Lightweight, interpreted & cross-platform language • Core Concepts Variables (Local & Global) Data Types (Primitive & Non-Primitive) Operators (Arithmetic, Comparison, Logical, Bitwise, Assignment) • JavaScript Basics Comments (Single & Multi-line) Code placement (Head, Body, External JS) Advantages & disadvantages of external JS • Control Statements if, if-else, else-if switch case Loops (for, while, do-while) • Objects & Advanced Topics Objects, Arrays, Strings, Date, Math Functions & Events Exception Handling Cookies • JavaScript OOPs Class, Object, Prototype Constructor & Static methods Encapsulation, Inheritance Polymorphism & Abstraction • DOM & Browser Concepts DOM (Document Object Model) BOM (Browser Object Model) Document Object handling • Real-Time Usage Form validation Popups & alerts Dynamic UI interactions Event handling A complete JavaScript interview and concept revision guide for Developers, Frontend Engineers, and beginners preparing for technical rounds. I’ll continue sharing high-value interview and reference content. 🔗 Follow me: https://lnkd.in/gAJ9-6w3 — Aravind Kumar Bysani #JavaScript #WebDevelopment #Frontend #Coding #Programming #DOM #OOPS #SoftwareDevelopment #InterviewPreparation