Var vs Let vs Const in JavaScript

Day 19/100 of JavaScript 🚀 Today’s topic : Deep dive into DOM Going beyond basic manipulation — focusing on performance, rendering, and efficient updates 🔹Reflow & Repaint - Reflow → layout recalculation (expensive) - Repaint → visual update without layout change Frequent DOM changes can trigger multiple reflows and slow down performance 🔹Minimizing reflows const fragment = document.createDocumentFragment(); for (let i = 0; i < 5; i++) { const el = document.createElement("p"); el.textContent = i; fragment.appendChild(el); } document.body.appendChild(fragment); 🔹Caching DOM queries const list = document.getElementById("list"); // reuse instead of querying again list.appendChild(newItem); 🔹Layout thrashing❌ Reading and writing layout repeatedly can hurt performance el.style.width = "100px"; console.log(el.offsetWidth); // forces reflow 🔹Efficient updates - Batch DOM changes - Use class changes instead of multiple style updates - Avoid unnecessary re-rendering DOM manipulation is not just about changing elements, but doing it efficiently to maintain performance #Day19 #JavaScript #100DaysOfCode

🧠 Day 3 of 21 days challenge JavaScript Event Loop 🤯 Event Loop is a mechanism in JavaScript that handles execution of asynchronous code. It continuously checks the call stack and callback queue. If the stack is empty, it moves tasks from the queue to the stack for execution. For example :- console.log("Start"); console.log("End"); console.log("Timeout"); Wait… why this order? Because JavaScript doesn’t run everything instantly. It uses: • Call Stack • Web APIs • Callback Queue Event Loop decides what runs next. 💤For easy understanding :- Event Loop = decides execution order Sync code runs first Async code waits in queue Then runs after the stack is empty 👉 That’s why “Timeout” runs last This changed how I understand async code 🚀 #JavaScript #EventLoop #Async

Today’s practice was all about understanding how DOM manipulation really works in JavaScript. I worked on deleting elements dynamically using event handling. At first, it looked simple — just use "remove()" and done. But while practicing, I discovered an important edge case. When using "event.target.parentNode.remove()", it works perfectly when clicking on the intended element (like an image inside a list). But if you click outside the expected target, it can remove the wrong parent — even the entire list. To fix this, I implemented a condition to ensure deletion only happens when the clicked element is the correct one ("IMG" tag). This small practice helped me understand: • The difference between "event.target" and "event.currentTarget" • How DOM structure affects behavior • Why adding conditions makes code safer Every small bug teaches something valuable. #JavaScript #DOM #FrontendDevelopment #LearningInPublic #WebDevelopment

#JourneyToTechJob – Day 8 🚀 #50DaysOfRevision Built a simple Traffic Light Simulator using JavaScript. Features: ✔️ Switch between Red, Yellow, and Green lights ✔️ Dynamic UI updates using DOM manipulation ✔️ Button-based interactions What I revised: → Event handling in JavaScript → DOM manipulation → Writing cleaner and reusable functions 🔗 Live Demo: https://lnkd.in/g-Qnknr4 Here's a quick demo of the project👇 #SoftwareDevelopment #JavaScript #FrontendDevelopment #WebDevelopment #HTML #CSS #Projects #BuildInPublic #Consistency #50DaysOfCodeChallenge

Day 3/200🚀 Understanding JavaScript Closures, Scope & setTimeout Today I explored a tricky but important JavaScript concept while experimenting with setTimeout, var, and let. 🔹 What I Learned: JavaScript executes synchronous code first, then asynchronous callbacks setTimeout does NOT store values, it stores a function (closure) Closures capture variables by reference, not by value var uses a single shared variable let creates a new variable for each iteration 🔹 The Problem I Faced: I expected this code to print 0 1 2, but it printed 3 3 3 🔹 Why It Happened: Loop finished execution first i became 3 All callbacks accessed the same variable reference 🔹 Solution: Using let instead of var creates a new binding for each iteration, giving the expected output. 💡 Key Takeaway: “Closures capture variables by reference. var shares one binding, while let creates a new binding per iteration.” #JavaScript #WebDevelopment #Frontend #NodeJS #LearningInPublic #Coding

I used to avoid reduce method in Javascript because of how confusing it was. Today I wrote my own reduce polyfill. Handling all edge cases, it was challenging at first but then it all clicks. While writing polyfills the core flow of callback, this context and iteration is the easiest & part. But in case of reduce you need to consider following : 1. Initial values 2. Sparse arrays (holes) 3. Dynamic start indexing 4. Edge case handling with custom errors Once you work on each pointers you will understand all edge cases, reduce is not just about iteration its about the flow. #javascript

PEP TASK-6 🚀 Just built a Countdown Timer using JavaScript This project focuses purely on the power of JavaScript to handle real-time updates and dynamic behavior. 🔹 What I implemented: • Real-time countdown logic using JavaScript • Time calculations (days, hours, minutes, seconds) • Automatic UI updates using DOM manipulation • Efficient interval handling with setInterval() Through this project, I explored how JavaScript can be used to build interactive, time-based features without relying on external libraries. 💻 Check it out here: 👉 https://lnkd.in/ghEA3jH8 Feedback and suggestions are welcome! 🙌 #JavaScript #WebDevelopment #Frontend #Coding #StudentDeveloper #Projects

🧠 Day 18 of 21days challenge JavaScript WeakMap ⚡ WeakMap is a collection where keys must be objects. It helps in memory management because keys are weakly referenced. For easy understanding :- WeakMap = object keys only Garbage collected if no other references Useful to store private data 👉 That’s how memory leaks can be prevented This changed how I manage objects efficiently 🚀 #JavaScript #WeakMap #InterviewPrep #Frontend

setTimeout does nothing inside the JavaScript engine. It's a label. A facade. When you call it, JS hands the work off to a browser feature - the actual timer lives outside JavaScript entirely. The browser runs it independently while JS continues on to the next line. All the features we think of as "JavaScript" - timers, network requests, DOM interactions - are actually browser APIs. JS just has labels that trigger them. This is how JS avoids blocking. It doesn't wait. It delegates. The result comes back later, through a controlled channel called the callback queue. Next: the event loop - the single mechanism that controls when deferred code is allowed back into JavaScript. #JavaScript #WebDevelopment #Programming #SoftwareEngineering

PEP TASK-7 🚀 Built a Digital Clock using JavaScript I created a real-time clock application using pure JavaScript, focusing on how time-based functions work behind the scenes. 🔹 What this project demonstrates: • Real-time clock updates using setInterval() • Fetching current time with the JavaScript Date object • Formatting time (HH:MM:SS) dynamically • DOM manipulation to update UI instantly JavaScript makes it possible to build live, interactive features like clocks by continuously updating values every second using functions like setInterval() (Stack Overflow) This project helped me understand how real-time applications work and improved my skills in handling dynamic data in the browser. 💻 Check out the project here: 👉 https://lnkd.in/gWm4YYA5 Would love your feedback! 🙌 #JavaScript #WebDevelopment #Frontend #Coding #StudentDeveloper #Projects #LearningJourney