main banner

Development

JavaScript under the hood

Many of us use JavaScript programming language in our day to day. From an end-user perspective to a developer one, it may not seem important to understand how the JavaScript language works as long as we can manipulate it to do the things we want. However, in order to fully comprehend both the power and capabilities of the language as well as its limitations, it is important to know how JavaScript is built and executed by the web browsers.  The two main issues which deserve focus when talking about the JavaScript architecture are the following: how the JavaScript engine works and the browser environment in which JavaScript is run.


The JavaScript engine consists of three main parts: the parser, the interpreter and the run-time libraries. The first one is responsible for consuming the code and dividing it into the different main components that make up the JavaScript language and produces a syntax tree. It works by tokenizing the different lines of code and identifying the different operations that make up the whole language such as variable declarations or function calls. On the following example it is shown how simple commands are broken down in order to build such syntax tree. A demonstration of this can be found online at: http://esprima.org/demo/parse.html.

java script under the hood

 

The tree output is then passed into the interpreter, which basically just traverses the tree and performs the operations that were specified by the parser. An interactive demonstration of how program executions flows can be found at http://int3.github.io/metajs/.

Nonetheless, this can be a time-consuming operation if every time that the program has to be executed the interpreter traverses the tree. This is why JavaScript has a way to enhance the performance of the code. This is done by a set of three tools: converting the syntax tree into bytecodes, “folding” constantly used variables and compiling code into machine code.

Bytecodes is the result of compiling the source code and just outputting a list of instructions that can be executed directly at the JavaScript virtual machine. Bytecodes are then executed instead of traversing the tree structure. Alongside with the bytecodes integration, there is also the concept of “folding”. Folding is useful when an operation is constantly performed by the code i.e. getting the size of an array each time a for-loop iteration is ran. By “folding” this command, the actual result is stored in the bytecode and each time such value is needed the operation is not anymore executed and the folded value will be retrieved faster from memory.  The last step is the machine code generation which enables JavaScript to be ran directly from the user’s CPU. This type of compilation is called “JIT” (Just-in Time).

java script under the hood

The last part of the JavaScript engine is the integration of run-time libraries. These are libraries that allow the user to perform other specific tasks, such as string manipulation, mathematical operations, or error handling operations. It helps to encapsulate different functions which may result difficult to debug such as obtaining the cosine of a number.

The second issue is the browser environment. The goal of JavaScript is to interact with the user via the browser. This is done by the already discussed JavaScript engine which is particular to each of the browser.  Among many other things the browser also contains the DOM (Document Object Model) which is the representation of the HTML document. Because the JavaScript needs to interact with the DOM in order to be able to be actually useful and generate user interactions, it needs to be “bound” to the browser.

The best example to illustrate this is the “alert” function. The behavior of this function is typically to display a dialog box and show some text to the user. However, the truth behind this is that the alert function is actually not defined by the JavaScript itself. This function is just a behavior of the “window” object which is injected by the browser to the JavaScript environment. Each time the alert function is called JavaScript invokes the “window.alert” function. This is why the behavior may vary depending on the client that the user is running. This is important because it means that the objects that live in the JavaScript code are mere representations of the real objects which are contained in the browser and which execute the functions indicated by the code.

java script under the hood

Although these are just the basics on how the JavaScript language works they can help us understand many other aspects in the JavaScript world, such as the different problems that may arise when writing cross-browser compatibility of code. Hence, the creation of different libraries such as JQuery in order to standardize the way JavaScript behaves when run in different browsers. Also, it can help us improve our coding skills and wonder if the way we are writing the code is actually the best way for the JavaScript parser and Bytecodes converter. For more information please refer to: https://speakerdeck.com/ariya/javascript-and-the-browser-under-the-hood.

 

Luis B.

Luis has a B.S. in Mechatronics Engineering and over 2 years of experience in which he has specialized in MVC,  WebApi, C#,  JavaScript and HTML5. Born in Toluca, Mexico, he enjoys reading and music. He has written some pretty good posts about some of this technologies you might find interesting.

Articles