Get instant key takeaways and a technical summary generated by Abdul's AI Assistant.
Welcome to Part 5 of the Mastery Series. In Part 4, we learned how to build objects. Now, we are learning how to wait (without stopping).
Asynchronous programming is what makes JavaScript feel fast, even though it is single-threaded. It’s what allows you to fetch data from an API, read a file, or wait for a timer without freezing the entire browser. Today, we’ll master the mechanics of the Event Loop, the elegance of Promises, and the power of Async/Await.
How can JavaScript do two things at once if it only has one thread? It doesn't. It delegates the "waiting" to the Browser (Web APIs).
setTimeout or fetch go to wait.Before Promises, we nested callbacks inside callbacks. This led to code that was impossible to read or debug.
A Promise is a placeholder for a future value. It represents an operation that hasn't completed yet but is expected to in the future.
Introduced in ES2017, async/await makes asynchronous code look and behave like synchronous code. Under the hood, it is still using Promises.
The await Trap: Always remember that await pauses the execution of the current function, but not the whole program. The engine can still handle other events while waiting.
Not all asynchronous tasks are created equal. JavaScript has two types of queues:
MutationObserver. These have High Priority and run immediately after the current script finish, before the next render.setTimeout, setInterval, setImmediate. These have Low Priority.Share your technical insights, ask questions, or provide feedback on this orchestration.
Compiling Discussions...
Thanks for reading. If you enjoyed this post, check out my other articles in the Lab Archives.
console.log('1');
setTimeout(() => console.log('2'), 0); // Macrotask
Promise.resolve().then(() => console.log('3')); // Microtask
console.log('4'); // Result: 1, 4, 3, 2 ✅The fetch API is the modern way to get data over the network.
fetch only rejects a promise if there is a network error. It does not reject for 404 (Not Found) or 500 (Server Error). You must check the ok property manually.
Q: If setTimeout is set to 0ms, why doesn't it run immediately?
A: Because it is a Macrotask. Even with 0ms, it must wait for the current Call Stack to clear AND for any pending Microtasks (like resolved Promises) to finish before the Event Loop can pick it up.
Q: What happens if you forget to use await on a Promise inside an async function?
A: The function will continue to run, and the variable will hold the Promise object itself instead of the resolved value. This is a common source of "undefined" bugs.
In Part 6: The Browser & DOM, we move from pure logic to the screen. We’ll master the DOM tree, event bubbling, and how to manipulate what the user sees. See you there!