Learning Callbacks & forEach in JavaScript with Siva Kumar

🌱 Day 21 of My MERN Stack Journey at DevGnan Under the guidance of Siva Kumar sir Today’s Learning – Why DOM Exists and Why React Came When we give HTML, CSS, and JavaScript to the browser, the browser reads and processes the entire code. After that, it creates a DOM tree structure for the whole document. The DOM (Document Object Model) exists so the browser can render content on the screen and allow JavaScript to read, change, add, or remove elements. Behind the scenes, the browser converts HTML into a DOM tree, and CSS styles are applied to it. Using JavaScript and DOM, we can even create HTML and CSS dynamically and render it on the screen without writing them directly in files. Whenever we want to update something on the page, we use the DOM. But there is a problem: When we update even a single element, the browser may need to recalculate and re-render a large part of the DOM, which takes time and affects performance. To solve this problem, React was introduced. React creates a virtual copy of the DOM and compares changes. It updates only the required element, not the entire DOM tree. This makes applications faster and more efficient. Today I understood why DOM is important and why React is used in modern applications 💻✨ #DevgNan #Day21 #DOM #JavaScript #LearningJourney #WebDevelopment #CareerGrowth

🚀 Day 45 of My MERN Stack Learning Journey (JavaScript)with Love Babbar Code Help Today, I explored an important JavaScript concept — Hoisting, along with understanding how function calls work in JavaScript. 📚 What I learned today: 🔹 Variable Hoisting – How JavaScript moves variable declarations to the top of their scope during the execution phase. 🔹 Difference in hoisting behavior for: 1.var 2.let 3.const 🔹 Function Hoisting – How function declarations can be called before they are defined in the code. 🔹 Understanding function calls and execution flow in JavaScript. Learning hoisting helped me understand how JavaScript executes code internally and why some variables or functions behave differently depending on how they are declared. Diving deeper into JavaScript fundamentals every day 💻🚀 On to Day 46! #MERNStack #JavaScript #Programming #WebDevelopment #LearningJourney #CodeHelp #Day45

🚀 #Day 33 of MERN Stack Learning Challenge | #100DaysOfCode Today I learned and practiced JavaScript DOM Events — where JavaScript actually starts responding to user actions. 📌 Topics Covered: • DOM Events – How the browser reacts to user interactions • Mouse / Pointer Events – click, mouseover, mouseout • Event Listeners – addEventListener() for handling events properly • this in Event Listeners – Understanding what this refers to • Keyboard Events – keypress, keydown • Form Events – submit events and preventing default behavior • Extracting Form Data – Accessing user input dynamically • Scroll & Load Events – Responding when page loads or scrolls 📌 Practice Questions Completed: ✅ Tried different events like mouseout, keypress, scroll, load ✅ Created a button using JavaScript and changed its color on click ✅ Built an input field that only accepts letters (A–Z, a–z, space) ✅ Dynamically displayed the user’s name inside a heading 📝 Today’s learning made me realize — DOM Manipulation changes the UI, but Events make the UI interactive. Day 33 complete ✅ 👍🏻 🚀 #Day33 #100DaysOfCode #JavaScript #DOMEvents #WebDevelopment #MERNStack

MERN Stack Learning Journey- #Day43 At Skill Shikshya Today I focused on understanding the useEffect hook in React and how it manages side effects inside functional components. useEffect is used to handle operations that affect something outside the component, such as API calls, subscriptions, timers, or manually interacting with the DOM. By default, useEffect runs after every render. However, its behavior depends on the dependency array. If we pass an empty dependency array, the effect runs only once after the initial render, similar to componentDidMount in class components. If we include specific state or props inside the dependency array, the effect runs whenever those values change. If no dependency array is provided, it runs after every render. I also learned about cleanup functions inside useEffect. When we return a function from useEffect, React calls that function before the component unmounts or before running the effect again. This is important for clearing intervals, removing event listeners, or cancelling subscriptions to prevent memory leaks. Understanding useEffect helped me connect lifecycle concepts like mounting, updating, and unmounting with functional components. It made me realize that React components are not just about rendering UI, but also about managing side effects in a controlled and predictable way. Step by step, React hooks are becoming more logical and structured in my mind. #ReactJS #UseEffect #ReactHooks #FrontendDevelopment #JavaScript #WebDevelopment #MERNStack

Today I implemented a debounced live search using pure HTML, CSS, and JavaScript. Problem: When users type in a search bar, the function runs on every keystroke. In real applications, this can: • Trigger unnecessary API calls • Increase server load • Reduce performance Solution: "Debouncing" Debouncing ensures the function executes only after the user stops typing for a defined delay. Why this matters for MERN developers: • Optimizes API calls • Improves performance • Reduces backend load • Creates better user experience In real MERN applications, this technique prevents excessive database queries and unnecessary backend processing. 🔗 GitHub Repo: https://lnkd.in/gsBGF6Wt Even small optimizations like this make applications more scalable. Special thanks to :- Ankur Prajapati , Sheryians Coding School #JavaScript #MERN #WebDevelopment #SheryiansCodingSchool #Performance #LearningInPublic

MERN Stack Learning Journey- #Day28 At Skill Shikshya Today I focused on understanding the DOM (Document Object Model), which is one of the most important concepts for making web pages interactive. I learned that the DOM represents the entire HTML structure of a webpage as a tree-like model that JavaScript can access and control. Through the DOM, we can select elements, change their content, update styles, and respond to user actions. This made me realize that HTML creates the structure, CSS handles the design, and the DOM is what allows JavaScript to connect with the page and make it dynamic. I also explored how we can select elements and update them using innerHTML, which showed me how content on a webpage can be changed without reloading the page. This gave me a clear idea of how modern websites update text, show messages, and display data in real time. In addition, I learned about template literals using backticks ` ` and ${} to insert values inside text in a cleaner and more readable way. Even though today was more about theory, it helped me understand how JavaScript actually interacts with a webpage behind the scenes. Step by step, the picture of how the browser, HTML, and JavaScript work together is becoming clearer. #JavaScript #DOM #WebDevelopment #FrontendDeveloper #CodingJourney #MERNstack

-> Web Dev Cohort – Week 5 Update Understanding JavaScript data types in detail — including primitive and non-primitive types — and how JavaScript handles them internally. Then moved to Strings, different string methods like slice(), substring(), replace(), trim(), split(). covered Arrays and Objects deeply. Learned how to create, access, update, and manipulate them. Also understood how objects store key-value pairs . map() filter() forEach() Learned how these methods work and how they help us write cleaner and more readable code. Higher-Order Functions (HOFs) — understanding how functions can take other functions as arguments or return functions. ->Github JS Assignments->> I strongly believe that if institutes start giving GitHub-based practical JavaScript assignments like this, students will benefit at a completely different level. It improves real-world coding skills, logical thinking, and industry readiness much more than just theory-based learning. Hitesh Choudhary Piyush Garg Jay Kadlag #Chaicode #Cohort2026 #WebDevelopment #LearningInPublic

Headline: Day 2: Making the Backend Dynamic! ⚡ Yesterday was about the basics, but today was all about Express.js and making things actually work. The "M" and "E" of my MERN journey are starting to click! 🚀 Here’s what I crushed in today's 3-video sprint: 🔹 Express.js & Middleware: Finally understood how requests flow through a server. Middleware is like the "Security Checkpoint" for every request. 🔹 Form Handling: Learned how to capture user data from the frontend and process it. No more static pages! 🔹 EJS & Dynamic Routing: This was the highlight! Creating templates with EJS and using dynamic parameters (like /profile/:username) to make the app feel alive. Current Status: 5.5 hours / 10 hours completed. ⏳ It’s one thing to watch a tutorial, but another to write the code and see it run on localhost:3000. The learning curve is steep, but the progress feels amazing. Big shoutout to Sheryians Coding School for keeping the concepts so practical. #WebDevelopment #MERNStack #ExpressJS #Backend #NodeJS #CodingProgress #100DaysOfCode #BuildInPublic @shreyance coding school

MERN Stack Learning Journey- #Day37 At Skill Shikshya Today I went deeper into the theoretical foundation behind modern JavaScript development and tried to understand how the main tools in the ecosystem actually connect with each other instead of just memorizing their names. I clearly understood the difference between a library and a framework in a practical sense. A library gives us specific functions that we can call when needed, meaning the control stays in our hands. A framework, however, defines the structure of the application and controls the flow, and we build our logic inside that structure. This helped me understand why large applications often depend on frameworks for consistency and organization. I spent time learning what React really is and why it is so popular. It is not a full framework but a UI library focused on building reusable components. Each component manages its own logic and UI, which makes applications easier to maintain and scale. I also learned about the Virtual DOM, which acts like a lightweight copy of the real DOM. React compares changes in the Virtual DOM first and then updates only the necessary parts in the real DOM. This improves performance and avoids unnecessary page reloads. I also explored Node.js in more depth. It is not a language but a runtime environment that allows JavaScript to run outside the browser using Chrome’s V8 engine. This makes it possible to use JavaScript for backend development, handle server logic, manage requests, work with databases, and build full stack applications using a single language. Another important concept I focused on was Vite and its role in development. When we write React code, we use JSX, which looks like HTML but is actually JavaScript syntax. Browsers cannot understand JSX directly. Tools like Vite process this code, convert JSX into normal JavaScript, and serve it quickly during development. It also uses a fast development server and optimized build process, which makes the development experience smoother and faster. Understanding how these pieces connect gave me a clearer mental model of how modern applications are structured. React handles the user interface, Node.js handles server side logic, and tools like Vite prepare and transform code so the browser can execute it. Instead of seeing them as separate technologies, I am starting to understand how they work together as one complete system. #ReactJS #JavaScript #WebDevelopment #FrontendDevelopment #NodeJS #Vite #FullStackDevelopment #MERNStack

🚀 Day 61 – Promises, Async/Await & Fetch API 📍 Sheryians Coding School Today was all about understanding asynchronous JavaScript and how modern JS handles async operations without breaking our brain 😄 🔹 What I learned today: ✅ Promises Handle async tasks like API calls or time delays States: pending, fulfilled, rejected Makes async flow more readable than callbacks ✅ async / await async functions always return a Promise await lets us write async code that looks synchronous Super clean syntax + easier error handling ✅ Fetch API Used for making HTTP requests (GET, POST, etc.) Returns a Promise Works smoothly with both .then() and async/await Learned how to handle errors using try/catch 🔹 Why this matters? ✨ No more callback hell ✨ Cleaner, readable async code ✨ Real-world usage in APIs & web apps Slowly but surely, JavaScript is starting to click 🔥 Consistency > Motivation 💪 #Day61 #JavaScript #AsyncAwait #Promises #FetchAPI #WebDevelopment #FrontendJourney #SheryiansCodingSchool #LearningInPublic