Differenza tra let e var in JavaScript

di Lorenzo Neri
813 visualizzazioni

Che differenza c’è tra “let” e “var” in JavaScript? È una novità introdotta con ES6 e scopriamo che differenza c’è in questo articolo.

Con l’arrivo di ECMAScript 6 è stato introdotto “let”, di cui ti lascio le referenze qui.

La vera domanda è: “Che differenza c’è tra “let” e “var”?

Ciao mi chiamo Lorenzo Neri e sono un edu-imprenditore: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!

Questo blog e soprattutto questo articolo, sono nati con un grande scopo: aiutare le persone come te a risolvere un problema che in questo caso riguarda JavaScript!

Devi sapere che infatti, tutto quello che troverai qui dentro è frutto di migliaia di fallimenti e ore spese durante la mia vita lavorativa e… Quale miglior modo se non dando vita ad un blog e offrire un aiuto a persone come te?

Per questo incominciamo la nostra avventura cercando di capire quale sia la differenza tra let e var in JavaScript.

Regole di scope

No, non quelle per pulire il pavimento 😀

Sto parlando dello scope, ovvero dove una variabile può agire in una determinata porzione di codice.

Di fatto, la prima differenza tra “let” e “var” è proprio lo scope.

Quando dichiari una variabile usando la parola chiave “var”, la variabile è legata allo scope della funzione, quindi potrà essere utilizzata all’interno della stessa.

Quando dichiari una variabile tramite la parola chiave “let” invece è legata al blocco dentro cui è dichiarata. Per blocco intendo la coppia di parentesi graffe.

Per farti un esempio:

function faiQualcosa(){
   var pluto="bau";
   console.log(pluto);
   {
      let paperino="sberequack";
      console.log(paperino);
   }
   //ERRORE!
   console.log(paperino);
}

Ovviamente, questo non è sufficiente a capire per quale motivo usare “let” piuttosto che “var”, era per farti vedere la prima differenza tra i due, dobbiamo andare oltre.

Hoisting

Le variabili dichiarate tramite “var” sono “hoistate” in cima al blocco di codice a cui appartengono.

“Spetta che vuol dire ‘sta roba in tecnichese?!”

Significa che sono accessibili all’interno del blocco di codice in cui sono dichiarate prima ancora di essere veramente dichiarate.

Le variabili dichiarate tramite “let” invece non sono inizializzate e tantomeno accessibili fintanto che non si arriva alla riga di codice in cui sono davvero dichiarate.

Cerchiamo di capire meglio questa differenza tra usare “let” e “var”.

function faiQualcosa(){
  console.log(pluto);  //Mi vedrò a console un bel "undefined"
  var pluto="bau";
  console.log(pluto); //Mi vedrò a console un bel "bau"

  console.log(paperino);  //Mi vedrò a console un bell'erroraccio!
  let paperino="sberequack";
  console.log(paperino); //Qui invece funzionerebbe a dovere
}

Sì, lo so.

JavaScript sembra scritto da una mente pazza, non per nulla ho voluto raccogliere varie assurdità di JavaScript in questo articolo.

Proprietà globali

Sempre riferendoci allo scope, ma questa volta globale, le variabili dichiarate tramite “let” non sono accessibili a livello globale di script tramite l’oggetto “window” cosa che invece avviene con quelle dichiarate tramite “var”.

Questa, è la terza differenza tra le due, per intenderci:

var pluto="bau";
let paperino="sberequack";
console.log(window.pluto); //Apparirà "bau"
console.log(window.paperino); //Apparirà un bel "undefined"

Ridichiarazione

Vediamo l’ultima differenza tra “let” e “var” in JavaScript!

Se usiamo la modalità “strict” di cui ho parlato in questo articolo succede questo:

"use strict";

var pluto="bau";
var pluto="bau bau"; //Nessun problema: il valore viene rimpiazzato

let paperino="sberequack";
let paperino="qua qua qua"; //Errore di sintassi: paperino è già stata dichiarata!!!

E ri-conclusione!

Spero che questo articolo ti sia stato davvero di aiuto! E quale miglior modo per farmelo sapere con un commento qui sotto, oppure iscrivendoti alla mia newsletter per rimanere sempre aggiornato sulle novità del blog?

Ti aspetto! 🙂

Continua a scoprire di più con questi articoli!

Lascia un commento

Questo sito potrebbe fare uso di cookie e siccome l'UE mi obbliga a fartelo presente, eccoti il classico banner dove puoi decidere come gestirli. Accetta Leggi di più