Skip to main content

var vs let

La principal diferència entre var i let en JavaScript rau en el seu abast (scope) i en si permeten la redeclaració. let es va introduir a ECMAScript 2015 (ES6) per a solucionar alguns problemes d'abast de var.

Diferència Principal: Abast (Scope)

 

Característica var let
Abast (Scope) Abast de funció (Function Scope) o Abast global (Global Scope). Abast de bloc (Block Scope).
Redeclaració Permesa. Es pot declarar la mateixa variable diverses vegades en el mateix abast. No permesa. Llança un error (SyntaxError) si es tenta redeclarar en el mateix abast.
Hoisting (Elevació) La declaració s'eleva (hoists) al cim de la funció/abast global i s'inicialitza amb undefined. Es pot usar abans de declarar-la (però el valor serà undefined). La declaració s'eleva (hoists) al cim del bloc, però no s'inicialitza. No es pot usar abans de declarar-la (resulta en un ReferenceError). Això es coneix com a "zona morta temporal" (Temporal Dead Zone).

 

Qué és l'Abast?

Abast de funció (var): Una variable declarada amb var és accessible en qualsevol lloc dins de la funció on ha estat declarada, ignorat els blocs com if o for.

function exempleVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // Sortida: 10 (Encara accessible fora del bloc `if`)
}

Abast de bloc (let): Una variable declarada amb let només és accessible dins del bloc de codi on ha estat declarada (un bloc és qualsevol codi dins de claus {}). Això inclou bucles (for), condicionals (if), i funcions.

function exempleLet() {
  if (true) {
    let y = 20;
  }
  // console.log(y); // Error: ReferenceError: y is not defined (No accessible fora del bloc `if`)
}

Que és el hoisting?

Hoisting/elevació (var): La declaració s'eleva al capdamunt del seu àmbit, però la inicialització es manté on es va escriure. Per això, si intentes utilitzar una variable var abans de declarar-la, el seu valor serà undefined.

console.log(color); // undefined
var color = "blau";

Hoisting/elevació (let):  La declaració també s'eleva, però no s'inicialitza. Si intentes accedir a una variable let abans de declarar-la, obtindràs un ReferenceError. A l'espai entre l'elevació i la declaració se l'anomena Zona Morta Temporal (Temporal Dead Zone - TDZ).

// console.log(forma); // ReferenceError: No es pot accedir a 'forma' abans de la inicialització
let forma = "cercle";

 

Avantatges i Inconvenients

var

Avantatges Inconvenients
Compatibilitat històrica amb versions antigues de JavaScript. Problemes amb l'abast de funció: Pot causar errors subtils i inesperats, especialment dins de bucles, ja que la variable es "filtra" fora del bloc.
Hoisting amb inicialització a undefined: Pot ser convenient en casos molt concrets, tot i que generalment és un inconvenient. Permet la redeclaració: Això fa que el codi sigui més propens a errors i menys llegible, ja que una variable pot ser redefinida accidentalment.

let

Avantatges Inconvenients
Abast de bloc (El gran avantatge): Fa que el codi sigui més previsible i menys propens a errors, ja que les variables estan confinades on s'espera. No funciona en entorns molt antics que no admeten ES6 (tot i que avui dia això és rar).
Evita la redeclaració: Ajuda a atrapar errors de tipus alhora d'escriure el codi. Zona morta temporal: Pot ser un concepte confús per a principiants si intenten usar una variable let abans de la seva declaració.

Recomanacions

Avui en dia, la millor pràctica és evitar var i utilitzar principalment let (per a variables que es reassignaran) i const (per a valors constants).

  • let (Ús Modern i Recomanat)
    • Qualsevol variable local que necessiti ser reassignada (canviada de valor).
    • Variables dins de blocs condicionals (if/else) o blocs de funció.
    • Comptadors en bucles (for loop), ja que ofereix un abast de bloc, evitant que la variable comptadora "contamini" l'abast exterior.
      for (let i = 0; i < 5; i++) {
  // i només existeix aquí dins
}
// console.log(i); // Error

  • var (Casos d'Ús Heretats) 
    • Codi antic: Si es treballa amb codi JavaScript heretat o es manté una base de codi antiga.
    • Entorns molt restringits: En entorns on la compatibilitat amb versions molt antigues de JavaScript és obligatòria. (Molt poc freqüent avui dia).

 

Back to top