Pillole di Javascript

Le principali novità di Javascript ES6 sono:
JavaScript let
JavaScript const
JavaScript Arrow Functions
JavaScript Classes
Default parameter values
Array.find()
Array.findIndex()

Il comando let


Con le specifiche ES6 viene creato un Block Scope che si aggiunge al Global Scope ed al Local Scope. Se ridefiniamo dentro un Block Scope con il comando var il valore assegnato alla variabile rimane lo stesso anche all'esterno del Block scope.
jses6
console js
Mentre se all'interno del Block Scope usiamo il comando let la variabile conserva 2 valori distinti uno all'interno del Block Scope e l'altro valore all'esterno.

jses6
console js

Il comando const


Il comando const ha le stesse caratteristiche di let se viene dichiarato all'interno di un Block Scope. Inoltre bisogna specificare che non è una vera e propria assegnazione di una costante ma un costante riferimento ad un valore. Se si usa con un valore primitivo non si può modificare il valore ma si possono modificare le proprietà degli oggetti definiti come costant. Vediamo cosa succede si proviamo a ridefinire una const:
jses6
console js
Vediamo ora di definire un oggetto const e a modificare poi i valori assegnati.
jses6
console js

jses6
console js
Se però provo a ridefinire un oggetto const non ci viene permesso.
jses6
console js

Arrow Functions


Con le specifiche ES6 possiamo definire le function con una simbologia più semplice e lineare.
Vediamo un esempio.
jses6
console js

Class


Ora anche in JavaScript possiamo definire delle class con un metodo Constructor e possiamo usare anche le inheritance
jses6
console js

Function with Default value


Con la nuova versione possiamo impostare dei valori di default per l'assegnazione dei parametri alle funzioni. Nell'esempio sottostante vediamo che se non inseriamo parametri nella chiamata la funzione prende i valori di default mentre se inseriamo dei valori nei parametri prende questi ultimi.
jses6
console js

Array metodo find()


Negli array ora è possibile utilizzare il metodo find che inserendo una funzione ci restituisce il dato cercato.
jses6
console js

Array metodo findIndex()


Altro metodo utile è il findIndex che inserendo una funzione ci restituisce l'indice nell'array del valore cercato.
jses6
console js

L'oggetto this e window per definire il contesto di variabile globale e locale ed i metodi Bind, Call e Apply


Una variabile può essere locale ad esempio se opera all'interno di una funzione oppure globale ed il suo contenuto può essere utilizzato in qualsiasi ambito della pagina web con lo stesso valore. L'oggetto window contiene il contenuto globale di una intera pagina web. L'oggetto this riporta il contenuto di una intera pagina web se opera in un contesto globale(this = window) ma se opera in in contesto locale riporta solo il contenuto locale quindi in alcuni casi this è diverso da window.
Questo può causare problemi in caso di utilizzo di variabili che hanno lo stesso nome ma definite sia in ambito locale che globale e bisogna prestare attenzione, un metodo è quello di definire globali le variabili che devono essere usate in tal modo.

Per utilizzare dati di un oggetto definito in un contesto locale ma che si vuole utilizzare in modo globale si possono utiizzare i metodi Call, Apply o Bind come negli esempi sottostanti.
Per prima cosa definiamo 3 oggetti diversi che poi applicheremo ai tre metodi che in questo esempio utilizziamo per lo stesso scopo ma che naturalmente hanno caratteristiche diverse

oggetti js
Ora vediamo un metodo per unire i dati in local scope dell'oggetto this in una variabile globale e poi lo stesso risultato usando i metodi Bind, Call ed Apply.
Nell'immagine sottostante il codice javascript:
bind js
Nella figura sottostante i risultati ottenuti vista nella console javascript.
console js
Come si può vedere si ottiene sempre il Nome e Cognome ricavati dal relativo oggetto creato. Ma nel caso di Call ed Apply non possiamo passare altri dati tramite la funzione(abbiamo un undefined nel messaggio che la funzione logName2) mentre con Bind possiamo passare qualsiasi dato ma soprattutto il Bind crea ina copia dell'oggetto.
Vediamo ora come passare i dati con la Call ed Apply. Come si evince dalla immgine sottostante Call ed Apply sono uguali, l'unica differenza è che gli argomenti sono passati nella apply con un array ([]).
console js


Passaggio parametri alle funzioni


Si possono passare più parametri contemporaneamente e se non si inseriscono tutti i parametri definiti nella function non si hanno errori solo che se non si definisce un valore di default si ottiene undefined come possiamo verificare nelle immagini sottostanti(a dx la console).
Per i parametri abbiamo la property built-in arguments che possiamo usare per verificare ad esempio quanti parametri sono stati inseriti.
parametri function
console js

Ora vediamo la Invoke immediata di una function con passaggio parametri


parametri function
console js


Definire una variabile globale


La variabile definita globale è utile per poterla utilizzare anche al di fuori dello scope della function.
parametri function
console js


Invoke function con return altra function e passare arguments ad entrambe

parametri function
console js


Qui facciamo una piccola modifica definendo una variabile che incorpora la function di ritorno e poi la lanciamo passandogli un parametro.
parametri function
console js


Create un object


Per creare un oggetto è suffiente il comando a = {} per crearre un oggetto buoto e poi si può aggiungere un elemento ad esempio con il comando a.fistname = 'Mario' ma si può utilizzare anche il metedo create del prototype Object come nell'esempio sottostante.
parametri function
console js


Array


Creare un array è semplice basta inserire il comando a = ['Mario', 'Piero', 'David'] mentre per inserire un nuovo elemento a.push('Jack')
parametri function
console js


Ciclo For


Ci sono diversi tipi di ciclo :
- for - loop per un numero di volte
- for/in - loop tra le proprietà di un oggetto
- for/of - loop tra i valori di un oggetto iterabile
- while - loop fintantoche la condizione è vera
- do/while - loop fino a che la condizione specificata è vera
parametri function
console js




Javascript Closure


La closure in Javascript è una funzione creata all'interno di una altra funzione che consente alla funzione interna di accedere allo scope della funzione che la racchiude. Vediamo nell'immagine sottostante un esempio con lo script di una closure inserita in una funzione senza nome.

closure js
ed ora il risultato in console.
closure console js