Uncover the JavaScript: Engine vs Runtime

We always put or link some JavaScript code in our HTML page and get it executed. But very rarely we think about its execution process. To understand JavaScript properly, we should know the mechanism of its execution. We may not need to know the way of converting our code to machine instructions, or the underlying program for syntax/lexical analyzing. But we should know when and how a piece of code gets executed? What is the scope or visibility of a variable? We should know the steps of execution of our code. We must understand the basic building blocks of a JavaScript code execution. We should have at least the high level understanding of JavaScript Engine. In this series of articles, I’ll try to explain these step by step. So without wasting much time, let’s get started.

Overview on JavaScript Engine

A JavaScript engine is a program or interpreter which reads our JavaScript code, produces machine code, and finally runs the machine code. It is landed in JavaScript runtimes like web browsers, Node.js, or even Java Runtime Environment (JRE). Like any other interpreters, its job is to read and execute code.

Overview of JavaScript Runtime

JavaScript runtime is another software. It uses JavaScript Engine and provides some additional functionalities as needed. The most common example of the runtime is the web browser. Probably the second most widely used runtime is Node.js.

Engine and Runtime Play Together

So, we have two players. JavaScript Engine, and JavaScript Runtime. But who does what? Let’s have an example.

Prior to execution of a piece of code, JavaScript first needs to understand it. Understanding a code means analyzing a code against the grammar of JavaScript language and determine the format of a sentence. Understanding a code is a multi-step process. Understanding the above code will come up with-

  • Line 1 through 3 is a function declaration with name printDateTime.

After understanding the code, JavaScript needs to do some other tasks to execute the code. Tasks could be like resolving functions (find out necessary functions), resolving the values of parameters, resolving accessible values of a function, managing returns, ordering function calls, collecting garbage memories, preparing machine instructions. There are a lot more things to do for JavaScript.

All of the above are job of an engine. But what does browser or any other runtime do? They provide APIs to communicate with the external world. Provide APIs for the common functionalities. These APIs are mostly implemented with low-level languages like C/C++. Basically provided APIs define the functionalities of the platform. A browser provides APIs those are applicable for a program to run in a browser. Browser APIs are like DOM manipulation APIs, windows and document APIs. On the other hand, Node.js provides APIs those are applicable for a server application. Such APIs are like require, process, and buffer APIs.

Conclusion

Engine and runtime work together. Engine manages everything to generate machine instructions. The runtime provides APIs to communicate with external world like browser console, DOM, or Geolocation device. In the next article I’ll focus on the engine.


Articles in this series

  1. Engine vs Runtime