Javascript ES6 - ES7 Avanzato con TypeScript e RxJs

Quando vogliamo creare una variabile che  sia solo visibile in un blocco di codice ({}) allora utilizziamo la parola chiave let invece di var:

var variable = 2;

function test(){  // console.log(variable);   var variable = 22; }    //console.log(variable); test();

{   var test2 ='test'; } for(let i=0; i<4; i++){  // console.log(i); }   {   let  varTest = 5;   console.log(varTest); }  //console.log(varTest);

La variabile i non è più visibile dopo il ciclo e varTest non è visibile al di fuori del blocco delimitato da {}

Vediamo come usare la destrutturazione e l'operatore spread per estrarrare dei valori da array e oggetti

Il metodo foreach degli array in javascript ES6

Creiamo una funzione che abbia un parametro d'ingresso e ritorni qualcosa.

Useremo una funzione che calcola quanti secondi ha un numero di ore:

// FUNZIONI CON ARGOMENTI

 function hoursToSeconds( hours){
       
      var  ore = +hours || 0;
   
   if( ore<=0){
     alert('Valore non valido');
      return 0;
     
   }
    return ore * 3600;
 }

 var result = hoursToSeconds(24);
//console.log(result);

var result2 = hoursToSeconds(2);
//console.log(result2);

var result2 = hoursToSeconds('2');
//console.log(result2);

var result2 = hoursToSeconds(undefined);
console.log(result2);

Funzione con vari argomenti. Scriviamo una funzione che ci faccia dei calcoli

matematici:

Funzione con vari argomenti in javascript ES6. Scriviamo una funzione che ci faccia dei calcoli

matematici:

function calcola(operazione, parametro1, parametro2){
  
       switch(operazione){
           
         case 'somma':
           return parametro1 + parametro2;
           break;
           case 'sostrazione':
           return parametro1 - parametro2;
           break;
           case 'moltiplicazione':
           return parametro1 * parametro2;
           break;
           case 'divisione':
           return parametro1 / parametro2;
           break;
       }
}
//  console.log(calcola('divisione', 2,3));
console.log(calcola('somma',2,2));

// +, - , * , /
   function calcola(){
         var operazione = arguments[0];
         
    
          var result = 0;
     
       for(var i = 1 ; i< arguments.length; i++){
         
          switch(operazione){
            case '+'  :
              result  +=arguments[i];
            break ;
               case '-'  :
              result  -=arguments[i];
            break;
               case '*'  :
              if(result === 0){
                result = 1;
              }
              
              result  *=arguments[i];
            break;
               case '/'  :
              if(result === 0){
                result = 1;
              }
              result  /=arguments[i];
            break;
              default :
              result = 0;
          }
        
        
      }
     
 return result;
           
      
}
 console.log(calcola('/', 2, 3 ,4, 5));

//console.log(calcola());

Utilizzo di una funzione per eseguire delle operazioni matematiche semplici con argomenti variabili

Scope: Visibilità delle variabili in javascript 

Una variabile dichiarata con var in una funzione , ha visibilità solo all'interno della funzione e può essere vista da funzioni annidate. 

Le variabili di una funzione annidata non possono essere vista dalla funzione parent.

Le variabili ( e le funzioni) vengono portate come dichiarazione in alto all'inizio della funzione anche se sono state dichiarate dopo. 

//Variable scope
var userName ='Test';
//console.log(window.userName);
//console.log(userName);

function testVar(){
   console.log(userName);
  var userName ='Test2' ;
    console.log(userName);
  
   function internalFunc(){
     var interVar ='2';
     console.log(userName);
     console.log(interVar);
   }
  
  return internalFunc;
  
}
var func = testVar();

//console.log(func);
func();
console.log(userName);

Le closure in javascript. Funzioni interne privilegiate:

La funzione internalFunc, avrà visibilità sulle variabili della funzione padre, testVar,

anche dopo che testVar è stata eseguita:

//Variable scope
var userName ='Test';
//console.log(window.userName);
//console.log(userName);

function testVar(){
   console.log(userName);
  var userName ='Test2' ;
    console.log(userName);
  
   function internalFunc(){
     var interVar ='2';
     console.log(userName);
     console.log(interVar);
   }
  
  return internalFunc;
  
}
var func = testVar();

console.log('output dalla funzione interna');
func();
//console.log(userName);

Riassunto dello scope e closure

Passare un

Passare una funzione ad un'altra funzione.

 Le funzioni in javascript sono cittadini di prima classe: Possono essere passate ad un'altra funzione come argomento. In questo caso viene passato un riferimento alla funzione:

//Function as parameter

function outPutObject(obj){
  
  for(var i in obj){
         if(obj.hasOwnProperty(i))
      console.log(i+'='+obj[i]);
  }
  
}

function processObject(myObject, callback){
  
         callback(myObject);
          callback.testFunction = function(){
            console.log('Chiamato  testFunction');
          };
      
}

var objTest = {name:'Test', lastName:'Test2', age:36};

processObject(objTest,outPutObject );

outPutObject.testFunction();

Espressione di funzione: Differenze con le dichiarazioni di funzioni:

 Quando si dichiara una funzione come:

function testFunc(){

}

la possiamo chiamare prima della sua dichiarazione.

Se la dichiariamo come una espressione:

 var testFunc = function(){

}

non la possiamo chiamare prima dell'assegnazione perché è vero che la dichiarazione viene portata in alto dal parse di javascript(hoisting) ma il suo valore sarebbe undefined e avremmo un errore:

// FUNCTION EXPRESSIONS

//functionName(); 

testFunction();

var funcName = function testFunc(){    

  console.log('test');  

  } ;

function testFunction(){ 

  console.log('test func');

}

Espressioni di funzione invocate immediatamente (IIFE). Vedremo come utlizzare le IIFE

per creare uno scope privato e non inquinare l'oggeto globale window:

 (function iife(param1){  

  var testVar =' iiee';   

  console.log('test = '+ param1); 

  }  )  ('Test var'); 

   // iife();

  console.log(typeof iife);

la funzione iife non esiste nell'oggetto globale.

Viene eseguita immediatamente e tutto quello che c'è dentro rimane privato e scompare dopo l'invocazione

Le arrow function sono delle funzioni anonime che non impostano uno scope this proprio ma quello dell'enterno dove si trovano. Hanno una sintassi più ridotta e sono molto comode da usare dove occorre passare una funzione di callback:

var  test2 = (arg1, arg2) => {
  console.log(arg1);
    return  arg1*arg2;
}

var test3 = () => 2+2;

var test4 = (arg1, arg2) => arg1+ arg2;

var test5 = arg1 => arg1*2;
var test6 = arg1 => {
  
     console.log('tes');
    return arg1*2;
}

console.log(test5(7));

Vediamo degli esempi su come usare le fat arrow function per processare degli array

Vediamo cosa sono gli oggetti, le loro proprietà e come crearli in jvascript:

var obj = new Object();

var obj2 = [];

il costrutto this   in javascript fa riferimento al contesto in cui viene chiamata la funzione o metodo di un oggetto.

Se viene usato in object literal, allora sarà quell'oggetto, se viene usato dentro a un funzione, allora se la funzione viene chiamata con l'operatore new, sarà il contesto dell'oggetto creato. Se la funzione viene invocata con bind oppure call, this farà riferimento al primo parametro passato.

Finalmente, se non c'è un altro contesto, allora sarà il this dell'oggetto globale dove si trova la funzione

Funzione come costruttore di oggetti: new e this in javascript:

function Person(name){

 this.name = name;

}

var aPerson = new Person('John');

Oggetto prototype. Estendere oggetti utilizzando il paradigma prototype:

Se usiamo una funzione per costruire degli oggetti:

function Animal(name){       this.name = name || 'Unknown';      this.type='An animal';     this.abitat ='Terra'; }

Animal.prototype.legs =4;

var dog = new Animal('Dog');    dog.legs = 4; // console.log(dog.name);

var horse = new Animal('horse');

var spider = new Animal('spider');

Aggiungendo delle nuove proprietà al prototype della funzione:

Animal.prototype.nomeProprieta = valoreproprietà; // qualunque tipo di variabile

Tutti gli oggetti esistenti e che si creeranno, erediteranno tutte le proprietà aggiunte al prototype della funzione che li crea

AJAX e JSON:  Fare una chiamata AJAX ad uno script php e ricevere un json  e processarlo con la funzione JSON.stringify

Oggetto map

Oggetto Set

Le classi in javascript:

class NomeClasse {

      constructor(param1, param2){   // costruttore della classe

     this.param1 = param1;

this.param2 = param2;

}

 unAltroMetodo(){

   return "sono un altro metodo";

}

}

var miObject = new NomeClasse();

Per estendere una classe si  usa la parola chiave  extends e poi si mette la classe estesa.

Ricordarsi che le classi, a differenza di una funzione bisogna prima dichiarle prima di utlizzarle:

// js6 CLASS, extends, super

class Enemy{
  
        constructor(type='Alien', lives =12){
           this.type = type;
           this.lives = lives;
        }
     shout(){
      return 'grrrrrrrr!' ;
     }
      static getType(){
            return 'Enemy';
          }
}

//var enemy1 =new Enemy();
//console.log(enemy1.lives);

  class Creepers  extends Enemy {
    
        constructor(type ='Creeper', lives = 20){
          
             
                    
            super(type, lives);
          
          this.health = 60;
          
        
          
        }
      static getType(){
          return super.getType()+ ', Creeper';
       ;
          }
    
        shout(){
         // super.shout();
          //this.calledShout = true;
         
          console.log(super.shout()+',' + 'zzzzzzzzzzzzzzz');
        }
       
  }

var creeper =new Creepers('Creeper', 60);
console.log(Creepers.getType());
//creeper.getType();

Un metodo statico si crea aggiungendo static davanti al metodo e questo può essere chiamato senza dover instanziare la classe:

class Enemy{
  
        constructor(type='Alien', lives =12){
           this.type = type;
           this.lives = lives;
        }
     shout(){
      return 'grrrrrrrr!' ;
     }
      static getType(){
            return 'Enemy';
          }
}

console.log(Enemy.getType());

FETCH API. Introduzione

Fetch API. Eseguire fetch, prelevare json e gestione degli errori

Javascript ES6. Promise.all. Vediamo come chiamare in parallelo delle promise e avere il risultato quando tutte sono risolte