Day 31: JavaScript OOP Concepts & Request Handling

🚀 Understanding async/await from a frontend perspective While working on JavaScript fundamentals, I revisited async/await to better understand how async logic behaves in real UI flows. Here’s a simple breakdown: 🔹 async 🔹Marks a function as asynchronous 🔹Ensures a Promise-based flow 🔹Makes async behavior predictable in frontend code 🔹 await 🔹Waits for the Promise to resolve before moving forward 🔹Helps structure API calls in a clean, readable way 🧠 Why this matters in frontend applications 🔹Cleaner handling of API calls 🔹Improved readability in UI logic 🔹Easier debugging and controlled error handling using try...catch 💡 Simple pattern : async function fetchData() { try { const response = await fetch(url); const data = await response.json(); console.log(data); } catch (error) { console.error(error); } } 📌 Takeaway Async/await doesn’t change how JavaScript works — it improves how we structure asynchronous code for maintainable frontends. Continuously refining fundamentals to write clearer, scalable UI code. #JavaScript #FrontendEngineering #AsyncAwait #WebDevelopment #ProductEngineering

🔹 JavaScript is single-threaded It can execute one task at a time. But then… how does it handle async operations like setTimeout, fetch, or user clicks? 🔹 Call Stack Every function you execute goes into the Call Stack. If the stack is busy, nothing else runs. Period. 🔹 Web APIs (Browser / Node Runtime) Functions like setTimeout, fetch, and DOM events are not handled by the JS engine itself. They’re delegated to Web APIs (in browsers) or runtime APIs (in environments like Node.js). 🔹 Callback Queue Once async operations complete, their callbacks move into the queue, waiting patiently. 🔹 Event Loop The Event Loop keeps asking one simple question: 👉 “Is the Call Stack empty?” If yes → it pushes the next task from the queue to the stack. That’s how JavaScript achieves asynchronous behavior — even though it’s single-threaded. 💡 When this concept clicks: ✔ Debugging becomes easier ✔ Promises stop feeling magical ✔ async/await finally makes sense ✔ Performance decisions become intentional If you're learning JavaScript — don’t skip this topic. It’s foundational. Question for developers 👇 When did the Event Loop finally “click” for you? #JavaScript #FrontendDevelopment #WebDevelopment #AsyncProgramming #SoftwareEngineering #DeveloperExperience

𝐓𝐡𝐞 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐄𝐯𝐞𝐧𝐭 𝐋𝐨𝐨𝐩 𝐄𝐱𝐩𝐥𝐚𝐢𝐧𝐞𝐝 (𝐖𝐡𝐲 𝐘𝐨𝐮𝐫 𝐀𝐩𝐩 𝐃𝐨𝐞𝐬𝐧’𝐭 𝐅𝐫𝐞𝐞𝐳𝐞) Ever wondered how JavaScript can fetch data, run timers, and respond to clicks—without blocking everything else? At first glance, it seems impossible because 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗶𝘀 𝘀𝗶𝗻𝗴𝗹𝗲-𝘁𝗵𝗿𝗲𝗮𝗱𝗲𝗱. It can execute only one task at a time. Yet modern web apps feel fast, responsive, and capable of handling many things simultaneously. The secret lies in how asynchronous tasks are managed. When an async operation starts, it doesn’t stay inside the JavaScript engine. Instead, 𝗪𝗲𝗯 𝗔𝗣𝗜𝘀 handle it in the background—things like `𝑓e𝑡cℎ`, `s𝑒t𝑇i𝑚e𝑜u𝑡`, or DOM events. Once the task completes, its callback moves into the 𝗾𝘂𝗲𝘂𝗲. From there, the 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 constantly checks if the 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 is empty. When it is, the next task from the queue is pushed onto the stack and executed. Simple flow. Powerful architecture. This mechanism is why JavaScript can build highly interactive applications without freezing the UI. If you want to write better async code: * Visualize the call stack, queue, and event loop when debugging * Avoid blocking the main thread with heavy synchronous work * Understand how 𝘗𝘳𝘰𝘮𝘪𝘴𝘦𝘴 and `𝘢𝘴𝘺𝘯𝘤/𝘢𝘸𝘢𝘪𝘵` rely on the event loop Once you grasp this model, asynchronous JavaScript starts to feel much more predictable. When did the 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 finally click for you? #JavaScript #EventLoop #AsyncProgramming #FrontendDevelopment #WebEngineering #SoftwareEngineering #ProgrammingFundamentals #WebPerformance

🚀 Just Built a Random Advice Generator using JavaScript & API! I recently built a small project to practice JavaScript API integration. This project fetches random advice using the Advice Slip API and displays it in a simple responsive UI. 🔹 Features • Fetches advice using Fetch API • Uses Async / Await for API handling • Button loading state while fetching data • Random background color change 🎨 • Fully responsive design 📱 🛠 Tech Stack HTML • CSS • JavaScript • Fetch API 📡 API Used https://lnkd.in/dhQVZzs9 🌐 Live Demo 👉 https://lnkd.in/dPePU2n5 💻 GitHub Repository 👉 https://lnkd.in/dJ7nNPCe This project helped me improve my understanding of JavaScript API calls, async programming, and DOM manipulation. I’ll continue building more projects to strengthen my frontend development skills. #javascript #webdevelopment #frontenddevelopment #api #100DaysOfCode #coding

Ever wondered how JavaScript actually knows where to return after one function calls another? It's all thanks to the **call stack** — JavaScript's simple but powerful mechanism for tracking function execution. Think of it like a stack of plates in a kitchen: - You add new plates (function calls) on top - You only remove from the top (LIFO: Last In, First Out) - The function on top must finish before anything below can continue Without it, nested calls, recursion, and even basic returns would break. In my latest blog post, I break it down step-by-step: → How the stack grows and shrinks during execution → What an execution context really contains → Why infinite recursion causes "Maximum call stack size exceeded" → How to read stack traces like a pro in DevTools → Why async code (setTimeout, fetch) behaves the way it does If you're working with functions, recursion, or debugging JS errors, this will level up your mental model. What’s one call stack or recursion gotcha that tripped you up early in your JS journey? Drop it below — I'd love to hear! 👇 https://lnkd.in/eQnKbegR #JavaScript #WebDevelopment #Programming #Coding #Tech

🚀 Web Dev Cohort 2026 – Node.js Architecture Session What an amazing session taken by Piyush Garg. The class really helped clear up many doubts about Node.js and how JavaScript actually runs behind the scenes. Key things we learned today: • How Node.js runs our JavaScript file • Understanding the Process in Node.js • Role of the Main Thread • Sequence of reading and executing the code • Event Loop sequence (the most fascinating part) • Difference between setImmediate() and setTimeout() Here is the full pdf notes: https://lnkd.in/gxhVn8SP This session really helped me understand the architecture of Node.js and how asynchronous behavior is handled internally. Huge thanks to Piyush Garg for explaining such complex concepts in a simple and practical way. Also grateful to Hitesh Choudhary Sir and all the TAs (Akash Kadlag Jay Kadlag Suraj Kumar Jha Anirudh Jwala Aasu Yadav) for the continuous support throughout the cohort. #WebDevCohort2026 #NodeJS #JavaScript #EventLoop #LearningInPublic #DeveloperJourney

JavaScript is single-threaded, yet it handles asynchronous tasks effortlessly. Understanding the Event Loop finally made it make sense. JavaScript has one call stack and can only execute one task at a time. So naturally, the question becomes: how does it handle things like API calls, timers, or user clicks without freezing the entire application? The answer is the Event Loop. When we use asynchronous features like setTimeout, fetch, or event listeners, JavaScript doesn’t handle them directly. Instead, these tasks are delegated to the browser’s Web APIs. While the browser processes these operations in the background, JavaScript continues executing other code on the call stack. Once the asynchronous task finishes, its callback is placed in a queue. The Event Loop continuously checks whether the call stack is empty, and when it is, it moves the queued callback into the stack for execution. That’s how non-blocking behavior works, even though JavaScript itself runs on a single thread. Understanding this changed how I debug, structure async code, and reason about performance. If you're learning JavaScript, don’t skip the Event Loop. It’s foundational to everything from API calls to modern frameworks. #JavaScript #WebDevelopment #FrontendDevelopment #LearningInPublic #TechJourney #Growth

🚀 Day 39 — Understanding Class Components in React While modern development in React is dominated by functional components and hooks, having a solid grasp of Class Components is essential for working with legacy codebases and understanding React’s evolution. Today I focused on how class-based components work internally and how they manage state and lifecycle. Here are my key takeaways 👇 🔹 1️⃣ The Foundation of Class Components Class components are defined using ES6 classes and must extend: • React.Component • or React.PureComponent They require: • a constructor() (for initialization) • a render() method (to return JSX) • super() call (to access parent class functionality) 🔹 2️⃣ Built-in State Management Unlike functional components that use hooks, class components manage state using a state object. • Access state → this.state • Update state → this.setState() This makes them inherently stateful components. 🔹 3️⃣ Why Hooks Are Not Used in Class Components Hooks are designed specifically for functional components. Since hooks rely on function execution patterns and lifecycle alignment, they cannot be used inside class components. This is a commonly asked concept in interviews. 🔹 4️⃣ Event Handling & Binding Handling events in class components requires proper binding to maintain access to this. Common approaches: • Binding in constructor • Using arrow functions This ensures access to component state and methods during execution. 🔹 5️⃣ Handling Forms & API Integration For building real-world applications, I explored: • API communication using Axios • Form handling using Formik • Validation using Yup These tools help build robust and scalable form workflows. 🧠 Key Insight Even though functional components are the modern standard, class components: • explain React’s lifecycle deeply • are still present in many production systems • strengthen core understanding of component architecture Understanding them bridges the gap between legacy systems and modern React development. Onward to Day 40 🚀 💬 For developers: Have you worked with class components in real projects, or do you primarily use functional components with hooks? #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #ReactClassComponents #CodingJourney #100DaysOfCode #LearningInPublic #ReactDeveloper #TechCommunity

🚀 𝗘𝘅𝗰𝗶𝘁𝗲𝗱 𝘁𝗼 𝘀𝗵𝗮𝗿𝗲 𝗺𝘆 𝗹𝗮𝘁𝗲𝘀𝘁 𝗽𝗿𝗼𝗷𝗲𝗰𝘁: 𝗚𝗶𝘁𝗛𝘂𝗯 𝗜𝘀𝘀𝘂𝗲𝘀 𝗧𝗿𝗮𝗰𝗸𝗲𝗿! 💻🔍 I recently built a fully functional frontend application that simulates a GitHub Issue Tracker. This project was a fantastic deep dive into asynchronous JavaScript, external API integration, and dynamic state management! ✨ 𝗞𝗲𝘆 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 & 𝗪𝗵𝗮𝘁 𝗜 𝗕𝘂𝗶𝗹𝘁: 🔹 𝗦𝗲𝗰𝘂𝗿𝗲 𝗟𝗼𝗴𝗶𝗻 𝗦𝘆𝘀𝘁𝗲𝗺: Created a simulated authentication page to restrict dashboard access. 🔹 𝗗𝘆𝗻𝗮𝗺𝗶𝗰 𝗔𝗣𝗜 𝗜𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗶𝗼𝗻: Fetched and displayed real-time issue data from an external server using Async/Await. 🔹 𝗧𝗮𝗯𝗯𝗲𝗱 𝗙𝗶𝗹𝘁𝗲𝗿𝗶𝗻𝗴: Built a smooth navigation system to seamlessly filter issues by their status (Open, Closed, or All). 🔹 𝗟𝗶𝘃𝗲 𝗦𝗲𝗮𝗿𝗰𝗵 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻𝗮𝗹𝗶𝘁𝘆: Integrated a search feature that queries the API to instantly find specific issues by text. 🔹 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲 𝗠𝗼𝗱𝗮𝗹𝘀: Implemented dynamic modals that fetch and display detailed information (like author, priority, and date) when a specific issue card is clicked. 🛠️ 𝗧𝗲𝗰𝗵 𝗦𝘁𝗮𝗰𝗸: HTML5 | Tailwind CSS | DaisyUI | Vanilla JavaScript (ES6+) | REST APIs Working on this project really leveled up my understanding of DOM manipulation, handling multiple API endpoints, and building a clean, responsive UI. 🔗 𝗟𝗶𝘃𝗲 𝗣𝗿𝗲𝘃𝗶𝗲𝘄: https://lnkd.in/gBqxh9AY 💻 𝗚𝗶𝘁𝗛𝘂𝗯 𝗥𝗲𝗽𝗼𝘀𝗶𝘁𝗼𝗿𝘆: https://lnkd.in/gvkaBkV4 I'd love to hear your thoughts and feedback! Let me know what you think in the comments. 👇 #WebDevelopment #JavaScript #Frontend #TailwindCSS #DaisyUI #APIIntegration #CodingJourney #BuildInPublic #SoftwareEngineering

One concept that has completely changed how I understand JavaScript is asynchronous code. JavaScript runs from top to bottom, but only for synchronous code. Synchronous code runs line by line. Each task must finish before the next one starts. But asynchronous code allows JavaScript to start a task and move on without waiting for it to finish. For example: When fetching data from an API or using setTimeout, JavaScript doesn’t block everything. It continues running other code while waiting for the result. This is how applications stay responsive. What really clicked for me is; JavaScript is single-threaded, but non-blocking. It uses: • The call stack • Web APIs • The callback queue • The event loop to handle asynchronous operations behind the scenes. Without asynchronous programming, there's: – No smooth user interactions – No API requests – No dynamic web apps Still learning. Still building. #JavaScript #WebDevelopment #LearningInPublic #FrontendDevelopment #TechJourney #Growth