var, let y const. Como usarlos apropiadamente

Aunque la mayoría de los desarrolladores de JavaScript han utilizado todas estas palabras clave, es bueno saber cómo funcionan. En este artículo, discutiremos var, let y const en detalle con respecto a su alcance, uso y elevación. Al final del artículo, también proporcionaré una hoja de referencia.

Var

Siempre que se declara una variable usando una palabra clave var, las variables son:

• Función de ámbito o ámbito global
• Reasignable y re-declarable
• No sujeto a la zona muerta temporal

ámbito de función o ámbito global

Cuando una variable se declara dentro de una función usando var, la variable tiene como alcance la función. Pero, cuando la variable se declara fuera de una función o bloque, entonces la variable global tiene un alcance global. Además, también crea una propiedad global en el objeto de ventana (en el caso de los navegadores), con el mismo nombre.

var lenguaje = "JavaScript";
function foo() {
  var lenguaje = "Python";
  framework = "React";
  console.log(lenguaje);
}
foo(); // "Python"
console.log(lenguaje); // "JavaScript"
console.log(window.lenguaje); // "JavaScript"
console.log(window.framework); // "React"

También debe tenerse en cuenta que las variables declaradas sin ninguna declaración se convierten en una variable global por defecto. Si desea evitar este comportamiento, puede usar el modo estricto en JavaScript agregando “use strict”; al principio del archivo.

Reasignable y re-declarable

Las variables declaradas con var se pueden reasignar y volver a declarar más adelante en el código.

var lenguaje = "JavaScript";
var lenguaje = "Python"; // Re-declaracion
console.log(lenguaje); // "Python"
language = "Java"; // reasignacion
console.log(lenguaje); // "Java"

Elevación

La elevación en JavaScript es un mecanismo mediante el cual las variables y declaraciones de funciones se mueven a la parte superior de su alcance antes de la ejecución del código. Las variables var se elevan a la parte superior de su alcance y se inicializan con un valor de undefined.

let

Siempre que se declara una variable usando una palabra clave let, las variables son:

• Ámbito de bloque
• Reasignable pero no re-declarable
• Sometido a la zona muerta temporal

Ámbito de bloque

Cuando se declara dentro de un bloque, la variable tiene como alcance ese bloque. Del mismo modo, cuando se declara dentro de la función, la variable tiene como alcance esa función. Pero, a diferencia de var, no crea una propiedad global en el objeto de ventana (en el caso de javascript para navegadores).

let lenguaje = "JavaScript";
{
  let lenguaje = "React"; // Block scope
  console.log(language); // "React"
}
function foo() {
  let lenguaje = "Python";
  console.log(lenguaje);
}
foo(); // "Python"
console.log(lenguaje); // "JavaScript"
console.log(window.lenguaje); // undefined

Reasignable pero no re-declarable

Cualquier variable declarada con let no se puede volver a declarar. Si lo hace, obtendrá un mensaje de error desagradable. Pero puede reasignar la variable.

let lenguaje = "JavaScript";
lenguaje = "Python";
console.log(lenguaje); // "Python"

Elevación

Las variables declaradas con let están sujetas a elevación, pero la zona muerta temporal (TDZ por sus siglas en inglés temporary dead zone) se activa. TDZ básicamente impide el acceso a las declaraciones let antes de su inicialización. Cuando se accede a una variable sin declaración, se lanza ReferenceError.

console.log(lenguaje); // TDZ
let lenguaje = "JavaScript"; // No hoisting
// ReferenceError: lenguaje is not defined

Const

Ámbito de bloque

const es muy similar a let, ya que las variables declaradas con const también tienen un alcance de bloque.

const lenguaje = "JavaScript";
{
  const lenguaje = "React"; // Block scope
  console.log(lenguaje); // "React"
}
function foo() {
  const lenguaje = "Python";
  console.log(lenguaje); 
}
foo(); // "Python"
console.log(lenguaje); // "JavaScript"
console.log(window.lenguaje); // undefined

Ni reasignables ni declarables

Cualquier variable declarada con const no se puede volver a declarar y tampoco se puede reasignar. Si lo hace, recibirá mensajes de error en ambas ocasiones.

const lenguaje = "JavaScript";
lenguaje = "Python"; //TypeError: Assignment to constant variable.
console.log(lenguaje);

Elevación

El comportamiento de elevación de las variables const es similar al de las variables let.

console.log(lenguaje); // TDZ
const lenguaje = "JavaScript"; // No hoisting
// ReferenceError: lenguaje is not defined

Hoja de referencia

Conclusión

Si bien este fue un artículo relativamente corto, espero que haya obtenido una buena comprensión de cómo funcionan todas estas declaraciones y cómo usarlas adecuadamente en su código. ¡Gracias por leer!