Building a To-Do List with Vanilla JS and DOM Manipulation

I recently took some time to deeply understand three core JavaScript concepts that often confuse developers: Scope, Hoisting, and Closures. Instead of just memorizing, I wanted to truly understand how and why they work — so I broke everything down with simple explanations and practical examples. 📌 In this article, I covered: The real meaning of Scope (Global, Function, Block, Lexical) What actually happens during Hoisting How Closures work and why they’re so powerful in JavaScript I also connected all three concepts together — because once you see how they relate, things become much clearer 🔥 🔗 Check out the full article: https://lnkd.in/gT6dmXr3 I’d really appreciate your feedback and thoughts 🙌 #javascript #webdevelopment #frontend #programming #closure #hoisting #scope #developers

Confused between var, let, and const? Here's all you need to know. 👇 Most JavaScript developers use all three — but few know exactly when and why. Here's a quick breakdown: ⚠️ var → Function-scoped, hoists as undefined, can be re-declared. Avoid it in modern code. 🔁 let → Block-scoped, re-assignable. Use it when values change. 🔒 const → Block-scoped, immutable binding. Your default choice. 💡 TDZ (Temporal Dead Zone) — let and const are hoisted but can't be accessed before their declaration line. That's a feature, not a bug. 💥One rule of thumb: Always start with const. Switch to let only when you need to reassign. Never touch var. Save this for your next code review. 🔖 #JavaScript #WebDevelopment #Frontend #JS #Programming #100DaysOfCode #CodeTips #SoftwareEngineering

🚀 Day 963 of #1000DaysOfCode ✨ Difference Between var, let & const in JavaScript These three look similar… but behave very differently in real-world code. In today’s post, I’ve broken down the differences between `var`, `let`, and `const` in a simple and practical way, so you can understand when and why to use each of them. From scope and hoisting to re-declaration and mutability, these concepts directly impact how your code behaves — and are often the reason behind many unexpected bugs. I’ve also explained common mistakes developers make while using them, so you can avoid those pitfalls in your own projects. If you’re writing modern JavaScript, having clarity on this is absolutely essential. 👇 Which one do you use the most — `var`, `let`, or `const`? #Day963 #learningoftheday #1000daysofcodingchallenge #FrontendDevelopment #WebDevelopment #JavaScript #React #CodingCommunity #JSBasics

🚨 𝗠𝗼𝘀𝘁 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝗴𝗲𝘁 𝘁𝗵𝗶𝘀 𝘄𝗿𝗼𝗻𝗴 👇 JavaScript variables look simple… Until they silently break your logic 😵 🧠 𝗧𝗿𝘆 𝘁𝗵𝗶𝘀: 𝑐𝑜𝑛𝑠𝑜𝑙𝑒.𝑙𝑜𝑔(𝑎); 𝑣𝑎𝑟 𝑎 = 10; 𝑐𝑜𝑛𝑠𝑜𝑙𝑒.𝑙𝑜𝑔(𝑏); 𝑙𝑒𝑡 𝑏 = 20; 𝗪𝗵𝗮𝘁 𝘄𝗶𝗹𝗹 𝗯𝗲 𝘁𝗵𝗲 𝗼𝘂𝘁𝗽𝘂𝘁? Take a guess before scrolling… 👇 . . . . . . ✅ 𝗔𝗻𝘀𝘄𝗲𝗿: undefined ReferenceError: Cannot access 'b' before initialization 💡 𝗦𝗶𝗺𝗽𝗹𝗲 𝗘𝘅𝗽𝗹𝗮𝗻𝗮𝘁𝗶𝗼𝗻 JavaScript behaves differently for var and let: 👉 var is hoisted and initialized with undefined 👉 let is also hoisted, BUT it stays in a “𝗧𝗲𝗺𝗽𝗼𝗿𝗮𝗹 𝗗𝗲𝗮𝗱 𝗭𝗼𝗻𝗲” until the line where it’s defined So: • a exists → prints undefined • b exists but is 𝗻𝗼𝘁 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗹𝗲 𝘆𝗲𝘁 → throws error 🎯 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆𝘀 • var → function scoped + can lead to unexpected bugs • let → block scoped + safer to use • Always prefer let & const in modern JavaScript 🔥 𝗗𝗶𝗱 𝘆𝗼𝘂 𝗴𝗲𝘁 𝗶𝘁 𝗿𝗶𝗴𝗵𝘁? Be honest 😄 💬 Comment your answer before you saw the solution 🔖 Save this for interview prep 💡 Part of my #FrontendRevisionMarathon — breaking down Frontend concepts daily 🚀 🚀 Follow Shubham Kumar Raj for more such content. #javascript #frontenddeveloper #codinginterview #webdevelopment #learnjavascript #100daysofcode #programming #interviewprep #CareerGrowth #SowftwareEngineering

A method easier than "methods"? 🤯 I was recently working on a problem where I needed to trim an array. I started writing a standard for loop to shift elements and was ready to reach for splice()... but then I tried an experiment. I simply wrote: arr.length = arr.length - 1 It worked perfectly. No methods, no complicated logic, just a direct property change. I actually thought I had found a bug! But after checking the MDN documentation, I realized this is a well-known, intentional feature of JavaScript. Why this is easier than splice() or pop(): Zero Complexity: You don't need to remember arguments or return values. Instant Truncation: If you want to keep only the first 3 items, just set .length = 3. Done. Performance: It's a high-speed way to discard elements without the overhead of method calls. Do you think you'll start using this as your default way to shorten arrays now, or will you stick to splice for better code readability? comment below .. #javascript #codingtips #frontend #react #webdevelopment #programming #webdev #softwareengineering Nikhil Kilivayil Brototype

🎡 JavaScript Event Loop — Quick Challenge Most developers get this wrong 👀 🧪 What will be the output of this code? (Check the image 👇) 👉 Drop your answer in the comments before scrolling. ⏳ Think first... . . . ✅ Answer 1. Start 4. End 3. Promise.then (Microtask) 2. setTimeout (Macrotask) 🔍 Simple Explanation JavaScript runs code in this order: 1️⃣ First → Normal (synchronous) code 2️⃣ Then → All Promises (Microtasks) 3️⃣ Finally → setTimeout (Macrotasks) 👉 Even if setTimeout is 0, it still runs later. 🧠 Takeaway Promise.then → runs sooner setTimeout → runs later Simple rule, but super useful in real projects. 💬 What was your answer? #JavaScript #EventLoop #Frontend #WebDevelopment #CodingTips

💡 var, let, const in JavaScript — easy? Not really 😅 If you think you understand them… try predicting these 👇 for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } Output: 3 3 3 for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); } Output: 0 1 2 🤯 Same code… different output. Why? ⸻ 🔍 The difference: 👉 var is function-scoped • One shared i • All callbacks reference same variable • Final value = 3 👉 let is block-scoped • New i created for each iteration • Each callback gets its own copy 💬 Lesson learned: JavaScript doesn’t just execute code… It follows rules that aren’t always obvious. ⸻ 🚀 Pro Tip: 👉 Prefer let and const over var 👉 Avoid var in modern JavaScript ⸻ #JavaScript #Frontend #WebDevelopment #CodingInterview #JSConcepts #Developers

How JavaScript really works behind the scenes ⚙️🚀 1️⃣ User Interaction User clicks a button → event gets triggered 2️⃣ Call Stack Functions are pushed into the call stack and executed one by one (LIFO) 3️⃣ Web APIs Async tasks like setTimeout, fetch run outside the call stack 4️⃣ Callback Queue After completion, async tasks move into the queue 5️⃣ Event Loop It checks if the call stack is empty and pushes tasks back to it 6️⃣ DOM Update Finally, the browser updates the UI 🎯 Understanding this flow changed the way I write JavaScript 💻 What JavaScript concept confused you the most? 👇 #javascript #webdevelopment #frontenddeveloper #coding #learning

When I first heard "JavaScript is single-threaded," I thought it was a flaw someone was apologizing for. It's not. It's the most important thing to understand about the language. Single-threaded means JS can only do one thing at a time. One line runs, finishes, then the next begins. This makes JS behavior completely predictable - you always know the order things happen, with no two threads fighting over the same variable. The difficulty of async code doesn't come from JS doing multiple things at once. It comes from JS waiting while the browser does work in the background, and needing a controlled way to let that result back in. Once I understood this, async stopped feeling like black magic and started making sense. Next post: what actually happens when a function runs - the call stack. #JavaScript #WebDevelopment #Programming #SoftwareEngineering

💡 JavaScript Basics That Still Confuse Many Developers… Let’s break down a classic: Function Declaration vs Function Expression 👇 🔹 Function Declaration function greet() { console.log("Hello!"); } ✔ Hoisted (you can call it before it’s defined) ✔ Cleaner and easier to read 🔹 Function Expression const greet = function() { console.log("Hello!"); }; ✔ Not hoisted (must be defined before use) ✔ More flexible (can be anonymous, used in callbacks, etc.) 🚀 Key Difference: Function declarations are available throughout the scope, while function expressions behave like variables. 📌 Pro Tip: Prefer function expressions (especially arrow functions) in modern JavaScript for better control and predictability. #JavaScript #WebDevelopment #CodingBasics #Frontend #LearnToCode