Var, Let e Const : Conosciamo le differenze

   

10

             

2

SafeValue must use [property]=binding:

Prima dell'avento di ES6 o EcmaScript 6, in Javascript era solo possibile variabili utilizzando la parola chiave var, ora sono state introdotte due nuove keywords: let e const

Cerchiamo di capire in cosa differiscono l'una dall'altra spiegandone il significato e facendo qualche esempio.

VAR

Ci sono fondamentalmente quattro cose che devi sapere sulle variabili create con var:

  • Hanno visibilità legata alla funzione a cui appartengono
  • Il loro valore può essere cambiato
  • Possono essere ridichiarate nello stesso ambito

Visibilità legata alla funzione

// Esempio visibilità

if (true) {

  var a = 20

}


function set() {

  var x = 50

}


// Call setNum

setNum()


// Risultato: 20

console.log(a)


Quando dichiariamo una variabile var all'interno di una funzione, essa vivrà solo all'interno di quest'ultima

Se analizziamo il codice sopra, puoi notare che sono state create due istanze della variabile x, una racchiusa in un blocco if e l'altra dentro la funzione set.

Seguendo questa regola, se proviamo ad eseguire il codice sopra, il risultato aspettato sarà 20, visto che la dichiarazione di x all'interno della funzione set, non influisce sul valore globale che la variabile assume, mentre l'istanza dichiarata nel blocco if, avrà effetto in quanto non è una funzione.

Per capire meglio questo comportamento, ti serve conosce il concetto di "hoisting".

Il concetto di "hoisting" viene tendenzialmente spiegato dicendo che Javascript, durante la compilazione, scansione gli script da cima a fondo e sposta tutte le dichiarazioni delle variabili (non le inizializzazioni) nella parte superiore dell'ambito, che può essere la parte superiore dello script corrente o la parte superiore della funzione corrente.

Successivamente, durante l'esecuzione, quando serve, questi valori vengono ripescati e utilizzati, questo spiega anche perché in Javascript è possibile utilizzare variabili che non sono ancora state inizializzate.

Quello che accade in realtà però  è diverso, infatti le variabili non vengono davvero spostate in alto ma la loro dichiarazione viene salvata in memoria.

Il concetto dello "spostare in alto" ci viene pero' utile per capire il funzionamento il significato di hoisting e della visibilità di queste variabili, qui sotto puoi trovare un esempio che ti fa comprendere meglio il funzionamento, ma ricorda che questo non è quello che accade nella realtà

// Esempio illustrativo hoisting


var a


if (true) {

  a = 20

}

function set() {

  var a


  a = 50

}


// Call set

set()


// Risultato 50

console.log(a)


Il loro valore può essere cambiato

var a = 10

a = 20


// Consoles 20

console.log(a)


C'è altro da spiegare? passiamo alla caratteristica successiva.


Le variabili var possono essere dichiarate nello stesso ambito

var a = 20;

var a = 10;

//Risultato 10

console.log(a)

Come puoi vedere nell'esempio di codice, stiamo creando due variabili con lo stesso nome, il che significa che stiamo sovrascrivendo la prima variabile ed è per questo che 10 viene stampato. 

Questo comportamento credo sia insieme al discorso della visibilità, il fattore che ha fatto pensare che oltre alla dichiarazione tramite var, gli sviluppatori necessitassero di una dichiarazione più intuitiva e contestualizzata.

LET

Di nuovo ci sono quattro cose importanti che devi sapere sulle variabili create con let:

  • Hanno visibilità legata al blocco a cui appartengono
  • Il loro valore può essere cambiato
  • Non possono essere ridichiarate nello stesso ambito

Hanno visibilità legata al blocco a cui appartengono

if (true) {

  let a = 20

}


// ReferenceError: a is not defined

console.log(a)


A differenza dell variabili var, la dichiarazione tramite let impone un limite di scope ancora più ristretto. Se dichiarare una variabile var dentro un blocco permetteva al suo valore di essere comunque assegnato e visibile in ogni parte del codice, la dichiarazione di una variabile let, resta all'interno del blocco e ogni accesso ad essa sarà undefined in quanto quella variabile non verrà salvato in memoria durante la fase di compilazione.


Il concetto di "hoisting" spiegato in precedenza, qui perde del tutto valore.

 
a = 'Hello Javascript!' 
let a; 
// a is not defined 
console.log(a)


Il loro valore può essere cambiato

let a = 'Hello Javascript!' 
a = 'Hello World!' 
// Consoles 'Hello World!' 
console.log(a)

Ancora una volta, penso che questo codice sia auto-esplicativo quindi passiamo al prossimo punto.


Consentire che le variabili non possano essere dichiarate nello stesso ambito

let a = 'Hello Javascript!' 
let a = 'Hello World!' 
// TypeError: Duplicate declaration "a" 
console.log(a)

La dichiarazione di una variabile let deve essere unica


CONST

Finalmente vediamo come funziona const. Come prima, ci sono quattro cose da tenere in considerazione con le variabili const:

  • Hanno visibilità legata al blocco a cui appartengono
  • Il loro valore può essere cambiato
  • Non possono essere ridichiarate nello stesso ambito

Hanno visibilità legata al blocco a cui appartengono

Proprio come let, le variabili const non sono accessibili da scope che non sia quello del blocco di appartenenza


if (true) {

  const a = 20

}

// ReferenceError: a is not defined

console.log(a)


Anche qui il concetto di hoisting viene meno

a = 'Hello!'


const a


// ReferenceError: a is not defined

console.log(a)

Il loro valore può essere cambiato


// Array con const

const box = [1, 2, 3]

box.push(4)


// Console [ 1, 2, 3, 4 ]

console.log(box)


// Assegnamo a box un nuovo array

box = [5,6,7]


// TypeError: Assignment to constant variable.

console.log(box)



const obj = {}


obj.first_name = 'Denis'

obj.last_name = 'Cangemi'


// Console { first_name: 'Denis', last_name: 'Cangemi' }

console.log(obj)



Il termine const, ci porta immediatamente a pensare che l'esistenza di queste variabili sia proprio legata al fatto che la variabile dichiarati diventi una costante quindi un valore che non può essere modificato.

Le variabili const definiscono un riferimento costante a un valore presente in memoria ad un determinato indirizzo, ma non significa che il loro valore non può mutare. 

Alla riga 2 aggiungiamo un nuovo elemento all'array e possiamo vedere che il risultato dell'operazione viene mostrato con successo.

Alla riga 7 invece, se proviamo ad assegnare a box un nuovo array, questo provocherà un errore in quanto stiamo cambiando il riferimento di box in memoria.

Successivamente proviamo a fare la stessa cosa, in questo caso con un oggetto, e andando a cambiare le proprietà di esso, possiamo vedere che lo script conclude con successo.

Quindi, per concludere ... il loro valore può essere cambiato, ciò che non può essere cambiato è il suo riferimento. 

Per dirla semplicemente: le variabili const non possono essere riassegnate.


Non possono essere riprogrammati nello stesso ambito

const a = 'Hello Javascript!' 
const a = 'Hello World!' 
// TypeError: Duplicate declaration "a" 
console.log(a)


Come succede con le variabili let non possiamo creare duplicati.


CONCLUSIONE

Per questa guida è tutto, ti invito a lasciare un mi piace in alto se l'articolo ti è tornato utile e se sei interessato allo sviluppo web, ti invito a leggere gli altri articoli che puoi

trovare in questo blog.

(see http://g.co/ng/security#xss)