JavaScript Execution in a Nutshell

A glance under the hood

This article is for those who want to get a high-level understanding of how JavaScript is executed in the browser…without combing through a bunch of documentation.

Part 1: What is a JavaScript Engine?

A JavaScript engine:

• Executes JavaScript.
• Implements a heap, a call stack, a message queue, and an event loop. (we’ll cover these next)
• Interacts with web APIs like setTimeout and setInterval.

JavaScript engines have historically been written to be shipped with specific browsers. Some popular examples are:

• SpiderMonkey — developed by Brendan Eich for Netscape Navigator.
• V8 — developed by Google for Chrome.
• JavaScriptCore — developed by Apple for Safari.
• Chakra — developed by Microsoft for Edge.

Components of a JavaScript Engine (Bowei Han, 2019)

What is the heap?

The heap is an unstructured memory store where all memory allocation happens (e.g. storing dynamically allocated JavaScript variables).

What is the call stack?