JAVASCRIPT ENGINE

Tutti i nostri dispositivi hanno un componente chiamato microprocessore che è il cervello degli stessi dispositivi e che si occupa di eseguire le istruzioni che sono in memoria.

IL CODICE MACCHINA

Il linguaggio macchina o codice macchina è una lunga serie di 0 e 1, segnali elettrici che il processore elabora per fornirci un output. Nel corso degli anni si sono sviluppati linguaggi via via più lontani dal codice macchina ma comprensibili a noi esseri umani. Questi linguaggi per essere eseguiti dal processore devono compiere il procedimento inverso, cioè la trasformazione dal codice di alto livello in codice macchina.

ENGINE

Nel caso di Javascript sia lato client che lato server questo lavoro di traduzione viene fatto dagli engine (motori javascript).

V8 ENGINE

Per quanto riguarda JS lato client, il codice viene eseguito nel browser e il V8 Engine non può interagire con il file system o accedere a database, i browser garantiscono che il codice JS non operi al di fuori del browser stesso.

V8 ENGINE LATO CLIENT E LATO SERVER

Però sappiamo anche che il C++ può interagire con il file system; quindi, possiamo prendere il motore V8 aggiungere codice C++ e fare in modo che possa interagire con file system e database. Questo è quello che avviene con Node.js.

JS E’ UN LINGUAGGIO A TIPIZZAZIONE DINAMICA

Javascript non è nato come linguaggio veloce, tutt’altro, è a tipizzazione dinamica cioè al momento della dichiarazione di una variabile non si usa il tipo come si fa in altri linguaggi come il C, questo non è una cosa positiva per il compilatore perché deve comprendere il tipo di dato e questo influisce sulla velocità.

IL COMPILATORE JIT (JUST IN TIME)

Tuttavia JS pur essendo a tipizzazione dinamica è sufficientemente veloce grazie alla collaborazione dell’interprete javascript e un compilatore JIT. Interprete e compilatore lavorano in simbiosi per ottimizzare l’esecuzione del codice.

EXECUTION CONTEXT E 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>

L’hoisting non avviene per variabili definite con let o const perché nella creation phase non vengono messe in memoria. Inizialmente il motore javascript definisce il contesto di esecuzione globale in due step. Uno step chiamato Creation Phase e l’altro Execution Phase. Nello step di execution phase il codice viene eseguito riga per riga. Quando il motore incontra una definizione di funzione viene creato un contesto di esecuzione di funzione sempre nei due step di creazione ed esecuzione.

IL RUNTIME

Runtime letteralmente vuol dire tempo di esecuzione. Il runtime è composto da due componenti, HEAP una zona di memoria in cui vengono inserite variabili e funzioni e un EXECUTION STACK, una struttura di tipo LIFO (Last In First Out) cioè l’ultimo elemento che è entrato è il primo ad uscire. Supponiamo di dover eseguire le istruzioni riportate nella figura in basso.

OPERAZIONI COMPIUTE DAL RUNTIME

Il runtime compie le seguenti operazioni:

Posiziona in fondo allo stack il contesto di esecuzione globale
Viene fatto l’hoisting delle funzioni a e b ponendole nello heap
Anche alla variabile v2 definita con var viene fatto l’hoisting e viene assegnato il valore undefined
Quindi il motore javascript inizia a eseguire il codice riga per riga, assegna il valore 10 a v1 e il valore 20 a v2 ponendo le variabili nello heap
Arriva quindi all’invocazione di a() e crea un contesto di esecuzione per a() sempre con le due fasi creation phase ed execution phase e lo inserisce nello stack
La funzione a() invoca la funzione b() viene quindi creato un contesto di esecuzione per la funzione b() e viene messo in cima allo stack

L’immagine riporta il runtime nei passi descritti.

Successivamente la funzione console.log(‘Ciao da b); dopo essere stata eseguita viene rimossa dallo stack
Il puntatore allo stack ora punta b() che sta uscendo dal suo ambito di visibilità. Quindi b() termina
Nello stack ora c’è a() che esegue un console.log che viene messo in cima allo stack.
Al termine viene rimosso.
Anche a() ha terminato le sue istruzioni, quindi il suo contesto di esecuzione viene rimosso dallo stack

Lo stack consente al motore javascript di tenere traccia dei contesti di esecuzione e in un dato momento sapere quale contesto deve eseguire.

JAVASCRIPT E’ UN LINGUAGGIO SINGLE THREAD

Visionare il codice sotto riportato per la spiegazione di questo argomento. In pratica quando si ha a che fare con operazioni molto lunghe la user interface viene congelata.

Copy to Clipboard

SCOPE

In JS abbiamo due tipi di scope, Global scope e Local scope. Il Global scope è unico per tutto il documento ed esiste dall’inizio alla fine del programma Javascript. Lo scope locale viene creato ogni volta che una nuova funzione viene definita.

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 E DIFFERENZA TRA VAR, LET E CONST

Il block scope non è supportato da var, ma lo è da let e const. Avere una regola di visibilità delle variabili ci aiuta a scrivere codice sicuro. È utile racchiudere variabili in un blocco perché abbiamo un piccolo spazio riservato con variabili che nascono e muoiono.

Copy to Clipboard

LINK AI POST PRECEDENTI

IL LINGUAGGIO JAVASCRIPT

LINK AL CODICE SU GITHUB

GITHUB