SYMBOLS, ITERATORS AND GENERATORS

THE PRIMITIVE TYPE SYMBOL

Symbol is a new JS data primitive introduced with the 2015 ECMA specification (ES6). A symbol represents a unique and anonymous value. To create them, we cannot use literal syntax but use the type Symbol. Symbols are very useful when we want to avoid property conflicts on an object. Another example of use is when we want to pass a unique, nonreplicable value to a function.

SAMPLE CODE

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Symbol</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        //CREAZIONE DI UN SYMBOL
        let sim1 = Symbol('id');
        let sim2 = Symbol('id');
        /*Un simbolo rappresenta un valore unico e anonimo, Quello che mettiamo tra parentesi 
        non va in nesssun modo a influenzare la creazione del Symbol. Quello che passiamo
        è un etichetta per capire a cosa si riferisce quel Symbol. Vediamo cosa significa
        unico e anonimo. se facciamo il seguente console.log:*/
        console.log(sim1 == sim2);//False
        console.log(Symbol() == Symbol());//False entrambe le invocazioni
        //generano un valore univoco e anonimo.(Numero molto grande)
        console.log(sim1);//NON ABBIAMO UN NUMERO MOLTO GRANDE 
        //ABBIAMO SOLO L'INDICAZIONE SYMBOL (anonimo)
        let obj = {
            p1:10,
            sim1:20,
            //[sim1]:30,Sintassi corretta per aggiungere il simbolo all'oggetto
            132144444414:30 //è equivalente a [sim1]:30 (Numero molto grande)
        };
        /*--Le proprietà sim1:20 e [sim1]:30 sono 2 proprietà completamente diverse. Immaginiamo
        che nelle parentesi quadre ci sia un numero molto grande e unico. Inseriamo un numero
        grande.*/
        console.log(obj.sim1);
        console.log(obj[sim1]);
        console.log(obj[132144444414]);//Riusciamo correttamente ad accedere al valore 30.
        /*Una prima applicazione dei simboli è quindi quando vogliamo evitare
        conflitti tra proprietà.
        Supponiamo di voler importare una libreria di terze parti e aggiungere
        un nostro attributo id.*/
        let user = {
            id:1019,
        };
        //user.id = 1;Il problema è che così facendo andiamo a sovrascrivere il valore originario
        //Per ovviare al problema usiamo un simbolo.
        let id = Symbol();
        user[id]=1;
        console.log(user.id);//1019
        console.log(user[id]);//1
        //Un altro esempio di utilizzo è quando vogliamo passare ad una funzione 
        //un valore univoco non replicabile.Noi vogliamo che le costanti ALTA e BASSA siano un
        //valore univoco.
        //const ALTA = 1;
        //const BASSA = 2;
        const ALTA = Symbol('1');
        const BASSA = Symbol('2');
        function allerta(tipo){
           if(tipo === ALTA){
            console.log('Allerta alta');
           } else if (tipo === BASSA){
            console.log('Allerta bassa'); 
           }else{
            console.log('Nessuna allerta da attivare');
           }
        }
        allerta(ALTA);
        allerta(BASSA);
        allerta(1);//Senza un Symbol abbiamo il valore 'Allerta Alta'
        //Noi non vogliamo questo comportamento, vogliamo attivare
        //l'allerta solo attraverso le costanti ALTA e BASSA.Quindi
        //anzichè assegnare 1 e 2 alle costanti assegnamo un simbolo
        //valore univoco e non replicabile.
    </script>
</body>
</html>

IMPLEMENT ITERATOR PROTOCOL

An iterator to be such must be able to access a sequence of elements one at a time. Having implemented the Iterator protocol does not mean that we can scroll through, for example, an array with a for of.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Implementare il protocollo iterator</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        /*Un iteratore per essere tale deve essere in grado di accedere ad una 
        sequenza di elementi uno alla volta. Iterator e Iterable sono
        protocolli, cioè basati su convenzioni. Creando un iteratore
        creiamo una sorta di cursore che si sposta dalla posizione iniziale
        a quella finale.*/
        function mioIteraore(arr){
            let cursore = 0; //Posizione inizio sequenza
            /*Per implementare il protocollo dobbiamo restituire un oggetto
            con una funzione next() che resituisce il valore se stiamo
            ancora all'interno della sequenza e un booleano done.*/
            return{
                next(){
                  return cursore < arr.length ?
                  {value : arr[cursore++], done:false}:
                  {done:true}

}
            }

}
        let iteratore = mioIteraore([3,5,6]);
        console.log(iteratore.next());//Object con value 3 done = flase
        console.log(iteratore.next());//Object con value 5 done = flase
        console.log(iteratore.next());//Object con value 6 done = flase
        console.log(iteratore.next());//Object con done = true
        /*--L'aver implementato il protocollo Iterator non significa che
        possiamo scorrere l'array con un for of.*/
    </script>
</body>
</html>

IMPLEMENT THE ITERABLE PROTOCOL

An Iterable object allows us to customize how a sequence is traversed, such as through a for loop of. The Iterable protocol must implement a property next whose value is a function.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Implmentare il protocollo iterable</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        /*Un oggetto iterable ci consente di personalizzare il modo
        con cui una sequenza viene attraversata, ad esempio attraverso
        un ciclo for of. Quello che noi vogliamo con l'oggetto rangeObj
        è che la sequenza sia attraversata da from a to con un for of.
        Per implementare il protocollo Iterable un oggetto deve avere
        un metodo [Symbol.iterator](); Il protocollo Iterator deve
        implementare una proprietà next il cui valore è una funzione.*/
        let rangeObj = {
            from : 10,
            to : 16,
            [Symbol.iterator](){
                let current = this.from;
                return {
                    next:() => {
                        return current <= this.to ?
                        {value : current++, done:false}:
                        {done:true}
                    }  
                }
            }
        };
        for(item of rangeObj){
            console.log(item);
        }
        let iteratore = rangeObj[Symbol.iterator]();//Oggetto Iterator
        console.log(iteratore.next().value);//value 10
        console.log(iteratore.next().value);//value 11
        console.log(iteratore.next().value);//value 12
        console.log(iteratore.next().value);//value 13
        console.log(iteratore.next().value);//value 14
        console.log(iteratore.next().value);//value 15
        console.log(iteratore.next().value);//value 16
        console.log(iteratore.next().value);//undefined

/*Anche una stringa è iterabile con un for of*/
        let str = 'Corso Javascript';
        for(lettera of str){
            console.log(lettera);
        }
        console.log(String);
        /*Se andiamo nel prototipo di String vediamo che implementa
        [Symbol.iterator] quindi implementando Iterable possiamo fare
        un for of su una stringa.*/
    </script>
</body>
</html>

ASYNC ITERATOR

We can implement the Iterable protocol with an asynchronous Iterator.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Implmentare il protocollo async Iterable</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        /*Possiamo implementare il protocollo Iterable con un
        Iterator asincrono.[Symbol.asyncIterator]()*/
        let rangeObj = {
            from : 10,
            to : 16,
            [Symbol.asyncIterator](){
                let current = this.from;
                return {
                    next:() => {
                        return current <= this.to ?
                        Promise.resolve({value : current++, done:false}):
                        Promise.resolve({done:true})
                    }  
                }
            }
        };
        console.log('inizio');
        /*Dato che stiamo lavorando con le Promise (codice asincrono)
        non possiamo fare un semplice for ma lo dobbiamo combinare
        con la keyword await. Per dimostrare che stiamo lavorando
        in modo asincrono mettiamo due console.log().*/
        (async function(){
            /*Errore di sintassi dobbiamo inserire il for await
            all'interno di una funzione asincrona e auto invocarla.*/
            for await (item of rangeObj){
                console.log(item);
            }
        })();
        console.log('fine');
    </script>
</body>
</html>

INTRODUCTION TO GENERATORS

Functions as we know are a block of code executed in full or at any rate, up to the return. With generators we have a partial mechanism for executing function code. We can start the function and perform the stop at a certain point. We run one portion of the function, then another portion, and so on, all with internal state maintenance.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Introduzione ai generatori</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        /*Le funzioni come sappiamo sono un blocco di codice eseguite per intero o 
        comunque fino al return. Con i generatori abbiamo a disposizione un meccanismo parziale
        di esecuzione del codice delle funzioni. Possiamo avviare la funzione ed eseguire
        lo stop in un certo punto. Facciamo eseguire una porzione di una funzione, poi un'altra
        e così via, il tutto con il mantenimento dello stato interno.*/
        function *myGen(){
            console.log('funzione myGen');
            yield;//Mettiamo in pausa la funzione
            console.log('Corso');
            yield;//Mettiamo in pausa la funzione
            console.log('Javascript');
        }
        const gen = myGen();//Invochiamo la funzione myGen(); ma non visualizziamo il console.log 
        //questo perchè perchè dobbiamo operare in modo
        //diverso.L'invocazione di una funzione generatore ritorna un generator.
        console.log(gen);//Oggetto di tipo Generator. Tramite questo oggetto possiamo
        //eseguire le varie parti della funzione in base a come l'abbiamo suddivisa.
        //I generatori implementano il protocollo Iterator, quindi possiamo usare il
        //metodo next().
        gen.next();//Visualizziamo correttamente il primo console.log().
        gen.next();//Riprendiamo l'esecuzione della funzione e visualizziamo il secondo
        //console.log().
        gen.next();//Visualizziamo l'ultimo console.log().
    </script>
</body>
</html>

IMPORT AND EXPORT VALUES FROM A GENERATOR (CODE)

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Importare ed esportare valori da un generatore</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        /*Con i generatori abbiamo a disposizione un meccanismo parziale
        di esecuzione delle funzioni. Possiamo avviare la funzione ed eseguire
        la funzione in base a come è stata suddivisa.*/
        function *myGen(){
            console.log('funzione myGen');
            //yield 10;
            //Immaginiamo questo yield (ora commentato) come una sorta di return parziale.
            //Quindi esportiamo un valore dalla funzione all'esterno (valore 10)
            let v1 = yield 10;//Reimportiamo il valore dopo averlo esportato e modificato.
            console.log(v1);
            console.log('Corso');
            yield;
            console.log('Javascript');
        }
        const gen = myGen();

/*con console.log(gen.next()); otteniamo un oggetto con value undefined e done = false.
        done = true al terzo gen.next(); Se vogliamo che value non
        abbia il valore undefined mettiamo il valore dopo yield.(10 nell'esempio)*/

let v1 = gen.next().value;//Accediamo al valore alla destra di yield cioè 10.
        v1 += (Math.random() * 10) | 0;

gen.next(v1);//Con questa istruzione reimportiamo il valore nella funzione myGen().
        //questo sarà il valore di ritorno di yield.
        
    </script>
</body>
</html>

CREATE AN INFINITE ITERATOR WITH GENERATORS

The generators implement the Iterable and Iterator protocols, since they implement Iterable we can use a for of to iterate over the elements.

Copy to Clipboard

LINKS TO PREVIOUS POSTS

THE JAVASCRIPT LANGUAGE

LINK TO CODE ON GITHUB

GITHUB