A brief explanation of the Javascript Engine and Runtime

A different kind of engine

Javascript Engine

The most famous one is the V8 Engine developed by Google which is used in Chrome and Node.js, but actually there are many more Javascript engines. As long as they follow the standard set by the ECMAScript standards, anyone can write a JS engine. Here you can find a list of all the JS engines:

How does the JS engine work?

1. Parser

The HTML parser encounters a script tag with a source. The source code inside this script gets loaded as a UTF-16 byte stream to a byte stream decoder. This byte stream decoder then decodes the bytes into token which are sent to the parser. To save time, the engine tries to avoid parsing code that’s not necessary right away.

2. AST

The parser creates nodes based on the tokens it receives. With these nodes, it creates an Abstract Syntax Tree (AST).

3. Interpreter

Next up is the interpreter, it walks through the AST and generates byte code. It reads the code line by line. When the byte code has been generated, the AST is deleted, clearing up memory space.

4. Profiler

The Profiler monitors and watches code to optimize it.

5. Compiler

The compiler works ahead of time and creates a translation of the code that has been written and compiles down to a lower level language that machines can read.

6. Optimized code

Why do you need to know these things? So we can optimize the code to be run quicker.

Similar to a stack of functions?

Call stack and Memory Heap

The call stack keeps track of where we are in the code. It uses first in and last out and stacks for example functions. The memory heap is a place to store and write information, where we allocate, use and remove memory. The callstack calls a function from the memory heap and after executing removes it from the stack. When the maximum call stack has been reached, e.g. with an infinite loop, we call it a stack overflow.

  1. Accidentally set global variables
  2. Don’t close eventListeners or setIntervals
  3. Reference out of the DOM

Event loop and Callback Queue

If the call stack does not know what to do with a function it will send it to the Web API. When it is ready, for example when the data has been fetched, the function gets send to the callback queue and then the event loop pushes it onto the call stack only when the call stack is empty.

JS Runtime

JS is a single threaded language which means that only one set of instructions can be executed at a time. There is only one call stack. Except behind the scenes we do not only have the JS Engine but also there is the JS Runtime. The runtime is the whole package including all the tools, the engine is responsible of composing JS.

Global execution context

Every code in JS is run inside an execution context. The global execution context is the first to run being pushes from the call stack. It gives access to the global object and the this keyword and is created in the so called creation phase.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store