Understanding the Temporal Dead Zone in JavaScript

🚀 Day 10 of My 30 Days of JavaScript Journey ✅ Challenge: Allow One Function Call (LeetCode #2666) Create a function once(fn) that ensures a given function can only be executed once. The first call should execute and return the result of fn, while all subsequent calls should return undefined. 💻 Language Used: JavaScript ❓ Problem Link: https://lnkd.in/gpX3MkFD 💡 Solution: https://lnkd.in/gAYsYP6d 🧠 Concept Highlighted: This problem focuses on closures and function state management in JavaScript. By storing state within a closure, we can control how many times a function executes — a powerful concept for optimizing performance and preventing redundant calls. #Day10 #JavaScript #LeetCode #30DaysOfCode #CodingChallenge #WebDevelopment #FrontendDevelopment #Closures #LearningEveryday #ProblemSolving #ES6

Did you know? In JavaScript var, let and const are all hoisted, but they behave differently. Most people think let and const are not hoisted because their behavior does not match var. In reality, they’re placed in a special zone called the Temporal Dead Zone (TDZ). Check out these points for better clarity: 1. var - Hoisted + initialized as undefined 2. let & const - Hoisted but not initialized (that’s why you get ReferenceError) 3. var - Function scoped 4. let & const - Block scoped 5. const - Must be initialized at declaration 6. All global var - live in window object 7. let & const - stored in a separate “Script” scope console.log(a) // reference error let a = 20; isn’t because it’s not hoisted, it' s because a is inside the TDZ. Once you understand this, the behavior of JavaScript stops feeling random. #javascript #frontenddevelopment #webdevelopment #learninginpublic

🚀 Understanding Hoisting in JavaScript Ever wondered how you can use a variable or function before it’s declared? 🤔 That’s because of Hoisting! In JavaScript, hoisting means that variable and function declarations are moved to the top of their scope during the compile phase — before the code actually runs. 🧠 Example: greet(); // ✅ Works! function greet() { console.log("Hello, World!"); } Here, the function greet() is hoisted to the top — that’s why you can call it even before it’s defined. But be careful with variables 👇 console.log(x); // ❌ undefined var x = 10; Variables declared with var are hoisted but not initialized, so they exist but hold undefined. However, variables declared with let and const are also hoisted but stay in the Temporal Dead Zone (TDZ) until they’re actually declared. 📌 In short: Functions → hoisted with their definitions ✅ var → hoisted but undefined ⚠️ let & const → hoisted but inaccessible until declared 🚫 #javascript #frontend #webdevelopment

🧠 Understanding Block Statements and Lexical Scope in JavaScript When I first started coding in JavaScript, I didn’t really pay attention to where I declared my variables — as long as the code ran, I was happy 😅. But once I began working on bigger projects, I realized scope and block behavior can make or break your code’s predictability. Here’s the thing: A block statement is simply the part inside { } — it could be inside an if, a for, or even just a standalone block. Example: { let message = "Hello world"; console.log(message); } console.log(message); // ❌ ReferenceError What’s happening? Because of lexical scoping, variables declared with let and const only exist within the block they were defined in. Meanwhile, var ignores that and leaks out — which is one reason modern JS avoids it. Understanding how lexical scope works helps prevent weird bugs and keeps your functions predictable. It’s one of those quiet fundamentals that makes your JavaScript more intentional and less chaotic. Have you ever been bitten by a var variable leaking out of a block before? 😅 #JavaScript #WebDevelopment #Frontend #CleanCode #JSFundamentals

🔒 JavaScript Closures: The Private Diary Analogy Ever wondered how JavaScript "remembers" things? Let me explain closures with a real-world analogy. Think of a closure like a private diary with a lock: 📖 The diary (outer function) contains your secrets (variables) 🔐 Only you have the key (inner function) to access those secrets ✨ Even after you close the diary, the key still works Why does this matter? The count variable is trapped inside the closure. No one can directly access or modify it from outside. It's like data privacy built into JavaScript! Real-world use case : This powers every search bar you've used that waits for you to stop typing! The key insight: Closures let inner functions remember their environment, even after the outer function has finished executing. Have you used closures in your code today? Share your favorite use case below! 👇 #JavaScript #WebDevelopment #ReactJS #Programming #Frontend #CodingTips #SoftwareEngineering

🚀 JavaScript Hoisting Explained (Simply!) Hoisting means JavaScript moves all variable and function declarations to the top of their scope before code execution. If that definition sounds confusing, see this example 👇 console.log(a); var a = 5; Internally, JavaScript actually does this 👇 var a; // declaration is hoisted (moved up) console.log(a); a = 5; // initialization stays in place ✅ Output: undefined --- 🧠 In Short: > Hoisting = JS reads your code twice: 1️⃣ First, to register variables & functions 2️⃣ Then, to execute the code line by line --- 💡 Tip: var → hoisted & initialized as undefined let / const → hoisted but not initialized (stay in Temporal Dead Zone) --- #JavaScript #Hoisting #WebDevelopment #CodingTips #JSInterview #Frontend #React #100DaysOfCode

JavaScript Gotcha #2: The Vanishing "this" in my callback I was working on a component that fetched user data and updated the UI. Simple stuff — until I noticed that inside one of my callbacks, "this" suddenly became undefined. My code looked something like this: Check Picture. Everything seemed fine… until that console log. Turns out, regular functions don’t retain the class context — this was no longer pointing to my instance. Fix: use an arrow function so this stays lexical. Lesson learned: In JavaScript, this doesn’t mean what you think it means — especially inside callbacks. Arrow functions don’t just look clean; they save your scope. Follow me for more real-world JavaScript gotchas and the lessons they taught me. What’s your most confusing "this" moment?

I ran this JavaScript snippet, and the output completely surprised me 😳. Day 10: How JavaScript actually handles a async operations ⚙️. 🧠 Logic: 🔹 JS execution always starts with synchronous code -> so "start", "First" & "end" log first. 🔹 Inside the loop, setTimeout is added to macrotask queue (it will run later). 🔹 Promise.then() is added to microtask queue (these will run right after sync code), cause of high priority then macrotask queue. 🔹 Inside asyncFn(), when execution hits await it pauses that function exec & waits for promise to get resolve. 🔹 In the mean time, event Loop continue with promise callback in microTask, one it's completed, the promise get resolved in asyncFn() & then it prints ("Second") to console. 🔹 And the last, the setTimeout callback in macroTask queue gets executed. So:  ✅ Promise run first (microTasks). ⏱️ SetTimeout run after (macroTasks). That's why promise 0, promise 1, promise 2, and Second appear before all TimeOut logs. #Javascript #InterviewPrep  #100DaysOfCode #CodingChallenge  #JavaScript #CodingInterview #JSChallenges

🚀 Day 10 of My 30 Days of JavaScript Challenge 🧩 Problem: Allow One Function Call (LeetCode #2666) Given a function fn, return a new function that ensures fn can only be called once. The first call returns the actual result, and every subsequent call returns undefined. 💻 Language: JavaScript 📖 Problem Link: https://lnkd.in/epnrfahZ 💡 Solution: https://lnkd.in/eGQKWkEk 🧠 Concepts Used Closures to store state (whether function is already called) Function Wrapping Higher-Order Functions 📚 Takeaway This problem is a great example of how closures preserve state between function calls — an essential concept for: Memoization API rate-limiting Event listener control #Day10 #JavaScript #30DaysOfCode #LeetCode #WebDevelopment #CodingChallenge #Closures #FrontendDevelopment #100DaysOfCode

🚀 Day 14 — JavaScript Event Loop 🔁 Today I learned one of the most magical parts of JavaScript — The Event Loop! ✨ Even though JavaScript is single-threaded, it can still handle asynchronous tasks like setTimeout, fetch, and Promises. Here’s what I understood 👇 🧠 Call Stack → Runs all normal (synchronous) code. 🌐 Web APIs → Handles async work like timers, DOM events, etc. 🕒 Callback Queue → Stores async callbacks waiting to run. ⚡ Microtask Queue → Stores promise callbacks (runs before callback queue). 🔁 Event Loop → Keeps checking if the call stack is empty and moves tasks from queues to stack. 💡 Key Lesson: - Promises run before setTimeout (microtasks run first). - The Event Loop helps JavaScript look asynchronous, even though it’s single-threaded! #JavaScript #EventLoop #WebDevelopment #100DaysOfCode #MERN #CodingJourney