Apium Innovations
Published in

Apium Innovations

Revelations: How JavaScript Works Behind The Scenes

What is JavaScript?

JavaScript started as a scripting language to implement advanced and dynamic features on web pages. However, with the development of a variety of frameworks and libraries, we can use JavaScript for a variety of purposes including web development, Backend development, Mobile application development, and Games development.

Having a deep and clear understanding of important concepts in JavaScript allows us to write clean and effective code. In This series of articles, I’m expecting to dive deep into concepts such as event loop, scope, closure, Hoisting, Temporal Dead Zone, and how JavaScript works behind the scenes.

In the first article of the series, I will be explaining how JavaScript converts into Machine code and all the steps involved in the process.

Just-In-Time compilation (JIT)

Computers can only understand Binary code and assembly language which are referred to as low-level languages. In that case, every programming language needs to convert into machine code using an interpreter or a compiler.

In compilation, the entire code converts into machine code at once and write to a binary file (portable file) which can be executed by a computer. In this method, code execution can happen way after the compilation

compilation

In the interpretation, the interpreter runs through the source code and executes it line by line. This process read the code and execute it at the same time without generating a portable file

interpretation

JavaScript used to be a completely interpreted language. However as interpreted languages are significantly slower than compiled languages, modern JavaScript engines use a combination of interpretation strategy and compilation strategy which is called Just-In-Time compilation.

Just-In-Time compilation converts the entire JavaScript code into Machine code at once and then executes it immediately which speeds up the compilation process. This method does not generate a portable file.

Just-In-Time compilation

How Just-In-Time Compilation works

JavaScript Just-In-Time compilation happens inside the JS engine (I’ll be explaining about JS engine in the upcoming articles).

what happens inside JS Engine

The first step in this process is Parsing the source code. JS engine uses a parser to go through our JS source code line by line and detect syntax errors. Parse is aware of all the rules of JavaScript and in that case, if it encounters any errors in the source code it will throw an error and stop the code execution.

If there are no errors in the source code, the parser generates the Abstract Syntax Tree (AST). This is a tree data structure that represents the source code in a tree structure. AST does not contain all the details in the syntax. It represents only content-related information.

Generated AST then convert into machine code and execute right away. However modern JS engines have an optimization method. In this method, the JS engine creates an unoptimized version of the machine code at first and starts to execute it as fast as possible. Meanwhile, the machine code is optimized and recompiled in the already running program execution.

This article is an explanation of how the JavaScript code is compiled into machine code. In the next article, I’ll be explaining JS runtime Environment and JS engine and I hope I was able to help you understand the Just in time compilation process of JavaScript.

At Apium Innovations we build world class software products while following the best practices in JavaScript, follow us to learn more.

Thank you for reading!

Interested in what we do? Check us out at www.apium.io

--

--

--

Apium Innovations is a place which likes to challenge the norms. We like to add a bit of creativity to business, education and lifestyle. We like to say we add eccentricity to the generic mundane software.

Recommended from Medium

Event Bubbling in Javascript- A better understanding

How to work with Suite 6.0 components: 3 use-cases from our team

UI Dashboard built with Suite 6 components

React Native : Unable to load script issue: Solved

JetBrains Projector : Bringing New Life to Legacy Java Swing Applications

Funny and Inspirational Quotes for Developers

Numpy metho

Modelling With Motion in Babylon.js

How To Check for a Substring in JavaScript

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
Jinali Pabasara

Jinali Pabasara

Software Engineer | Tech Enthusiast

More from Medium

Revelations: How JavaScript Works Behind The Scenes — part 02

TypeScript vs JavaScript: What’s the Difference?

Typescript Quick Introduction

Concurrency model & Event loop in javascript: