Bala Anil Kumar Yarravarapu’s Post

🤔 Quick question: If JavaScript is single-threaded, who decides when async code runs? When I first heard about the Event Loop, I imagined something very complex. Turns out… it’s just a coordinator that decides when JavaScript can execute async callbacks 👇 -------------------------------- console.log("Start"); setTimeout(() => {  console.log("Timeout"); }, 0); Promise.resolve().then(() => {  console.log("Promise"); }); console.log("End"); -------------------------------- Output: - Start - End - Promise - Timeout 💡 High-level mental model: - JavaScript executes synchronous code using the Call Stack - Async tasks are handled by the runtime environment - When the stack is empty, the Event Loop checks:   - Microtasks (Promises)   - Then macro tasks (setTimeout, events) - It pushes the next callback onto the stack for execution Takeaway: The event loop is what makes asynchronous javascript possible. It doesn’t run code in parallel — it decides when callbacks can run. 👉 Did this execution order surprise you the first time you saw it? #JavaScript #WebDevelopment #FullStack #LearningInPublic

Day 6: I learned how JavaScript actually runs code, and it makes lot of sense At first, it was a little confusing, but I’ve come to understand the main concepts and how they work. First thing I learned: Execution Context Every JavaScript program runs inside an execution context. It’s a dedicated workspace where your code is executed. Within that space, JavaScript keeps track of the variables that are defined, what other scopes are accessible, and what "this" refers to at that particular moment. I can also say, execution context is a box where your code gets set up and executed. Every time JavaScript runs code, it creates one. Inside that box, three things exist: - Variable Environment: where all your variables and functions are stored - Scope Chain: determines which variables your code has access to - The "this" keyword: tells your code what object it's currently working with Then there's the Call Stack The call stack is simply JavaScript's way of keeping track of where it is in our code. Every time a function is called, it gets placed on top of the stack. When it finishes, it gets removed. We can get a good illustration of this using stack of plates, the item added most recently is the one removed first. And finally: the Callback Queue When you click a button, it doesn’t run the code right away. Instead, it puts a function in a waiting line called the callback queue. Once the main code (the call stack) is done, the function gets picked up and runs In plain terms; - Code runs in a workspace called the execution context. - JavaScript keeps track of what’s running next using a call stack. - Functions triggered by events wait in line in the callback queue. #JavaScriptJourney #LearningToCode

🚀 Event Loop Deep Dive — How JavaScript Really Executes Your Code Most developers use async JavaScript every day… but very few truly understand how it actually works under the hood. JavaScript is single threaded, yet it handles: • API calls • timers • promises • user interactions So what’s the secret? 👉 The Event Loop I just published a deep-dive article where I break this down step by step: ✔ How JavaScript executes synchronous code ✔ What really happens inside the Call Stack ✔ Global Execution Context explained visually ✔ Microtasks vs Macrotasks (Promises vs setTimeout) ✔ Why execution order surprises even experienced devs No shortcuts. No magic. Just how JavaScript really works. If you’ve ever been confused by execution order or faced weird async bugs this one’s for you. 📖 Read the full article here: 🔗 https://lnkd.in/dbUCv6N5 #JavaScript #EventLoop #WebDevelopment #Frontend #SoftwareEngineering #AsyncJS #React #NodeJS

🚀 Day 3 Not Just Motivation — Real Concepts to Build Strong Technical Understanding (Part 3) JavaScript Concept That Finally Made Everything Clear: Global Execution Context (GEC) Most JavaScript confusion doesn’t come from complex syntax. It comes from not knowing how JavaScript starts executing your code. Before the first line runs, JavaScript does something very important. 👇 It creates the Global Execution Context (GEC). What really happens when a JS file runs? 🔹 Step 1: GEC is created This is the default execution environment for your program. 🔹 Step 2: GEC is pushed into the Call Stack Yes — the Call Stack starts with GEC. And since the Call Stack follows LIFO (Last In, First Out): GEC stays at the bottom until everything finishes. No function can execute unless GEC already exists. GEC works in two phases (this is key) 1️⃣ Memory Creation Phase (Preparation) Memory is allocated before execution var → undefined Functions → full definition stored let / const → exist but uninitialized (TDZ) 👉 This explains hoisting without any mystery. 2️⃣ Execution Phase Code runs line by line Variables get actual values Functions create their own execution contexts Each new context goes on top of the Call Stack And when a function finishes? 👉 Its execution context is popped off the stack (LIFO in action). One subtle but important detail In the global execution context: Browser → this === window Node.js → this === global Why this concept matters Once you truly understand GEC: Hoisting stops being confusing Call Stack behavior makes sense Async concepts feel more logical Debugging becomes easier 📌 Key takeaway JavaScript doesn’t jump into execution. It prepares memory, sets context, pushes GEC to the Call Stack — then starts running your code. If JavaScript ever felt unpredictable, it’s not chaos. It’s a well-defined execution model — once you see it, you can’t unsee it. #JavaScript #ExecutionContext #CallStack #React #Frontend #TechConcepts #LearningInPublic

🤔 Quick question: When JavaScript runs async code, where does everything actually go? After learning about the Call Stack and Event Loop, I realized something important: JavaScript doesn’t work alone — it collaborates with Web APIs and queues 👇 --------------------------- console.log("Start"); setTimeout(() => {  console.log("Timeout"); }, 0); console.log("End"); ---------------------------- Output: - Start - End - Timeout 💡 What happens behind the scenes? - console.log("Start") → pushed to the Call Stack - setTimeout → handed off to Web APIs - console.log("End") → runs immediately Once the Call Stack is empty: - Event Loop checks the Task Queue - setTimeout callback is pushed back to the stack - Callback executes How the pieces fit together Call Stack → executes JavaScript Web APIs → handle timers, DOM events, network calls Queues → hold callbacks waiting to run Event Loop → coordinates everything Takeaway JavaScript executes code using the Call Stack, offloads async work to Web APIs, and uses the Event Loop to decide when callbacks can run. #JavaScript #WebDevelopment #FullStack #LearningInPublic

you'd definitely be using JS if you are a developer, but do you know how it's executed? Let’s see how JavaScript internally works 🚀 Before any line of JavaScript is executed, the JS engine creates something called the Global Execution Context. This is the starting point of JavaScript execution. Global Execution Context has 3 main parts: 1️⃣ Memory Component (Variable Environment) Memory is allocated for variables and functions. It scans the variables and store them before execution but assigns value on execution. This is called hoisting. var → undefined function declarations → stored completely Do let and const hoist? yes, for let / const - memory is allocated but not accessible (Temporal Dead Zone) 2️⃣ Code Component (Execution Thread) This is where JavaScript executes the code line by line. Here the variables are assigned their values, function calls are executed, etc. 3️⃣ this keyword In the global context: Browser → window Node.js → global 💡 In simple terms: GEC is the foundation on which JavaScript runs. Understand this, and concepts like hoisting, scope, and errors start making sense automatically. Did you find it interesting? #JavaScript #globalExecutionContext #learning #internalWorking

Most JavaScript developers use functions every day… But very few truly understand what happens before their code runs. Let’s talk about Execution Context. Every time JavaScript runs your code, it creates something called an execution context. There are two main types: 1️⃣ Global Execution Context 2️⃣ Function Execution Context When your file starts running, JavaScript creates the Global Execution Context. Example: var name = "Sadiq"; function greet() { var message = "Hello"; console.log(message + " " + name); } greet(); Before this code executes: Memory is created. Variables are stored (initially as undefined if declared with var). Functions are fully stored in memory. Then execution begins line by line. When greet() is called, a new Function Execution Context is created. That’s why variables inside a function don’t interfere with global ones. Execution Context explains: Why hoisting happens Why scope works the way it does Why some variables are accessible and others aren’t Understanding this changed how I read JavaScript code. Instead of asking: “What is this line doing?” I now ask: “What context is this running in?” Big difference. Are you writing JavaScript… or do you understand how JavaScript is running your code? 👇 What JavaScript concept confused you the most when you started? #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering #BuildInPublic

Day #2 – How JavaScript Actually Works Behind the Scenes . Many developers say they hate JavaScript. Not because JavaScript is a bad language. But because they write code without understanding how JavaScript executes it internally. . When the internal working is unclear, JavaScript feels confusing and unpredictable. In reality, JavaScript follows very strict and well-defined rules. . To understand this, let’s look at a simple example. . # Reference Image . At the very beginning, the JavaScript engine creates a Global Execution Context. This context represents the global scope of the program. . During the creation phase, memory is allocated. Variables are initialized with undefined ( let, const, var ). Functions are stored as references. No code is executed in this phase. . After memory allocation, the execution phase begins. The engine starts executing the code line by line. . When a is encountered, it is assigned the value 5. When abc(6) is called, a new Function Execution Context is created. . Inside this function context, num receives the value 6. ans is calculated as 12. The value 12 is returned and assigned to value1. Once the function finishes, its execution context is destroyed. . The same process happens again for abc(a). A new function execution context is created. num receives the value 5. ans becomes 10. The value 10 is returned and stored in value2. . Throughout this entire process, JavaScript uses the Call Stack. Every execution context is pushed onto the stack when it starts. When execution is complete, it is popped off. This ensures that JavaScript always knows which code to execute next. . JavaScript is not random. It is not magical. It is deterministic and rule-based. . When developers understand execution context and the call stack, JavaScript stops feeling confusing and starts feeling logical.

“JS Fundamentals Series #1: Execution Context & Call Stack” Behind every line of JavaScript lies a hidden world of execution contexts and stacks — let’s uncover it 👇 Whenever a JavaScript program runs, the JS engine creates a Global Execution Context (GEC), a Global Object, and a special this variable. Think of the Execution Context as a big container with two parts: 1. Memory Component 2. Code Component 🔄 The whole JavaScript code gets executed in two phases:- 1. Memory creation phase: All the variables and functions are assigned memory in the form of "key: value" pairs inside the Memory Component. Variables are assigned a special keyword called "undefined" until their value is initialized. Functions are assigned their whole body as it is. 2. Code execution phase: Inside Code Component, each piece of code gets executed, only one command will get executed at a time and won't move onto the next until the current command is executed. Whenever a function is called/invoked, a new Local Execution Context is created inside the Code Component. 📚 Call Stack This is where all the Execution Contexts are executed in a particular order. It follows a principle known as LIFO - Last In First Out. 💡 Why this matters: Understanding the call stack helps me debug recursion errors, async issues, and write cleaner, more predictable code. 🚀 Next up: I’ll dive into Scope Chain & Lexical Environment. Stay tuned! #JavaScript #Frontend #WebDevelopment #NamasteJS #LearningJourney

Post Title: Demystifying JavaScript Hoisting & Execution Context 🧠💻 Ever wondered why you can access a variable in JavaScript before you’ve even declared it? Or why let and const sometimes throw a "Temporal Dead Zone" error while var just gives you undefined? I recently broke down these concepts on the whiteboard, and they are the "make or break" fundamentals for every JS developer. Here’s the recap: 1. Hoisting: The "Mental Move" JavaScript moves declarations to the top of their scope during the compilation phase. But not all declarations are treated equally: var: Hoisted and initialized as undefined. let & const: Hoisted but not initialized. They live in the Temporal Dead Zone (TDZ) until the code reaches their declaration. Function Declarations: Fully hoisted! You can call the function even before it's written in the script. Arrow Functions/Expressions: Treated like variables (meaning no hoisting if you use let or const). 2. Behind the Scenes: The Global Execution Context (GEC) The whiteboard illustrates how the JS Engine handles your code in two distinct phases: Memory Creation Phase: The engine scans the code and allocates memory for variables and functions. (e.g., a becomes undefined, c() gets its entire code block). Code Execution Phase: The engine executes the code line-by-line, assigning values (e.g., a = 10) and executing function calls. 3. The Call Stack Every time a function like c() is called, a new Execution Context is pushed onto the Call Stack. Once the function finishes, it’s popped off. Understanding this stack is the key to mastering recursion and debugging "Stack Overflow" errors! 💡 Pro-Tip: Always use let and const to avoid the "undefined" bugs that come with var hoisting. Clean code is predictable code! What’s one JS concept that took you a while to "click"? Let’s discuss in the comments! 👇 #JavaScript #WebDevelopment #ProgrammingTips #CodingLife #SoftwareEngineering #Frontend