Qué son los scopes y las variables let, const y var

En este artículo explico qué son los scopes y las variables let, const y var y cómo pueden ser una ventaja o un problema. En lineas generales las palabras let, const y var sirven para describir su scope y comportamiento. Así que lo primero sería entender qué es esto del scope.

Antes de nada, los scopes

Hay 3 tipos de scopes, que dicho de una forma más natural, vendría a ser el lugar en el que viven y son accesibles las variables. Existe el global scope, el local scope y el block scope. Tanto let como const forman parte de este último.

El global scope es el que se puede escribir y leer en cualquier lugar, y viviría en el objeto window. Por ejemplo:

(function test(){ name = "Barb"; })(); console.log(window.name); 

Imagina lo peligroso que es esto, tienes variables que se pueden sobreescribir y no sabes ni por dónde te van a venir los palos.

El local scope contendría las variables dentro de una función, y para usarlo se escribiría var delante.

(function test(){ var name = "Barb"; })(); console.log(window.name); 

El block scope vendría a ser el comportamiento que habitualmente esperarías. Es parecido al local scope pero ligeramente más restrictivo ya que restringe a cualquier bloque delimitado por {}, no sólo funciones.

(function test(){

  let letters = ["B", "i", "g", "g", "i", "e"];
  let name = "";

  for(let i = 0; i < letters.length; i++){

    name += letters[i];
  }


  console.log(letters); 
  console.log(name); 
  console.log(i); 
})();

¿Qué pasaría si en este for hubiéramos definido la i del bucle con var en lugar de let? Pues que el último console.log no fallaría, mantendríamos acceso a él desde ahí (y podríamos modificarlo). ¿Y si hubiéramos omitido usar var siquiera? El desastre: tendríamos acceso a esa i en cualquier lugar del código.

Cuando usar const

Usamos const cuando el valor de la variable no se puede reasignar. Por ejemplo si decimos que const name = "Poppy";, desde ese momento no podremos volver a definirlo, ni volviendo a usar la palabra clave const ni sin ella, de manera que name = "Barb"; daría un error como este:

Uncaught TypeError: Assignment to constant variable.

Esto no significa que sea inmutable. La inmutabilidad es otro concepto interesante pero que no explicaré de momento, quiero mantener esto sencillo. El valor podría mutar en una situación como esta:

const characters = ["Poppy", "Barb", "Branch"]; characters.push("Mr. Dinkles"); console.log(characters) 

¿Cuál es la ventaja de usar const? Principalmente que no sobreescribirás el valor por error llevándote a un escenario impredecible en el que puedes no saber de dónde sale, o dicho de otra forma: el código se vuelve más legible. Esta es la ventaja humana, pero también hay una ventaja técnica: Se mejoran los consumos de memoria, aunque en realidad eso es algo menos relevante y se me escapa muchísimo.

Cuando usar let

Cuando vayas a necesitar modificar el valor de una variable. Para poner un ejemplo volvamos al bucle anterior.

for(let i = 0; i < letters.length; i++){


}

for(const i = 0; i < letters.length; i++){



}

Otro ejemplo habitual sería algo así:

let string = "Esta cadena ? es modificable"; string = string.replace("?", "sí"); console.log(string); const string = "Esta cadena ? es modificable"; string = string.replace("?", "no"); console.log(string); 

Conclusiones

  • Puedes usar const por defecto, y en caso de necesitar modificarlo y cambiar a let.
  • Raramente utilizarás var, y ante la duda no deberías usarlo.
  • Definir una variable sin declararla es algo peligroso.

Photo by Raymond Lee on Unsplash

Comentarios (0)

No hay comentarios. Sé el primero en comentar.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.