Understanding JavaScript Scope, Hoisting, and Closures

Day 4 — Today was the day the web stopped being static for me. DOM manipulation. Sounds scary. Actually really fun. Built a simple to-do list from scratch — no libraries, no frameworks. Just vanilla JS touching the page directly. The moment I typed something in an input field and saw it appear on screen because of code I wrote... that feeling doesn't get old. Key thing I learned: event delegation. Instead of adding an event listener to every single element, you add one to the parent and let events bubble up. Cleaner and way more efficient. Also — preventDefault() is your best friend in form handling. Took me an embarrassing number of refreshing pages to learn that lesson. What was your first "I built this" moment in coding? #javascript #webdev #frontenddeveloper #learninpublic

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

Most developers jump into JavaScript… But ignore the ONE concept that controls everything 👇 👉 Execution Context If you truly understand this, you’ll: ✔ Stop struggling with hoisting ✔ Fix scope-related bugs easily ✔ Understand how “this” actually works ✔ Write better closures 💡 In simple terms: Every line of JavaScript runs inside an Execution Context. There are only 3 types: 1. Global Execution Context 2. Function Execution Context 3. Eval Execution Context (rare) But the real magic is inside it: ⚡ Lexical Environment ⚡ Scope Chain ⚡ this Binding 🔥 Master this = You understand how JavaScript actually works under the hood I created a simple PDF + visual breakdown to make it easy 👇 Comment “JS” and I’ll share it with you 🚀 #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode #Developers #Programming #SoftwareEngineer #Tech #LearnToCode

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 Secret Most Developers Miss Most developers use || for default values… But very few truly understand the Nullish Coalescing operator (??) The problem with ||: let count = 0; let result = count || 10; console.log(result); // 10 ❌ Why? Because || treats all falsy values as false: 0, "", false, NaN, null, undefined Now see the correct way using ??: let count = 0; let result = count ?? 10; console.log(result); // 0 ✅ ?? only replaces the value when it's: null undefined More examples: "" ?? "default" // "" false ?? true // false NaN ?? 100 // NaN undefined ?? "hello" // "hello" Simple rule: || → checks falsy values ?? → checks null or undefined only JavaScript isn’t weird… it’s precise. You just need to know the right tool. #JavaScript #WebDevelopment #Frontend #Backend #Coding #LearnToCode #DevTips #Programming

JavaScript debounce vs throttle, visualized. Both are used to control how often a function runs in response to rapid events like typing, scrolling, or resizing, but they behave in very different ways. Debounce waits until the activity stops before firing, which makes it a great fit for things like search inputs or autocomplete. Throttle, on the other hand, keeps firing at controlled intervals while the activity is still happening, which makes it useful for scroll, resize, or continuous UI updates. In the example, I used Lodash’s debounce and throttle to represent that behavior in code. I used Codex + Remotion skill for this one, and it was interesting to compare with my usual Claude Code + Remotion skill flow. I’ve been experimenting with videos created 100% with agents — from concept to visuals — and it’s been a really interesting workflow to explore. #javascript #webdev #frontend #programming #uidesign

JavaScript Weirdness That Blows Minds Did you know? NaN === NaN returns false Yes, you read that right. In JavaScript, NaN (Not a Number) is the only value that is not equal to itself. Why? Because NaN represents an invalid or undefined numeric result. And according to how JavaScript handles numbers internally, different invalid operations can produce different “NaN-like” values, so they are not considered equal. console.log(NaN === NaN); // false So how do you check it correctly? Number.isNaN(NaN); // true Bonus: typeof NaN // "number" Yes… it's a number too JavaScript isn’t weird… it’s just misunderstood. #JavaScript #WebDevelopment #Programming #Coding #Frontend #LearnToCode #DevTips

Async JavaScript used to feel messy… First callbacks → then promises → still confusing 😅 But then came async/await — and suddenly everything started making sense. 1. Cleaner code 2. Better readability 3. Easier error handling In this blog, I’ve broken it down in a simple and beginner-friendly way with examples and visuals. If async still confuses you, this might help https://lnkd.in/gXYD7Qbg Would love your feedback 🙌 #javascript #webdevelopment #frontend #programming #100DaysOfCode

A closure isn't a concept to memorize. It's something your code is already doing. Most developers hear the word "closure" and immediately feel behind. They're not. They've been writing closures since day one. Take a look at the image below. That inner function has no variable of its own — but it remembers the one from the outer scope, even after the outer function has finished running. Not a copy. A live reference. Which is why the value keeps updating across calls instead of resetting to zero. That's the whole mechanism. That's a closure. You've already used this pattern without knowing the name: → Debounce and throttle utilities → Event handlers that track state between calls → React's useState — built on this exact idea The concept was never the hard part. The word made it sound harder than it is. Once you see it — you'll start spotting closures in code you wrote years ago. #JavaScript #WebDev #FrontendDevelopment #ReactJS #Programming

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