Apsar Ali’s Post

🧠 Day 3 of 21 days challenge JavaScript Event Loop 🤯 Event Loop is a mechanism in JavaScript that handles execution of asynchronous code. It continuously checks the call stack and callback queue. If the stack is empty, it moves tasks from the queue to the stack for execution. For example :- console.log("Start"); console.log("End"); console.log("Timeout"); Wait… why this order? Because JavaScript doesn’t run everything instantly. It uses: • Call Stack • Web APIs • Callback Queue Event Loop decides what runs next. 💤For easy understanding :- Event Loop = decides execution order Sync code runs first Async code waits in queue Then runs after the stack is empty 👉 That’s why “Timeout” runs last This changed how I understand async code 🚀 #JavaScript #EventLoop #Async

Understanding the JavaScript Event Loop This diagram breaks down how JavaScript handles asynchronous operations behind the scenes. 🔹 Call Stack This is where your code runs line by line. Functions like main(), logger(), and console.log() are executed here. JavaScript is single-threaded, so only one thing runs at a time. 🔹 Web APIs When your code uses async features like setTimeout, network requests, or event listeners, they are handled outside the call stack by browser-provided APIs. 🔹 Macrotask Queue Callbacks from Web APIs (like setTimeout, I/O, or user events such as clicks) are placed here once they’re ready. 🔹 Microtask Queue Promises (.then(), .catch(), .finally()) are handled here. This queue has higher priority than the macrotask queue. 🔹 Event Loop The event loop continuously checks: Is the call stack empty? If yes, it first processes all microtasks Then it takes one task from the macrotask queue Repeat 💡 Key Insight: After every single task, JavaScript runs all microtasks before moving to the next macrotask. That’s why Promise callbacks often run before setTimeout, even if the timeout is 0ms. #JavaScript #WebDevelopment #EventLoop #AsyncProgramming #Frontend

Day 9/30 Functions, Parameters, and Return Values in JavaScript Functions in JavaScript are reusable blocks of code designed to perform specific tasks. They help improve organization, reduce repetition, and make programs easier to maintain. A function can receive Parameters, which act like placeholders for values that are passed in when the function is called. These parameters allow the function to work with dynamic input. After processing the input, a function can provide an output using the return statement. The returned value can then be stored, displayed, or used in further calculations. Together, functions, parameters, and return values make JavaScript logic flexible, reusable, and efficient. #M4ACELearningChallenge #QualityAssurance #AutomationTesting #JavaScript #LearningInPublic

Day 16/100 of JavaScript Today’s topic : DOM Events After understanding DOM structure, the next step is handling user interactions using events JavaScript can listen to events and respond to user actions like clicks, typing, or scrolling 🔹Adding event listener const btn = document.getElementById("btn"); btn.addEventListener("click", () => { console.log("Button clicked"); }); 🔹Common events - click - input - submit - keydown 🔹Event object btn.addEventListener("click", (event) => { console.log(event.target); }); 🔹Event bubbling (basic idea) Events propagate from child → parent unless stopped event.stopPropagation(); DOM events allow JavaScript to make web pages interactive by responding to user actions #Day16 #JavaScript #100DaysOfCode

Can you explain the JavaScript event loop? Not because the concept is hard, but because explaining it clearly is what actually matters. Here’s the simplest way to break it down: JavaScript runs in a single thread, using a call stack to execute code. 1. Synchronous code runs first → Functions are pushed to the call stack and executed immediately 2. Async tasks are handled by the browser/environment → e.g. setTimeout, fetch, DOM events 3. Once the call stack is empty → the event loop starts working It processes queues in this order: 👉 Microtasks first (Promises, queueMicrotask) 👉 Then macrotasks (setTimeout, setInterval, I/O) Why? - A and D are synchronous → executed first - Promise (C) → microtask queue → runs next - setTimeout (B) → macrotask → runs last Explaining it step by step is simple — but doing it clearly makes all the difference. #Frontend #JavaScript #WebDevelopment #TechInterviews #SoftwareEngineering

We analyzed a page with 22MB uncompressed size. 17MB of that? JavaScript. 140 JS requests. 19.1s JS execution time. 4.6s TBT 🧐 Too much JavaScript hurts performance and your visitors feel it. Learn how you can fix it: https://lnkd.in/eER3Y65P #webperformance #gtmetrix

Most developers get confused by the JavaScript Event Loop 🤯 Here’s the simplest way to understand it: JavaScript is single-threaded — it runs one task at a time. But async tasks (setTimeout, API calls, promises) don’t block the code. 👉 They go to Web APIs (handled by browser) 👉 Then move to a Queue 👉 Event Loop pushes them back when the stack is empty Example: console.log("Start") setTimeout(() => console.log("Timeout"), 0) console.log("End") Output: Start End Timeout Even 0ms delay runs last 😲 Bonus: Promises run before setTimeout because they use Microtask Queue ⚡ Have you struggled with Event Loop before?

JavaScript performance tip: Use const and let instead of var. Why? → Block scoping prevents bugs → const signals immutability → Better for JS engines to optimize Small syntax change. Big impact on code quality. #JavaScript #BestPractices #Performance

#Understanding JavaScript Functions: I’ve been revisiting some core JavaScript concepts lately — and these four always stand out: Function Expression → When a function is stored in a variable. Function Statement → A regular function declaration. First-Class Functions → Functions can be passed, returned, or assigned like values. Closures → Inner functions remember variables from their outer scope. Simple ideas, but they form the foundation of how JavaScript really works. Which one do you think is the most powerful

✂️ Mutating arrays with JavaScript 𝘀𝗽𝗹𝗶𝗰𝗲() The 𝘀𝗽𝗹𝗶𝗰𝗲() method in JavaScript mutates an array by removing and inserting elements at a given index. It returns an array of removed elements. ✅ Basic syntax ✅ Removing values ✅ Adding values ✅ Replacing values Save & share with your team! Download Our Free Full-Stack Developer Starter Kit ➡️ https://buff.ly/JbI0Qof --- If you found this guide helpful, follow TheDevSpace | Dev Roadmap, w3schools.com, and JavaScript Mastery for more tips, tutorials, and cheat sheets on web development. Let's stay connected! 🚀 #javascript #arrays #splice