SYMBOL, ITERATOR E GENERATORI

IL TIPO PRIMITIVO SYMBOL

Symbol è un nuovo dato primitivo JS introdotto con la specifica ECMA 2015 (ES6). Un simbolo rappresenta un valore unico e anonimo. Per crearli non possiamo usare la sintassi letterale ma si usa il tipo Symbol. I simboli sono molto utili quando vogliamo evitare conflitti di proprietà su un oggetto. Un altro esempio di utilizzo è quando vogliamo passare ad una funzione un valore univoco non replicabile.

CODICE DI ESEMPIO

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>

IMPLEMENTARE IL PROTOCOLLO ITERATOR

Un iteratore per essere tale deve essere in grado di accedere ad una sequenza di elementi uno alla volta. L’aver implementato il protocollo Iterator non significa che possiamo scorrere ad esempio un array con un 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>

IMPLEMENTARE IL PROTOCOLLO ITERABLE

Un oggetto Iterable ci consente di personalizzare il modo con cui una sequenza viene attraversata, ad esempio attraverso un ciclo for of. Il protocollo Iterable deve implementare una proprietà next il cui valore è una funzione.

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

Possiamo implementare il protocollo Iterable con un Iteratore asincrono.

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>

INTRODUZIONE AI GENERATORI

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 funzione, poi un’altra porzione e così via, il tutto con il mantenimento dello stato interno.

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>

IMPORTARE ED ESPORTARE VALORI DA UN GENERATORE (CODICE)

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>

CREARE UN ITERATORE INFINITO CON I GENERATORI

I generatori implementano i protocolli Iterable e Iterator, dato che implementano Iterable possiamo utilizzare un for of per iterare sugli elementi.

Copy to Clipboard

LINK AI POST PRECEDENTI

IL LINGUAGGIO JAVASCRIPT

LINK AL CODICE SU GITHUB

GITHUB