Javascript Execution and How It Works In Depth

ChatGPTs attempt at what the JS engine might look like.

I have been diving into how Javascript works under the hood recently and I have to say it’s really been helpful with my mental model of how Javascript is actually working and executing code. It also helps explain certain behaviours that were some what mysterious before.

In this article I wanted to share what I have learnt as I think this knowledge is not widely known in the Javascript community. As I have gained experience in Software Development I have noticed that in any programming language many of the details are hidden away. Whilst this makes the code less verbose it also hides away important details which unless you dig for it, you can remain totally ignorant of this.

7 Parts of Javascript Execution

We’re going to go over this Javascript code and see how it executes to explain some of the details of Javascript execution:

setTimeout(() => {
  console.log('Am I first?');
}, 0);

function printData(data) {
  console.log('data');
}

// Assume this fetch request takes 200ms
const futureData = fetch('https://jsonplaceholder.typicode.com/todos/1');

futureData.then(printData);

blockFor400ms();

console.log('I am first!');

With this code we will see in what order the console.logs run. Through this code we will discover all about the following 7…