Skip to main content

Command Palette

Search for a command to run...

The JavaScript Task Queue

Published
2 min read
P

I am Fullstack developer passionate about teaching and learning new things. Join me as I'd share the things I have learnt and going to learn in a series of short, simple and straight forward articles.

In our previous lesson, on how javascript handles async task, view lesson here, we talked about how JavaScript hands off heavy tasks (delegation) so it doesn't get blocked. But what happens when those tasks are finished?

The results don't just jump right back into the action. They have to wait in line.

This "waiting line" is called the Task Queue.

What is a Queue? (FIFO)

A Queue is a data structure that follows a simple rule: First In, First Out (FIFO).

Think of a line at a fast-food restaurant.

  1. The person who arrives first stands at the front.

  2. The person who arrives last stands at the back.

  3. You are served strictly based on your position in the line.

The cashier doesn't pick a random person from the middle. They handle the front of the line first.

The JavaScript Task Queue

In JavaScript, this "line" is used to store Callbacks.

A callback is the piece of code you want to run after an asynchronous task (like downloading a file) is finished. Since JavaScript is busy doing other things, these callbacks can't run immediately. Instead, they enter the Task Queue.

They sit there patiently, preserving the order in which they arrived. The first task to finish is the first one waiting to be processed.

Not All Queues Are Equal (Priority)

Here is where it gets interesting. JavaScript actually supports multiple queues, and they are not all treated the same.

Imagine the restaurant has two lines:

  1. The Regular Line: For standard customers.

  2. The VIP Line: For premium members.

When the staff is ready to take an order, they always check the VIP line first. They will only serve the Regular line if the VIP line is completely empty.

In JavaScript:

  • Microtask Queue (VIP Line): High-priority tasks (like Promises) go here. JavaScript processes all of these before looking at anything else.

  • Macrotask Queue (Regular Line): Standard async operations (like setTimeout) go here.

The Idle State

If JavaScript checks the queues and finds them empty (no VIPs, no regulars), it simply waits. It goes into an Idle State, conserving energy until new work arrives in the queue.

Summary

The Task Queue is JavaScript's way of organizing chaos.

  • FIFO: First In, First Out.

  • Waiting Room: Async callbacks wait here until JavaScript is ready for them.

  • Priority Matters: High-priority queues are cleared before low-priority queues.

Javascript Async Demystified

Part 3 of 3

Welcome to JavaScript Async Demystified. A blog series breaking down the Call Stack, Event Loop, and Queues into simple micro-lessons. Master the hidden logic of asynchronous code today!

Start from the beginning

How JavaScript Handles Async Operations

Introduction to Javascript Async