JavaScript Execution Context Explained: GEC vs FEC

I thought JavaScript runs code line by line. It doesn't. Before executing a single line, the JS engine creates something called an Execution Context. Think of it like a stack of plates. Each function call adds a new plate on top. Last plate added is the first one removed. That's your Call Stack. Inside each execution context, two phases happen: Memory Phase — Variables are stored before code runs. var gets stored as undefined. let and const? They exist but are untouchable. That zone is called the Temporal Dead Zone. Execution Phase — Now the code actually runs. Values get assigned. Functions get called. I spent 4 years writing JavaScript. Never knew this was happening under the hood. Day 2. Still here. #JavaScript #BuildingInPublic #100DaysOfCode

𝗪𝗵𝘆 𝗝𝗮 v𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗶𝘀 𝗦𝗶𝗻𝗴𝗹𝗲 𝗧𝗵𝗿𝗲𝗮𝗱𝗲𝗱 You may think JavaScript is limited because it's single-threaded. But it can still handle multiple tasks without blocking the main thread. - JavaScript operates in a single execution context - It uses a call stack to execute functions - The call stack operates on a LIFO basis JavaScript achieves non-blocking behavior through the event loop, callback queues, and asynchronous APIs. - The event loop manages code execution - It handles events and messages in a non-blocking manner - Web APIs and Node APIs handle asynchronous operations Here's an example: ```plaintext is forbidden so description will continue without code The event loop monitors the call stack and callback queue. When the call stack is empty, it pushes the first callback for execution. This allows JavaScript to initiate tasks, move on, and later handle results without blocking the main thread. Source: https://lnkd.in/gtPp3Cvy

You think you know JavaScript… but can you explain why setTimeout doesn’t always run when you expect? The answer is in how JavaScript schedules and executes tasks. But how does it actually work? To understand this, we need to talk about the event loop, what it is and how it works behind the scenes. What is the Call Stack? The event loop is a runtime mechanism that allows JavaScript to decide which task to execute next. Before understanding it, you need to know that JavaScript is: - Single-threaded (it runs on a single main thread) - Non-blocking (it can handle asynchronous operations without stopping execution) So how does the event loop manage this single thread and decide which task to execute next without blocking the execution? We first need to look at the call stack, which, as the name implies, is a stack that handles all function calls in JavaScript. Let’s take a look at this code to understand how it works.

We write JavaScript every day… but what happens before your code actually runs? 👇 Before execution starts, JavaScript creates something called an Execution Context. It is the environment where your code runs. Whenever JavaScript code runs or a function is invoked: JavaScript creates an execution context It allocates memory Then executes code line by line Each execution context has two main parts: 👉 Memory (Variable Environment) Stores variables (as undefined) and function declarations completely 👉 Code (Thread of Execution) Runs code step by step This process happens in two phases: Memory Creation Phase Code Execution Phase So JavaScript doesn’t directly execute code. It first prepares everything, then starts execution. Understanding this helps you see how JavaScript works internally. Next: How these execution contexts are managed using the Call Stack

Day 0 of 100 Days of JavaScript 🚀 Starting this challenge to build consistency and actually understand what I learn. Today: Type Conversion & Type Coercion JavaScript is a dynamically typed language, meaning variables don’t have fixed types—values can change type at runtime. 🔹 Type Coercion (Implicit / Automatic) JavaScript automatically converts types when needed. console.log(5 + "5"); // "55" console.log([] + {}); // "[object Object]" 👉 If one value is a string, JavaScript converts the other into a string and concatenates. 👉 Objects convert to a default string form → ""[object Object]"" 🔹 Type Conversion (Explicit / Manual) We manually convert types when we want control. Number("5"); // 5 String(5); // "5" Boolean(1); // true 👉 This is safer because we decide how the value should behave. ⚠️ Why this matters Type conversion looks simple but can lead to unexpected bugs if not understood properly. Understanding how JavaScript handles types = better debugging + cleaner code. Let’s see how far I can go with consistency.

𝗧𝗵𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱 You want to know how JavaScript handles asynchronous operations. JavaScript runs on a single thread, so it can only execute one task at a time. To manage this, it uses: - Memory Heap to store variables and objects - Call Stack to execute code The Call Stack is where all synchronous code runs. For example, when you call a function, it goes into the stack. JavaScript cannot handle async operations directly. Instead, it uses Web APIs like setTimeout. These run in the background. After async work is completed, callbacks are placed into queues. There are two types of queues: - Microtask Queue (high priority) - Task Queue (low priority) The Event Loop checks the Call Stack and queues. It runs microtasks before tasks. For example, if you use setTimeout and Promise.resolve, the promise will run first. You can handle asynchronous operations without blocking execution. This is done using the Call Stack, Web APIs, queues, and the Event Loop. Source: https://lnkd.in/gBMJuQRE

𝗧𝗵𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱 You want to know how JavaScript handles asynchronous operations. JavaScript runs on a single thread, so it can only execute one task at a time. To manage this, it uses: - Memory Heap to store variables and objects - Call Stack to execute code The Call Stack is where all synchronous code runs. For example, when you call a function, it goes into the stack. JavaScript cannot handle async operations directly. Instead, it uses Web APIs like setTimeout. These run in the background. After async work is completed, callbacks are placed into queues. There are two types of queues: - Microtask Queue (high priority) - Task Queue (low priority) The Event Loop checks the Call Stack and queues. It runs microtasks before tasks. For example, if you use setTimeout and Promise.resolve, the promise will run first. You can handle asynchronous operations without blocking execution. This is done using the Call Stack, Web APIs, queues, and the Event Loop. Source: https://lnkd.in/gBMJuQRE

𝗧𝗵𝗲 𝗝𝗮𝗩𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗥𝘂𝗻𝘁𝗶𝗺𝗲: 𝗙𝗶𝘅𝗶𝗻𝗴 𝗬𝗼𝘂𝗿 𝗠𝗲𝗻𝘁𝗮𝗹 𝗠𝗼𝗱𝗲𝗹 You may have noticed some behaviors in JavaScript that seem strange. For example: - setTimeout doesn't interrupt loops - setTimeout doesn't block - A resolved Promise still runs after synchronous code - await pauses a function but doesn't freeze the page - Rendering sometimes waits Let's explore why this happens. JavaScript executes synchronously inside a task. Nothing can interrupt that execution. Here's what we mean by 'synchronous' and 'asynchronous': - Synchronous execution: code that runs immediately, from top to bottom via the call stack - Asynchronous code: code whose result is not available immediately, it schedules something to run later Asynchronous mechanisms do not block nor interrupt the call stack. They arrange for something to run later via scheduling. Let's test this claim with a simple for loop and setTimeout: ``` is not allowed, so we use plain text instead console.log("sync start") for (let i = 0; i < 1e9; i++) {} console.log("sync end") console.log("sync start") setTimeout(() => { console.log("timeout fired") }, 0) for (let i = 0; i <

Built-in vs Manual Flattening in JavaScript Stop writing custom logic to flatten arrays in JavaScript. There’s already a built-in method for it: flat(Infinity) It flattens nested arrays of any depth into a single-level array, no loops, no recursion. Example: [1, [2, [3, [4]]]].flat(Infinity) // → [1, 2, 3, 4] Sometimes the simplest solutions are already part of the language. Knowing your standard library can save you more time than any framework.

𝗦𝗽𝗿𝗲𝗮𝗱 𝗩𝗦 𝗥𝗲𝘀𝘁 𝗢𝗽𝗲𝗿𝗮𝘁𝗼𝗿𝘀 𝗜𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 You've seen ... in JavaScript and wondered what it does. The same syntax is used for two purposes: - Spread operator expands values - Rest operator collects values Understanding this difference is crucial for writing clean JavaScript. The spread operator expands elements from arrays or objects. It's like opening a box and taking everything out. It spreads elements individually and creates a shallow copy, avoiding mutation. The rest operator collects multiple values into one. It's like gathering everything into a box. All arguments are collected into an array. Here are the key differences: - Spread operator expands values - Rest operator collects values - Spread operator is used on the right side, rest operator on the left side - Spread operator outputs individual elements, rest operator outputs an array You can use spread and rest operators to merge arrays, remove properties from objects, and more. Mastering spread and rest operators helps you write cleaner code, handle data efficiently, and solve interview problems confidently. Source: https://lnkd.in/gmFfBhXX