THE JAVASCRIPT ENGINE

JAVASCRIPT ENGINE

All our devices have a component called a microprocessor that is the brain of the devices themselves and is responsible for executing the instructions that are in memory.

THE MACHINE CODE

Machine language or machine code is a long series of 0s and 1s, electrical signals that the processor processes to give us output. Over the years, languages have developed that are gradually more and more distant from machine code but understandable to us humans. These languages to be executed by the processor must go through the reverse process, that is, the transformation from high-level code to machine code.

ENGINE

In the case of both client-side and server-side javascript, this translation work is done by the engine (javascript engines).

V8 ENGINE

As for client-side JS, the code runs in the browser and the V8 Engine cannot interact with the file system or access databases, browsers ensure that the JS code does not operate outside the browser itself.

V8 CLIENT-SIDE AND SERVER-SIDE ENGINE

However, we also know that C++ can interact with the file system; therefore, we can take the V8 engine add C++ code and make sure that it can interact with file systems and databases. This is what happens with Node.js.

JS IS A DYNAMIC TYPING LANGUAGE

Javascript was not born as a fast language, far from it, is dynamic typing i.e. at the time of declaring a variable you do not use the type as you do in other languages such as C, this is not a good thing for the compiler because it has to understand the data type and this affects speed.

THE JIT COMPILER (JUST IN TIME)

However, JS while being dynamically typed is fast enough due to the cooperation of the javascript interpreter and a compiler JIT. Interpreter and compiler work symbiotically to optimize code execution.

EXECUTION CONTEXT AND GLOBAL EXECUTION CONTEXT

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EXECUTION CONTEXT</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        //GLOBAL EXECUTION CONTEXT

//OGGETTO GLOBALE WINDOW
        console.log(window);
        //this è un riferimento all'oggetto windows
        console.log(this);
        console.log(a);/*--Stampa undefined perchè la variabile globale a
        nella creation phase viene messa in memoria con valore undefined.
        Nella fase di esecuzione del contesto di esecuzione globale
        viene assegnato il valore 20 ad a quindi possiamo visualizzarla.*/
        var a = 20;
        console.log(a);

test();
        /*--Le funzioni definite in questo modo vengono interamente
        messe in memoria nella creation phase del contesto di esecuzione
        globale. Per questo se la invochiamo prima della sua definizione
        riusciamo ad eseguirla senza problemi.*/
        function test(){
            console.log('Ciao da test!');
        }
        //fn();
        /*--Abbiamo un errore essendo l'assegnamento di una variabile fn
        definita con const, in questo caso non abbiamo hoisting.*/
        const fn = function(){
            console.log('function expression');
        }
        //FUNCTION EXECUTION CONTEXT

function fn1(){
            b();
            console.log(arguments);
            console.log(a);//Errore di riferimento occorre dichiarare
            //la variabile con var
            var a = 20;//undefined avviene l'hoisting
            //avviene l'hoisting anche per funzioni definite internamente
            //con questa sintassi
            function b(){
                console.log('ciao da b!');
            }
        }
        fn1(10,20,30);
    </script>
</body>
</html>

Hoisting does not occur for variables defined with let or const because in the creation phase they are not put in memory. Initially, the javascript engine defines the global execution context in two steps. One step called Creation Phase and the other Execution Phase. In the execution phase step, the code is executed line by line. When the engine encounters a function definition a function execution context is created always in the two steps of creation and execution.

THE RUNTIME.

Runtime literally means execution time. The runtime consists of two components, HEAP a memory area where variables and functions are placed and a EXECUTION STACK, a structure of type LIFO (Last In First Out) i.e., the last element that entered is the first to exit. Suppose we need to carry out the instructions shown in the figure below.

OPERATIONS PERFORMED BY THE RUNTIME

The runtime performs the following operations:

Places global execution context at the bottom of the stack
Hoisting of functions a and b is done by placing them in the heap
The variable v2 defined with var is also hoisted and assigned the value undefined
Then the javascript engine starts executing the code line by line, assigns the value 10 to v1 and the value 20 to v2 by placing the variables in the heap
It then arrives at the invocation of a() and creates an execution context for a() again with the two creation phase and execution phase and places it on the stack
Function a() invokes function b() an execution context is then created for function b() and is placed at the top of the stack

The image shows the runtime in the steps described.

Then the function console.log(‘Hello from b); after being executed is removed from the stack
The pointer to the stack now points to b() which is leaving its scope of visibility. Then b() ends
In the stack now there is a() that executes a console.log that is put at the top of the stack.
Upon completion it is removed.
Also a() has terminated its instructions, so its execution context is removed from the stack

The stack allows the javascript engine to keep track of execution contexts and at any given time know which context it should execute.

JAVASCRIPT IS A SINGLE THREAD LANGUAGE

View the code below for an explanation of this topic. Basically when dealing with very long operations the user interface is frozen.

Copy to Clipboard

SCOPE

In JS we have two types of scope, Global scope and Local scope. Global scope is unique for the entire document and exists from the beginning to the end of the Javascript program. The local scope is created each time a new function is defined.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Scope (Ambito di visibilità)</title>
</head>
<body>
    <script type="rocketlazyloadscript">    
        //GLOBAL SCOPE
        let n = 20;
        function fn()
        {
            //SCOPE LOCALE #1

/*Dallo scope locale creato dalla funzione riusciamo
            ad accedere allo scope globale dove è dichiarata la
            variabile n.*/
            console.log(n);
            let m = 10;
            fn2();
            function fn2(){
                //SCOPE LOCALE #2

/*--Uno scope più interno ha visibilità su
                quelli più esterni ma non viceversa*/
                console.log(m);//stampa 10
            }
        }
        fn();
        //console.log(m);

/*--Abbiamo un errore dallo scope globale non possiamo accedere
        a variabili interne alla funzione. Queste sono variabili locali
        ed hanno vita esclusivamente all'interno della funzione.*/

//GLOBAL SCOPE
        
        function fn3(){
            //SCOPE LOCALE #3
        }

//GLOBAL SCOPE
    </script>
</body>
</html>

BLOCK SCOPE AND DIFFERENCE BETWEEN VAR, LET AND CONST

The block scope is not supported by var, but it is supported by let and const. Having a variable visibility rule helps us write safe code. It is useful to enclose variables in a block because we have a small space reserved with variables that are born and die.

Copy to Clipboard

LINKS TO PREVIOUS POSTS

THE JAVASCRIPT LANGUAGE

LINK TO CODE ON GITHUB

GITHUB

JAVASCRIPT ENGINE

THE MACHINE CODE

ENGINE

V8 ENGINE

V8 CLIENT-SIDE AND SERVER-SIDE ENGINE

JS IS A DYNAMIC TYPING LANGUAGE

THE JIT COMPILER (JUST IN TIME)

EXECUTION CONTEXT AND GLOBAL EXECUTION CONTEXT

THE RUNTIME.

OPERATIONS PERFORMED BY THE RUNTIME

JAVASCRIPT IS A SINGLE THREAD LANGUAGE

SCOPE

BLOCK SCOPE AND DIFFERENCE BETWEEN VAR, LET AND CONST

LINKS TO PREVIOUS POSTS

LINK TO CODE ON GITHUB

About the Author: Marco Albasini

Leave A Comment Cancel reply

Categories

Archive

THE JAVASCRIPT ENGINE