What is JavaScript?
JavaScript is a high level, dynamic, multi-paradigm programming language, which was created by Brendan Eich in 1995. He made JavaScript in order to make web pages more alive. However, JavaScript has evolved into a language which is used not only for client-side web development but also for server-side development.
By the end of this article you will become confident on how JavaScript works behind the scenes.
So, is JavaScript a Compiled or Interpreted?
Most of you might know the answer that JavaScript is interpreted language, which means the code is executed line by line. However, this is partially correct! Due to line by line execution, it led to slower performance of complex sites and therefore, in modern JavaScript, a more sophisticated approach is used which is called Just-In-Time (JIT) compilation.
Wait! What is Just-In-Time Compilation?
So whenever a JavaScrit program is executed, it is first parsed. The parsing includes tokenization in which the code is converted into series of tokens (such as keywords, operators, identifiers) and after tokenization the source code is analyzed and the tokens are then parsed according to the rules of JavaScript grammar. This process generates a data structure called as Abstract Syntax Tree (AST).
The AST is the tree representation of the hierarchical structure of the source code. The AST abstracts away the syntactical details and captures the logical structure of the code. So, basically, AST serves as an intermediate representation that captures logical structure of code, enabling JavaScript engine to interpret, optimize, and execute program efficiently.
After parsing the source code, it is compiled and converted into machine code and the execution takes place right away. Wait! Isn't it the same as interpretation? Yes, it is, but here comes the twist, the source code is continuously under optimization even after execution and this is what Just-In-Time Compilation means. The code is looked for any changes that may happen even after execution so it is under continuous optimization, once a change is identified the compilation followed by execution is performed again. This overall process of execution of JavaScript program takes place in JavaScript Engine so let's now understand what is JavaScript Engine?
JavaScript Engine
The JavaScript Engine can be said to comprise of two essentials: The Callstack and the Heap. The Callstack, the place exactly where the source code is executed, consists of the execution contexts and the Heap is the place where all the objects are stored.
The call stack is a fundamental part of how JavaScript engines manage the execution of code. It is a data structure that keeps track of function calls. The call stack operates on a Last In, First Out (LIFO) principle, where the last function called is the first one to be completed. And what are execution contexts? You can think of execution context as an environment in which piece of JavaScript code is executed.
Whenever a JavaScript program is executed, first the top level code (the code which is outside of any function and blocks) is executed. For this top level code, a global execution context is created. Remember, there is exactly one global execution context for any program, while there are equal number of execution contexts for the number of functions in the JavaScript program. The execution contexts for the functions are created only when the functions are called. The execution contexts are then placed on the top of global context.
Let's take a look at what's inside a execution context and then discuss how does this all work? The execution context contains of a variable environment, which in turn has let, const and var declarations, functions and arguments object. And finally, execution context contains the scope chain and this keyword. Let's take a look at an real example to understand this better.
In the example, firstly the global context is created which contains all the variable and function declarations or the code which is outside of any function, that is the top level code. When the wash() function is called the wash() function execution context is created on top of the global context and in the wash() function there is an fruitsNum() call as a consequence of which fruitsNum() context is created on top of wash() context. When the fruitsNum() function returns the value it's execution context is removed from the top. Then as the wash() function returns the string, it too get removed from the callstack. Finally, the returned value is stored into result variable and thus the execution is performed. However, the global execution context remains in the callstack unless the program is terminated or the browser is closed where the program is running.
So, in this article we had an overview of how the things work behind the scenes in a JavaScript Engine and what is Just-In-Time compilation. Consider following me on X or twitter as I share some insights constantly over there. Stay tuned for more!
Top comments (0)