Now & Later

You Don't Know JS - Async & Performance

I'm currently reading You Don't Know JS series(Async & Performance) book, I'm planning to make notes of important concepts and code snippets in this series.

More details about the series:https://github.com/getify/You-Dont-Know-JS

Now & Later

In JavaScript, program/function can either run Now or Later. The relationship between them is the heart of asynchronous programming.

let answer = 1;

function now() {
  return answer;
}

function later() {
  answer = answer * 2;
  console.log("Answer:", answer);
}

now(); // 1

setTimeout(later, 1000); // Answer: 2

All the statements in the above program run Now except for the body of later() function. i.e,

  answer = answer * 2;
  console.log("Answer:", answer);

Another example is how we make Ajax requests to fetch data from the server.

  // ajax() is some utility to make Ajax requests
  const data = ajax("example.com");
  console.log(data); // Oops, you won't get data as expected

  // Both the above statements run Now, ajax calls is a Network call so it would take some time to fetch results. That's the reason we won't get data to be resolved. 

Event Loop

Javascript just recently before (ES6) has never had asynchrony built into it. JS engine doesn't run in isolation, it is always supported by Hosting environment like Browsers, and NodeJs.

One common "thread" of all the environments does the magic to execute multiple chunks of your program over time at each moment invoking the JS engine, called the "Event Loop"

• Find more about the Event Loop
• Visualise how Event Loop works (Call Stack, Micro Task Queue, Task Queue)

Jobs

As of ES6, there is a new layer on top of the event loop called Jobs queue. There are a few special async events handled by this queue like Promises. There is a difference in how the event loop handles timers like setTimeout and Promises.

Timers
Timers are always added to the next tick of the event loop.

Promises
Promises are added to the Jobs queue which is handled by end of the ongoing tick in the event loop instead of the future tick.

console.log('A');

// Timers
setTimeout(function () {
  console.log('B');
}, 0);

// Promises
const p = Promise.resolve('C');
p.then(function (value) {
  console.log(value)
});

Output: A C B instead of A B C though we set the timer to 0 milliseconds.