JavaScript Variables & Scope Fundamentals

While learning JavaScript, I noticed something that felt really strange at first. If you create a variable without using let, var, or const, JavaScript doesn’t throw an error. Instead… it silently creates a new variable What’s even more surprising is that this variable can be accessed outside the block where it was written. So how does this happen? When the JavaScript engine encounters a variable, it first checks the current block scope. If it doesn’t find it, it keeps going up through the parent scopes. If the variable is still not found, JavaScript creates it in the global scope, making it accessible everywhere. This behavior comes from the early philosophy of JavaScript. The language was designed to be forgiving and flexible, to help developers build web pages quickly without strict rules getting in the way. But this flexibility comes at a cost. Accidentally creating global variables can lead to: Data leaking between parts of the app Hard-to-track bugs Conflicts between scripts Once developers realized how dangerous this could be, Strict Mode was introduced: Js "use strict"; With strict mode enabled, JavaScript throws an error when you try to use an undeclared variable, preventing this silent leakage. This was a great reminder for me that JavaScript’s “weird” behaviors usually have historical reasons behind them — and understanding those reasons makes you a better developer, not just a user of the language. #JavaScript #JS #LearningJoureny #Web #SWE #coding

🧵 How JavaScript Does 10 Things at Once (While Being Single-Threaded) 🔄 Ever wondered how JavaScript handles API calls, timers, or async tasks without freezing the browser UI? The secret is the Event Loop. Even though JavaScript is single-threaded (it can do only one thing at a time), the Event Loop allows it to be asynchronous and non-blocking. Here’s a simple 4-step breakdown of how it works 👇 1️⃣ Call Stack This is the “Now” zone. JavaScript executes synchronous code here. If a function is in the stack, the engine is busy. 2️⃣ Web APIs / Node APIs When you use `setTimeout`, `fetch`, or DOM events, JavaScript hands them off to the browser/Node environment. This keeps the call stack free so the UI doesn’t freeze. 3️⃣ Callback Queue & Microtask Queue Once async tasks complete, their callbacks wait here. 👉 Promises (Microtasks) always run before timers (`setTimeout`). 4️⃣ Event Loop This is the coordinator. It constantly checks: • Is the Call Stack empty? • If yes → move the next task from the queue to the stack. 🔑 Golden Rule: Avoid blocking the Event Loop with heavy synchronous code — otherwise users will experience laggy interfaces. Learning this really helped me understand async JavaScript better 🚀 #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #EventLoop #Programming #javascript

🧵 How JavaScript Does 10 Things at Once (While Being Single-Threaded) 🔄 Ever wondered how JavaScript handles API calls, timers, or async tasks without freezing the browser UI? The secret is the Event Loop. Even though JavaScript is single-threaded (it can do only one thing at a time), the Event Loop allows it to be asynchronous and non-blocking. Here’s a simple 4-step breakdown of how it works 👇 1️⃣ Call Stack   This is the “Now” zone. JavaScript executes synchronous code here.   If a function is in the stack, the engine is busy. 2️⃣ Web APIs / Node APIs   When you use `setTimeout`, `fetch`, or DOM events, JavaScript hands them off to the browser/Node environment.   This keeps the call stack free so the UI doesn’t freeze. 3️⃣ Callback Queue & Microtask Queue   Once async tasks complete, their callbacks wait here.   👉 Promises (Microtasks) always run before timers (`setTimeout`). 4️⃣ Event Loop   This is the coordinator.   It constantly checks: • Is the Call Stack empty?   • If yes → move the next task from the queue to the stack. 🔑 Golden Rule:   Avoid blocking the Event Loop with heavy synchronous code — otherwise users will experience laggy interfaces. Learning this really helped me understand async JavaScript better 🚀 #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering #EventLoop #Programming

Ever wondered what actually happens behind the scenes when JavaScript runs your code? 🤔 How Variables & Functions Work Behind the Scenes in JavaScript Today I focused on understanding what actually happens inside the JavaScript engine when we write variables and functions — and it completely changed how I read JS code. 🧠 Step 1: JavaScript Creates an Execution Context Before executing any code, JavaScript creates an Execution Context. This happens in two phases: 1. Creation Phase (Memory Allocation Phase) In this phase, JavaScript scans the entire code before running it and prepares memory. ✔ Variables var variables are allocated memory and initialized with undefined let and const are also allocated memory, but they stay in the Temporal Dead Zone (TDZ) until initialized ✔ Functions Function declarations are stored fully in memory (function body included) Function expressions & arrow functions behave like variables and depend on var / let / const 👉 This is the real reason hoisting exists. 2.Execution Phase (Code Runs Line by Line) Now JavaScript starts executing the code: Variables get their actual values Functions are executed when they are called A new Function Execution Context is created for every function call Each context is pushed to the Call Stack After execution, it is removed from the stack Why Functions Can Be Called Before Declaration? because function declarations are fully hoisted during the creation phase. 💡 Key Takeaways JavaScript doesn’t execute code directly — it prepares first Hoisting is a byproduct of the creation phase var, let, and const differ because of how memory is allocated Understanding execution context makes debugging much easier. Mastering the basics is what truly levels up a developer. Thanks to Anshu Pandey and Sheryians Coding School #JavaScript #JavaScriptbasics #ES6 #JSEngine #coding

🔹 Day 1/30 – JavaScript Variables (var, let, const) When I started learning JavaScript, I thought variables were one of the easiest topics. But very quickly I realized that many beginner mistakes actually start from here. Variables are used to store data that JavaScript needs to remember — user input, calculations, API data, and application state. Without variables, JavaScript would not be able to create dynamic and interactive websites. JavaScript provides var, let, and const for declaring variables. While var was used earlier, modern JavaScript mostly relies on let and const because they are safer and more predictable. Understanding scope and reassignment early helps avoid confusion later when working with functions, loops, and frameworks. Today reminded me that strong fundamentals matter more than speed. ❓ Do you use const by default while writing JavaScript? #JavaScript #LearningInPublic #WebDevelopment #StudentDeveloper

🔹 Understanding Array.reduce() in hashtag #JavaScript reduce() is one of the most powerful array methods in JavaScript. It allows us to process a list of values and combine them into a single meaningful result. Instead of writing multiple loops or maintaining extra variables, reduce() handles accumulation in a clean and structured way. It works by taking each element of an array, applying logic to it, and carrying forward the result until the final value is produced. 💡 Why developers love 𝗿𝗲𝗱𝘂𝗰𝗲() • Ideal for calculating totals and summaries • Helps transform arrays into numbers, objects, or strings • Reduces repetitive logic and improves readability • Commonly used in real-world applications like carts, analytics, and dashboards • Mastering fundamentals like reduce() leads to cleaner code and better problem-solving skills in frontend development. Follow Lakhan Soni for more. JavaScript Mastery #JavaScript #FrontendDevelopment #WebDevelopment #Learning #CleanCode Activate to view larger image,

JavaScript feels simple… until someone asks: 𝐂𝐚𝐧 𝐲𝐨𝐮 𝐞𝐱𝐩𝐥𝐚𝐢𝐧 𝐡𝐨𝐰 𝐭𝐡𝐢𝐬 𝐜𝐨𝐝𝐞 𝐫𝐮𝐧𝐬 𝐢𝐧𝐭𝐞𝐫𝐧𝐚𝐥𝐥𝐲? Initially, JavaScript felt magical to me. Hoisting. Call stack. Async. I was just memorizing rules, not understanding what was really happening. Then I learned the Execution Context + Call Stack mental model (thanks to Akshay Saini 🚀 ) — and suddenly, everything clicked. 𝐇𝐨𝐰 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐚𝐜𝐭𝐮𝐚𝐥𝐥𝐲 𝐫𝐮𝐧𝐬: JavaScript runs inside an Execution Context. It starts with the 𝐆𝐥𝐨𝐛𝐚𝐥 𝐄𝐱𝐞𝐜𝐮𝐭𝐢𝐨𝐧 𝐂𝐨𝐧𝐭𝐞𝐱𝐭. It’s just an environment where your code is prepared and then run. Each execution context has two phases: 𝐌𝐞𝐦𝐨𝐫𝐲 𝐩𝐡𝐚𝐬𝐞 • Memory is allocated to variables and functions • Variables get a placeholder value: undefined • Functions are stored completely 𝐄𝐱𝐞𝐜𝐮𝐭𝐢𝐨𝐧 𝐩𝐡𝐚𝐬𝐞 • Code runs line by line • Values are assigned to variables • When a function is called, a new execution context is created • When the function finishes, its context is removed 𝐖𝐡𝐨 𝐦𝐚𝐧𝐚𝐠𝐞𝐬 𝐚𝐥𝐥 𝐭𝐡𝐢𝐬? The Call Stack • Global Execution Context goes first • Each function call goes on top • When finished → it gets popped off Credits to Akshay Saini 🚀 𝐉𝐚𝐯𝐚𝐒𝐜𝐫𝐢𝐩𝐭 𝐃𝐞𝐞𝐩 𝐃𝐢𝐯𝐞 𝐩𝐥𝐚𝐲𝐥𝐢𝐬𝐭:  https://lnkd.in/gy5ypSGf Blog: https://lnkd.in/gd8ZFDiJ #javascript #webdevelopment #interviews #engineering #learning #namastejavascript #namastejs #namastedev #akshaysaini #nodejs #systemdesign

Understanding JavaScript internals completely changed the way I write and think deeply about how it works, which has given me confidence. 🚀 How Objects Work Behind the Scenes in JavaScript In JavaScript, objects are not stored directly in variables the way primitive values are. 👉 Objects(body) live in Heap Memory, and variables only store a reference (address) to that object. What does this mean in practice? When you assign an object to another variable, the reference is copied, not the object itself When you pass an object to a function, the function receives the same reference Any change made using one reference affects the original object let user1 = { name: "Alex" }; let user2 = user1; user2.name = "John"; console.log(user1.name); // John Both variables point to the same memory location in the heap. 🧠 Key Insight: JavaScript objects follow pass-by-reference behavior (reference copy), which is why unintended mutations can happen if we’re not careful. Understanding this concept helped me clearly see: Why shallow copy causes issues Why deep copy is sometimes necessary Why objects behave differently from primitives Once you understand the internals, JavaScript stops feeling magical and starts making sense. Go through the diagram, and you will understand better. Thanks to AKA- Anshu Pandey #JavaScript #Objects #MemoryManagement #JSInternals #WebDevelopment #Learning #FrontendDevelopment #WebDevelopment

Hi everyone, Everyone is willing to learn JavaScript topics. But sometimes, we forget the most important part — how the code actually gets executed. And don’t worry, you’re not alone. I was in the same place too. Learning syntax is easy. Understanding execution is where real clarity begins. So I’m trying to break it down in a simple way, starting with how JavaScript runs code behind the scenes. Because once you understand execution, async behavior, callbacks, and the event loop start making sense. JavaScript looked synchronous… until it wasn’t. I remember writing a few console.log statements and expecting them to execute line by line. But the output surprised me. That’s when I started digging into how JavaScript actually works behind the scenes. I learned that JavaScript runs on a single thread, but it still handles async operations using the Event Loop. Here’s what clicked for me Microtasks (Promises, async/await callbacks) get higher priority Macrotasks (setTimeout, setInterval, DOM events) wait their turn The Event Loop always clears microtasks first, before moving to the next macrotask. 📌 Simple mental model: Microtasks = urgent work Macrotasks = scheduled work 📌 Lesson learned: Understanding the Event Loop explains why async code behaves the way it does — and helps avoid hard-to-debug issues. #JavaScript #EventLoop #AsyncProgramming #WebDevelopment #LearningInPublic