JavaScript Scope: Global, Function, Block Explained

What will happen if you call a variable before initialization? 🤔 That is called Hoisting 👉 "JavaScript moves declarations to the top of their scope before execution" Sounds confusing? Let’s break it down 👇 When you create variables or functions, JavaScript runs your code in 2 phases: 1️⃣ Memory Creation Phase Before execution, JavaScript scans your code and allocates memory Example (mentally): var a → undefined let b → uninitialized (Temporal Dead Zone) 2️⃣ Execution Phase Now JavaScript runs your code line by line 👉 If you access variables before initialization: var → returns undefined let / const → ReferenceError Why does this happen? Because: var is initialized with undefined in memory let and const are hoisted but stay in the Temporal Dead Zone (TDZ) until the line where they are declared Simple way to remember: var => “exist, but don’t have a value yet” let / const => “Don’t touch before declaration” ⚡ Bonus: Function declarations are fully hoisted, so you can call them before defining them Curious how functions behave in hoisting? 🤔 Go Google function vs function expression in JavaScript — it’ll surprise you 👀 That’s hoisting in JavaScript 🚀 #javascript #webdevelopment #coding #frontend #learninpublic #hoisting

🤔 Why does this code NOT run in the order you expect? You set a timeout of 0ms… But it still runs after the next console.log() 😳 👉 Isn’t 0 supposed to mean immediate? 🚀 One of the most important (and misunderstood) concepts in JavaScript: The Event Loop 🧠 What is the Event Loop? JavaScript is single-threaded 🧵 (It can do only ONE thing at a time) But somehow… it handles: - API calls 🌐 - Timers ⏱️ - User clicks 🖱️ 👉 smoothly, without blocking everything 💡 That’s because of the Event Loop ⚙️ The 4 Core Components : 1️⃣ Call Stack → Where code runs (LIFO) 2️⃣ Web APIs → Browser handles async tasks 3️⃣ Microtask Queue → Promises (high priority) 4️⃣ Macrotask Queue → setTimeout, events 🔄 How it actually works 1. Code runs in the Call Stack 2. Async tasks (like setTimeout) go to Web APIs 3. When done → they move to queues 4. The Event Loop constantly checks: "Is the Call Stack empty?" 5. If the stack is empty, it pushes the first task from the queue into the stack to be run. ⚡ The “0ms Timeout” Paradox Even with 0ms, setTimeout is NOT immediate. 👉 It still goes to the queue 👉 It waits for the stack to clear 🔥 Microtask vs Macrotask (Game Changer) 👉 Microtasks > Macrotasks That means: - Promises run BEFORE setTimeout - Even if timeout is 0ms 😅 💡 Real Dev Insight : If your UI freezes 🧊 👉 It’s NOT always JavaScript or your logic It’s often: - Blocking the Call Stack - Long synchronous code 🚨 When the stack is busy → NOTHING else runs (No clicks, no animations, no updates) 🚀 Final Thought JavaScript isn’t slow… 👉 Blocking it makes it slow Understanding the Event Loop = Better performance + fewer bugs + stronger fundamentals 💪 #JavaScript #FrontendDevelopment #WebDevelopment #EventLoop #AsyncJavaScript #CodingTips #LearnJavaScript #BuildInPublic #100DaysOfCode

⚡ Day 7 — JavaScript Event Loop (Explained Simply) Ever wondered how JavaScript handles async tasks while being single-threaded? 🤔 That’s where the Event Loop comes in. --- 🧠 What is the Event Loop? 👉 The Event Loop manages execution of code, async tasks, and callbacks. --- 🔄 How it works: 1. Call Stack → Executes synchronous code 2. Web APIs → Handle async tasks (setTimeout, fetch, etc.) 3. Callback Queue / Microtask Queue → Stores callbacks 4. Event Loop → Moves tasks to the stack when it’s empty --- 🔍 Example: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); --- 📌 Output: Start End Promise Timeout --- 🧠 Why? 👉 Microtasks (Promises) run before macrotasks (setTimeout) --- 🔥 One-line takeaway: 👉 “Event Loop decides what runs next in async JavaScript.” --- If you're learning async JS, understanding this will change how you debug forever. #JavaScript #EventLoop #WebDevelopment #Frontend #100DaysOfCode 🚀

📚 Blog Series Update! Between projects and busy work hours, I spent some time this week working on Part 3 of my Rediscovering JavaScript series, and now I’m happy to share a new weekend read: Variables, Scope, and Memory 🚀 In this blog post, I explore some of the most important JavaScript fundamentals: 🔹 Primitive vs reference values 🔹 Scope and scope chain 🔹 Execution context 🔹 Memory management & garbage collection These topics may sound basic, but they explain many of the “why did this happen?” moments developers face while coding. 🔗 Part 3 Rediscovering JavaScript (Part 3): Variables, Scope, and Memory: https://lnkd.in/ek8CySJc 🔗Friend link: https://lnkd.in/e4ddDhSc ✨ For this journey, I’m using Professional JavaScript for Web Developers by Nicholas C. Zakas as my main guide. ☕ Wishing you a wonderful weekend and an enjoyable read with your coffee! #JavaScript #WebDevelopment #Frontend #Programming #SoftwareEngineering #DevTips #Medium

I got tired of print-debugging. So I built something different. CodeReplay🔂 lets you rewind your JavaScript execution like a video — scrub through every variable change, function call, and return value step by step. No breakpoints. No console.log spam. Just a timeline you can drag. No install. No signup. Open the link and paste your code. Here's what's under the hood: ▸ Custom Babel AST plugin that instruments your code before it runs ▸ Sandboxed iframe execution — untrusted code runs in complete isolation ▸ Immutable timeline engine — scrubbing reconstructs state via left fold ▸ Monaco Editor (VS Code's engine) with real-time line highlighting ▸ Claude AI explains each step in plain English ▸ 25 unit tests on the core engine ▸ Fully client-side The hardest part wasn't the UI. It was writing a Babel plugin that walks an AST and injects trace hooks without breaking the code. That's the kind of problem I enjoy. 🔗 Try it live: https://lnkd.in/gakdz3Up 🔗 GitHub: https://lnkd.in/gM-VmJq4 Built with React, Vite, Babel, Monaco Editor, and Claude API. #javascript #react #opensource #buildinpublic #frontend #webdevelopment

Ever written JavaScript that *shouldn’t* work… but somehow does? 🤯 I remember staring at my screen thinking, “Did JS just ignore my logic?” Here’s the problem 👇 JavaScript has this hidden behavior called **hoisting**. It moves declarations (not values) to the top of the scope *before execution*. Sounds helpful… until it silently breaks your expectations. Here’s the insight 💡 * `var` gets hoisted and initialized as `undefined` * `let` & `const` are hoisted but stay in a “temporal dead zone” 🚫 * Functions? Fully hoisted — you can call them before defining! Example: ```js console.log(a); // undefined 😵 var a = 5; ``` Lesson learned 📌 JavaScript isn’t “weird” — it just follows rules we often ignore. Understanding hoisting = fewer bugs + cleaner logic. Now I always think: “What does JS see *before* running this?” 👀 If you’re diving deeper into JS concepts, I share more here 👉 https://webdevlab.org 🚀 Curious… have you ever been surprised by hoisting in your code? 😄 #JavaScript #WebDevelopment #Frontend #CodingTips #DevLife

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸𝘀: 𝗪𝗵𝘆 𝗧𝗵𝗲𝘆 𝗘𝘅𝗶𝘀𝘁 You use callback functions in JavaScript. You might not notice them. A callback is a function. You pass it as an argument to another function. The first function runs the callback after a task finishes. JavaScript does one thing at a time. Some tasks take time. Fetching data or reading files is slow. Callbacks stop your program from freezing. They tell JavaScript to run a function only when the task ends. You see callbacks in many places: - Event listeners run when you click a button. - Array methods like map use callbacks. - Timers use callbacks to wait. Too many callbacks create a problem. This is callback hell. Your code looks like a pyramid. It is hard to read. Use Promises or async/await to fix this. Recap: - Callbacks are functions passed as arguments. - They keep your app responsive. - They handle events and data. - Nested callbacks are hard to manage. Source: https://lnkd.in/gQwDbR9q

Understood Hoisting in a much deeper way — not just definition, but what actually happens inside the JavaScript engine 👇 🧸 Imagine JavaScript like a teacher in a classroom Before teaching, the teacher prepares a register (memory) and writes all names first. 👉 JavaScript does the same thing before running code. 🧠 Behind the scenes (Real Concept): JavaScript runs in 2 phases: 1️⃣ Memory Creation Phase 2️⃣ Execution Phase ⚙️ During Memory Creation Phase: JavaScript creates something called an Execution Context (inside the Call Stack) Inside it, memory is allocated: 1- var → stored as undefined 2- let & const → stored but not initialized (Temporal Dead Zone) 3- functions → stored with full definition 💡 Example: console.log(a); var a = 10; 👉 Memory phase: a = undefined 👉 Execution phase: prints undefined 💡 Another example: console.log(b); let b = 20; 👉 Memory phase: b exists but is not initialized 👉 Execution phase: ❌ ReferenceError (because of Temporal Dead Zone) 💡 Functions: sayHi(); function sayHi() { console.log("Hi"); } 👉 Works because functions are fully stored in memory before execution 🎯 So what is Hoisting REALLY? It’s NOT “moving code to the top” ❌ It’s the result of how JavaScript allocates memory inside the Execution Context before execution begins ✅ 💼 Interview Insight: Most people say: 👉 “JS moves variables to top” ❌ Better answer: 👉 “Hoisting is a JavaScript behavior that occurs during the creation phase of the execution context, where memory is allocated for variables and functions before code execution. Variables declared with var are initialized as undefined, while let and const remain uninitialized in the Temporal Dead Zone, and function declarations are stored with their full definition.” #JavaScript #FrontendDeveloper #WebDevelopment #CodingJourney

Day 5: The Shortest JavaScript Program — What happens when you write NOTHING? 📄✨ Today I learned that even if you create a totally empty .js file and run it in a browser, JavaScript is already working hard behind the scenes. 🕵️♂️ The "Shortest Program" If your file has zero lines of code, the JavaScript Engine still does three major things: Creates a Global Execution Context. Creates a window object (in browsers). Creates the this keyword. 🪟 What is window? The window is a massive object created by the JS engine that contains all the built-in methods and properties (like setTimeout, localStorage, or console) provided by the browser environment. 🧭 The this Keyword At the global level, JavaScript sets this to point directly to the window object. 👉 Proof: If you type console.log(this === window) in an empty file, it returns true! 🌐 The Global Space I also explored the Global Space—which is any code you write outside of a function. If you declare var x = 10; in the global space, it automatically gets attached to the window object. You can access it using x, window.x, or this.x. They all point to the same memory location! 💡 Key Takeaway: Anything not inside a function sits in the Global Memory Space. Keeping this space clean is vital for performance and avoiding variable name collisions in large apps! It’s fascinating to see that even before we write our first line of code, JavaScript has already set up the entire "universe" for us to work in. #JavaScript #WebDevelopment #NamasteJavaScript #ExecutionContext #WindowObject #JSFundamentals #CodingJourney #FrontendEngineer

🚀 𝐃𝐚𝐲 6 – 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐄𝐯𝐞𝐧𝐭 𝐋𝐨𝐨𝐩 (𝐒𝐢𝐦𝐩𝐥𝐞 & 𝐂𝐥𝐞𝐚𝐫) JavaScript is single-threaded… 👉 But then how does it handle things like `setTimeout`? 🤔 Let’s understand the real flow 👇 --- 💡 The Setup JavaScript uses: * Call Stack → runs code * Web APIs → handles async tasks * Callback Queue → waits for execution * Event Loop → manages everything --- 💡Example: console.log("Start"); setTimeout(() => {  console.log("Timeout"); }, 0); console.log("End"); --- 💡 Output: Start End Timeout --- 💡 Why? (Step-by-step) * `Start` → runs immediately * `setTimeout` → sent to Web APIs * `End` → runs immediately * Timer completes → callback goes to Queue * Event Loop checks → Stack empty * Callback pushed to Stack → executes --- ⚡ Key Insight 👉 Even with `0ms`, it does NOT run immediately 👉 It waits until the Call Stack is empty --- 💡 Simple Mental Model 👉 “Async code runs after sync code finishes” --- 💡 Why this matters? Because it explains: * execution order * async behavior * common bugs --- 👨💻 Continuing my JavaScript fundamentals series 👉 Next: **Promises (Async Made Better)** 👀 #JavaScript #WebDevelopment #FrontendDevelopment #Coding #SoftwareEngineer #Tech