JavaScript: Async Programming

💎 Promises, Async/Await & The Event Loop

👇 Intro: Why Doesn’t My Async Code Run in Order?

Have you ever called an API, logged something right after it, and found that the log appeared before your response? Or used async/await but still couldn’t figure out why something was delayed?

That’s because JavaScript is single-threaded—but it handles async operations using Promises, the Event Loop, and task queues. These three work together to make async programming non-blocking and manageable (and occasionally confusing).

🧠 What is a Promise ?

A Promise in JavaScript is an object that represents the completion (or failure) of an asynchronous operation. Think of it as a placeholder for a value that’s not available yet but will be in the future.

🧪 Why it Matters?

Promises make handling asynchronous operations easier and cleaner. Whether you're fetching data, waiting for animations, or dealing with timers, understanding Promises gives you the power to write better JavaScript.

❓Interview:

Q: What are the three states of a Promise?

Pending – The initial state, neither fulfilled nor rejected.
Fulfilled – The operation completed successfully.
Rejected – The operation failed.

💻 Example:

>>> promise resolve & reject

💬 Gotcha to Watch For:

.then() is called when the promise is resolved, never forget to handle .catch() since it is called when the promise is rejected.

🧠 What is Async/Await ?

async and await are keywords used to work with Promises in a cleaner and more readable way.

async: Marks a function as asynchronous. It automatically returns a Promise.

await: Can only be used inside an async function. It pauses the execution of the function until the Promise is resolved or rejected.

🧪 Why it Matters?

They are essentially syntactic sugar over Promises. Instead of chaining .then() and .catch(), you write asynchronous code that looks synchronous — making it easier to understand and debug.

💻 Example:

>>> Async try & catch

💬 Gotcha to Watch For:

Don’t await in loops - If each task is independent, each await in loop must finish completely before the next one starts. This is very slow, so instead use Promise.all()

🧠 What is an Event Loop ?

Have you ever wondered how JavaScript handles setTimeout(), Promises, or async/await without freezing your browser? The secret behind it all is the event loop.

🧪 Why it Matters?

JavaScript is single-threaded—it can only do one thing at a time. But it still handles asynchronous operations like HTTP requests and timers. This is possible because of the event loop, which manages how and when asynchronous code is executed.

❓Interview:

Q: What are the major components of an Event Loop?

Call Stack: Executes synchronous code line by line. When a function is called, it gets pushed onto the stack.

Web APIs: These handle async tasks like timers(setTimeout) available in the browser.

Callback Queues(Macro / Task queue): Stores callbacks from tasks like setTimeout (functions). Once the call stack is empty, the event loop pushes the first task from the queue into the call stack.

Microtask Queues: Higher priority than Callback queues. These contains all the callbacks through Promises. 

💻 Example:

>>> Event loop async handling 

💬 Gotcha to Watch For:

Writing code that takes too long in the call stack (e.g., large loops, heavy calculations) can block everything else. Make sure to write non blocking code.

⏳Coming up next: Controlling contexts in JavaScript >>>