A look at the problem with single-threaded synchronous code, how JavaScript handles it and explaining the event loop, callbacks and asynchronous code.
Listen to Article
JavaScript: Mastering the Event Loop, Callbacks and Asynchronous Code
The JavaScript engine implements the ECMAScript (JavaScript) language, providing the core functionality. It takes source code, parses it, and executes it. However, in order to interact with the outside world, such as to produce any meaningful output, to interface with external resources, or to implement security- or performance-related mechanisms, we need additional environment-specific mechanisms provided by the host environment.
For example, the HTML DOM is the host environment when JavaScript is executed in a web browser. Node.js is another host environment that allows JavaScript to be run on the server side.
setTimeout, fetch or DOM event listeners), freeing up its own call stack to keep other code running smoothly.setTimeout, for instance), it immediately hands it off to the browsers Web API environment.setTimeout is popped off the call stack and JavaScript moves on to execute the next line of code.setTimeout elapses.fetch() request.setTimeout completes, JavaScript cannot immediately push the callback function straight back onto the call stack.This is commonly called the task queue or just the callback queue.
setTimeout, setInterval)This is the high priority lane.
Promises (via .then(), .catch(), or .finally())async/await continuations (everything after an await keyword runs as a microtask).queueMicrotaskMutationObserver
try/catch block.PromisesPromises which solved the problem of callback hell.Once a Promise moves from Pending to either Fulfilled or Rejected it is settled and can never change its state again.
Promises solve the 'Inversion of Control' issue by guaranteeing that the success or error handler is called exactly once.
.then(), .catch(), and .finally():Promises work behind the scenes?Promise resolves or rejects:
.then(), .catch(), or .finally() callbacks are pushed to the microtask queue.Promise callbacks execute immediately after the current stack clears, taking precedence over setTimeout or network events in the Macrotask Queue.Syntactic sugar refers to certain language features in programming that make the code easier to read or write. It's like adding a bit of sweetness to your code syntax to make it more pleasant to work with.
await keyword pauses function execution.await:
async function.Promise being awaited.Once the awaited Promise resolves, the remainder of the async function is pushed onto the microtask stack and resumes execution on the stack.
Get notified when we publish new articles and product updates.
Native try/catch blocks |
| Readability | Poor ("Pyramid of Doom") | Medium (Chained) | Excellent (Reads like sync code) |
Comments (0)