JavaScript async execution: Call Stack, Web APIs, and Event Loop

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 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

JavaScript is single-threaded, yet it handles asynchronous tasks effortlessly. Understanding the Event Loop finally made it make sense. JavaScript has one call stack and can only execute one task at a time. So naturally, the question becomes: how does it handle things like API calls, timers, or user clicks without freezing the entire application? The answer is the Event Loop. When we use asynchronous features like setTimeout, fetch, or event listeners, JavaScript doesn’t handle them directly. Instead, these tasks are delegated to the browser’s Web APIs. While the browser processes these operations in the background, JavaScript continues executing other code on the call stack. Once the asynchronous task finishes, its callback is placed in a queue. The Event Loop continuously checks whether the call stack is empty, and when it is, it moves the queued callback into the stack for execution. That’s how non-blocking behavior works, even though JavaScript itself runs on a single thread. Understanding this changed how I debug, structure async code, and reason about performance. If you're learning JavaScript, don’t skip the Event Loop. It’s foundational to everything from API calls to modern frameworks. #JavaScript #WebDevelopment #FrontendDevelopment #LearningInPublic #TechJourney #Growth

🚀 Day 75 — Visualizing the JavaScript Call Stack Today I learned how JavaScript actually executes code behind the scenes using something called the Call Stack. Understanding this completely changed how I think about function execution. 🧠 What is the Call Stack? The Call Stack is a mechanism used by JavaScript to keep track of function execution. 👉 JavaScript is single-threaded, meaning it executes one task at a time. So whenever a function runs, it is added to the stack. 🔹 How It Works Think of it like a stack of plates: ✅ New function → placed on top ✅ Function finished → removed from top This follows the rule: LIFO (Last In, First Out) 🔍 Example function third() { console.log("Third function"); } function second() { third(); console.log("Second function"); } function first() { second(); console.log("First function"); } first(); ⚙ Execution Flow (Step by Step) 1️⃣ first() added to Call Stack 2️⃣ second() added 3️⃣ third() added 4️⃣ third() executes → removed 5️⃣ second() executes → removed 6️⃣ first() executes → removed Finally → Stack becomes empty ✅ 📌 Why Call Stack Matters Understanding Call Stack helps explain: ✅ Function execution order ✅ Debugging errors ✅ Stack Overflow errors ✅ Infinite recursion problems ✅ Async behavior understanding ⚠ Example of Stack Overflow function repeat() { repeat(); } repeat(); Since the function never stops, the stack keeps growing until: ❌ Maximum Call Stack Size Exceeded 💡 Key Learning JavaScript doesn’t randomly run code. Every function waits its turn inside the Call Stack, making execution predictable and structured. Understanding this made debugging much easier for me. #Day75 #JavaScript #CallStack #WebDevelopment #LearningInPublic #DeveloperJourney

🥇Mastering JavaScript — One Concept at a Time (1/32) What are Variables & why var, let, const really matter. As part of my journey to master JavaScript, I decided to revisit the very basics starting with variables. And honestly, understanding this properly explains so many mistakes I made earlier. 📦What are variables? Variables are like containers that store data. They help us store, reuse, and update information from simple numbers to complex objects and arrays. Think of a variable as a box with a name on it: -The name is the variable identifier -The value is whatever data we put inside In JavaScript, we create these boxes using: 👉 var, let, and const 🧓 var — Old and risky 1️⃣Function scoped (not block scoped) 2️⃣Can be redeclared and reassigned 3️⃣Hoisted and initialised with undefined 🧑💻 let — Modern and safer 1️⃣Block scoped { } 2️⃣Can be reassigned, but not redeclared 3️⃣Hoisted, but stays in the Temporal Dead Zone (TDZ) 🔐 const — Predictable by default 1️⃣Must be assigned at declaration 2️⃣Cannot be reassigned or redeclared 3️⃣Block scoped 4️⃣Also affected by TDZ 🧠 Mindset Revisiting fundamentals is not about “going backwards”, it’s about building stronger foundations. My current approach: - Prefer const by default - Use let only when reassignment is necessary - Avoid var in modern JavaScript - Understanding why these rules exist makes the language feel far more predictable and reliable. 📌 Note: I intentionally didn’t go deep into HOISTING and the TDZ, I will break those down clearly in the next post in this series. This is just the beginning of my journey to master JavaScript — one concept at a time. 💬 How did you first understand the difference between var, let, and const? #JavaScript #LearningInPublic #WebDevelopment #FrontendDevelopment

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

🧠 99% of JavaScript devs get this event loop question wrong 👀 (Even seniors pause before answering) No frameworks. No libraries. Just how JavaScript actually schedules work. 🧩 Output-Based Question (Event Loop: sync vs microtasks vs macrotasks) console.log("start"); setTimeout(() => { console.log("timeout"); }, 0); Promise.resolve().then(() => { console.log("promise"); }); (async function () { console.log("async"); })(); console.log("end"); ❓ What will be printed — in the correct order? ❌ Don’t run the code 🧠 Think like the JavaScript engine A. start → async → end → promise → timeout B. start → end → async → promise → timeout C. start → async → promise → end → timeout D. start → promise → async → end → timeout 👇 Drop your answer in the comments (no cheating 😄) Why this question matters This tests whether you truly understand: • synchronous execution • the event loop • microtasks vs macrotasks • why Promise.then beats setTimeout(0) • async IIFEs vs promises Many developers “use” async code every day — but few understand when it actually runs. Good JavaScript developers don’t memorize outputs. They understand how the engine thinks. 💡 I’ll pin the full explanation after a few answers. #JavaScript #EventLoop #AsyncJavaScript #WebDevelopment #ProgrammingFundamentals #InterviewPrep #MCQ #DeveloperTips #CodeQuality

🚀 Top 20 JavaScript Concepts Every Developer Must Master. 1️⃣ Hoisting JavaScript moves variable and function declarations to the top of their scope before execution. 2️⃣ Closures A function that remembers variables from its outer scope even after the outer function has finished. 3️⃣ Scope (Global, Function, Block) Determines where variables are accessible. 4️⃣ Lexical Scope Scope is decided by where functions are written, not where they are called. 5️⃣ Prototypes & Inheritance JavaScript uses prototypal inheritance to share properties and methods between objects. 6️⃣ Event Loop Handles asynchronous operations in JavaScript’s single-threaded environment. 7️⃣ Call Stack Tracks function execution order. 8️⃣ Async/Await Cleaner way to handle asynchronous code using promises. 9️⃣ Promises Represents a value that may be available now, later, or never. 🔟 Callback Functions Functions passed as arguments to other functions. 1️⃣1️⃣ Debounce & Throttle Improve performance by controlling how often functions run. 1️⃣2️⃣ Event Delegation Attach event listeners to parent elements instead of multiple children. 1️⃣3️⃣ Truthy & Falsy Values Understanding how JavaScript evaluates values in conditions. 1️⃣4️⃣ Type Coercion JavaScript automatically converts types (== vs === difference). 1️⃣5️⃣ Destructuring Extract values from arrays or objects easily. 1️⃣6️⃣ Spread & Rest Operators Expand arrays/objects or collect function arguments. 1️⃣7️⃣ ES6 Modules Organize and reuse code using import and export. 1️⃣8️⃣ Memory Management & Garbage Collection JavaScript automatically allocates and frees memory. 1️⃣9️⃣ IIFE (Immediately Invoked Function Expression) Function that runs immediately after it’s defined. 2️⃣0️⃣ The " this" Keyword 'this'refers to the object that is calling the function. Its value depends on how the function is invoked (not where it’s defined). In arrow functions, this is inherited from the surrounding scope. #JavaScript #FrontendDeveloper #BackendDeveloper #WebDevelopment #FullstackDeveloper #Developers

Understanding why `Promise.all()` needs an array in JavaScript Many developers try this and get confused 👇 ❌ Wrong way Promise.all(p1, p2); ✅ Correct way Promise.all([p1, p2]); 🤔 Why does this happen? Promise.all() accepts only ONE argument, and that argument must be an iterable (most commonly an array). 👉 An array allows JavaScript to loop through multiple promises and wait for all of them to resolve.  ✅ Working example let p1 = new Promise((resolve) => {   resolve(1); }); let p2 = new Promise((resolve) => {   resolve(2); }); Promise.all([p1, p2]) .then((data) => {   console.log(data); // [1, 2] }); ❌ Why `Promise.all(p1, p2)` throws an error? When you write: Promise.all(p1, p2); JavaScript treats it as: Promise.all(p1); But p1 is a "Promise object", not an iterable like an array. So JS throws: TypeError: object is not iterable  🧠 Easy way to remember > Promise.all waits for a collection of promises, not individual ones Always wrap promises inside an array.  ⚠️ One more important thing If any promise rejects, Promise.all() immediately rejects. Promise.all([Promise.resolve(1), Promise.reject("Error")]) .catch(console.error); // Error 💡 Hope this helps someone avoid a common JavaScript pitfall! . . . . . #SRYTAL #JavaScript #Promises #WebDevelopment #Frontend #Learning #Promise.all #Growtogether