⚙️ JS Runtime Env

Exceeding Max Stack Size

If you accidentally create an infinite loop that overflows the call stack size, you will end up encountering an error thrown by the browser Uncaught RangeError: Maximum call stack exceeded. In the example below I've added recursion inside the logger to call itself over and over.

1const logger = () => {
2  console.log('yo!')
3  logger()
4};
5
6const theJoeCodes = () => {
7  logger()
8};
9
10theJoeCodes()

Task Queue

It's a common misconception there is only one message queue (also referred to as the callback queue) inside JavaScripts runtime environment. This single message/callback queue referred to is almost always the task queue, there is, however, also a job queue for microtasks.

The task queue manages macrotasks such as setTimeout() and setInterval().

Job Queue

The Job Queue manages microtasks like promises.

The Job Queue was introduced as part of the ES6 spec to allow the result of an asynchronous function to execute as soon as possible, rather than being added to the end of the call stack.

Between macrotasks and microtasks across both message queues, the event loop may pick up a queued render task. The event loop prioritizes microtasks in the job queue over macrotasks in task queue.

Macrotask vs Microtask - Priority

When the call stack is empty and there are no job queue messages that need priority, messages are removed from the task queue by the event loop and added as a new stack frame onto the call stack. Once the call stack is empty, if another message exists in the task queue the same process will occur. Let's look at the possible queue scenarios:

• A synchronous operation is encountered in the current execution context, added to the callstack, executed and removed. Task and job queues are not needed for scheduling.

  JAVASCRIPT
  1// Execution start
  2
  3console.log('🦄'); 
  4
  5// Call Stack: console.log('🦄');
  6
  7// synchronous operation added to callstack, executed and removed.
  8
  9🦄 // unicorn logged

  

  
• A macrotask has been added to the task queue from a web api callback. The call stack is currently empty and no microtasks are queued in the priority job queue. The event loop picks up the macrotask from the task queue and adds it to the call stack.
  

  

  

  

  JAVASCRIPT
  1// Execution start
  2
  3setTimeout(() => console.log("🦄"), 0))
  4
  5// Call Stack: setTimeout(() => console.log("🦄"), 0))
  6
  7// Web API run on separate browser thread
  8// Wep API callback adds console.log Macro Task to Task Queue
  9
  10// Task Queue: console.log('🦄');
  11
  12// Nothing else in execution context
  13
  14// Event Loop picks up from Task Queue & adds to Call Stack
  15
  16// Task Queue: (empty)
  17
  18// synchronous operation added to callstack, executed and removed.
  19
  20// Call Stack: console.log('🦄'); 
  21
  22🦄 // unicorn logged

• A macrotask has been added to the task queue from a web api callback. The call stack is currently empty, but a series of microtasks are queued in the priority job queue. The event loop prioritises ALL the queued micro tasks and adds each one to the call stack.
  

  

  

  

  

  

  

  JAVASCRIPT
  1// Execution start
  2
  3setTimeout(() => console.log("🦄"), 0))
  4
  5// Call Stack: setTimeout(() => console.log("🦄"), 0))
  6
  7// Web API run on separate browser thread
  8// Wep API callback adds console.log Macro Task to Task Queue
  9
  10// Task Queue: console.log('🦄');
  11
  12// Promises calls encountered next in the execution context
  13
  14Promise.resolve()
  15  .then(() => console.log("🐊"))
  16Promise.resolve()
  17  .then(() => console.log("🐊"))
  18
  19// Call Stack: 
  20// Promise.resolve().then(() => console.log("🐊"))
  21// Promise.resolve().then(() => console.log("🐊"))
  22
  23// Promise function calls added to the priority Job Queue
  24
  25// Job Queue: 
  26// Promise.resolve().then(() => console.log("🐊"))
  27// Promise.resolve().then(() => console.log("🐊"))
  28
  29// Task Queue: console.log('🦄'); 
  30
  31// Event Loop picks up from priority Job Queue & adds to Call Stack
  32
  33// Call Stack:
  34// .then(() => console.log("🐊"))
  35// .then(() => console.log("🐊"))
  36
  37// Job Queue: (empty)
  38
  39// operation added to callstack, executed and removed.
  40
  41🐊 // logged
  42🐊 // logged
  43
  44// Task Queue: console.log('🦄'); 
  45
  46// Event Loop picks up from Task Queue & adds to Call Stack
  47
  48// Task Queue: (empty)
  49
  50// synchronous operation added to callstack, executed and removed.
  51
  52// Call Stack: console.log('🦄'); 
  53
  54🦄 // unicorn logged

• A macrotask exists on the task queue and the call stack is NOT empty. No microtasks exist in the priority job queue. The event loop keeps checking the call stack and message queues until it can pick up a message. Rendering tasks may be picked up by the event loop next when the call stack becomes free. Microtasks may appear on the job queue while the event loop was waiting to pick up the macrotask in the task queue. Microtasks will always be prioritised even if a macrotask has been waiting for a while.

Macro Task Vs Micro Job - Questions

Based on what we've learned so far, can you work out the log order for the animals in each question?

1console.log("🦁");
2
3setTimeout(() => console.log("🦄"), 0);
4
5Promise.resolve()
6  .then(() => console.log("🐊"));
7  
8console.log("🐳");

1console.log("🐳");
2
3Promise.resolve()
4  .then(() => setTimeout(() => console.log("🐊"), 0))
5  .then(() => console.log("🦄"));