Posted on Sep 21 The event loop is a mechanism that allows JavaScript to execute asynchronous code in a single-threaded environment. It works by constantly checking two queues: the Microtask Queue and the Macrotask Queue. These queues store the callbacks of the asynchronous operations that are waiting to be executed.The callback function in this example will be executed after 3 seconds, but not immediately. It will be placed in the macrotask queue, and will wait for its turn to run.The main difference between microtask and macrotask queue is their priority. The event loop always gives higher priority to the microtask queue, and will process all the callbacks in the microtask queue before moving on to the macrotask queue.The microtask queue contains the callbacks of operations that are considered more urgent or important, such as promises and mutation observers APIs. The macrotask queue contains the callbacks of operations that are less urgent such as timers, I/O events, and user interface events.What do you think will be the output of this code? You might expect it to be:Start -> Timeout -> Promise -> EndBut actually, it will be:Start -> End -> Promise -> TimeoutLet's decode step by step:Because the callback of setTimeout is placed in the macrotask queue, while the callback of Promise.resolve is placed in the microtask queue.Understanding the difference between microtask and macrotask queue can help you write better asynchronous code in JavaScript. It can help you avoid some common mistakes such as:To avoid these mistakes follow some best practices, such as:I hope this article helped you understand the difference between microtask and macrotask queue in the event loop. Checkout my easy to understand article on Debounce and Throttling in JS 🚀Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Yeom suyun - Sep 18 DugongGlobalServices - Aug 30 Rashid Shamloo - Sep 14 Safvan P - Aug 30 Once suspended, jeetvora331 will not be able to comment or publish posts until their suspension is removed. Once unsuspended, jeetvora331 will be able to comment and publish posts again. Once unpublished, all posts by jeetvora331 will become hidden and only accessible to themselves. If jeetvora331 is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to jeetvora331. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag jeetvora331: jeetvora331 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging jeetvora331 will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.