2 ‐ Diferencias entre const, let y var - Jabes-Gonzalez/Checkpoint-8 GitHub Wiki

La declaración de variables en JavaScript evolucionó significativamente con la llegada de ES6, introduciendo let y const como alternativas modernas a var. Cada una de estas palabras clave tiene características, usos y comportamientos distintos que impactan el alcance (scope), la mutabilidad, el hoisting y la seguridad del código.

Definición y Sintaxis Básica

image

Scope (Alcance)

  • var: Su scope es global si se declara fuera de una función, o de función si se declara dentro de una función. No respeta el scope de bloque (por ejemplo, dentro de un if o un for).
  • let y const: Tienen scope de bloque, es decir, solo existen dentro de las llaves {} donde se declaran (en un if, for, función, etc.).
if (true) {
  var x = 1;
  let y = 2;
  const z = 3;
}
console.log(x); // 1
console.log(y); // ReferenceError
console.log(z); // ReferenceError

x está disponible fuera del bloque, mientras que y y z no.

Mutabilidad y Reasignación

  • var y let: Permiten reasignar el valor de la variable.
  • const: No permite reasignación. Sin embargo, si el valor es un objeto o array, sus propiedades o elementos sí pueden modificarse (no es inmutable, es de solo lectura para el identificador).
const arr = [1, 2];
arr.push(3); // [1, 2, 3] (válido)
arr = [4, 5]; // TypeError (no permitido)

El identificador arr no puede cambiar de referencia, pero su contenido sí.

Hoisting (Elevación)

  • var: Se eleva al inicio de su scope y se inicializa como undefined. Puedes acceder a la variable antes de su declaración, pero tendrá el valor undefined hasta que se asigne.
  • let y const: También son "hoisted", pero no pueden ser usadas antes de su declaración (Temporal Dead Zone, TDZ). Acceder antes de la declaración genera un error de referencia.
console.log(a); // undefined
var a = 10;

console.log(b); // ReferenceError
let b = 20;

var permite el acceso antes de la declaración, pero let y const no.

Redeclaración

  • var: Permite redeclarar la misma variable en el mismo scope.
  • let y const: No permiten redeclaración en el mismo scope; intentarlo genera un error.

Ejemplos Prácticos y Comparativos

Ejemplo con var
var saludo = "Hola";
var saludo = "Adiós"; // Válido
console.log(saludo); // "Adiós"
Ejemplo con let
let contador = 1;
contador = 2; // Válido
// let contador = 3; // Error: ya declarada en el mismo scope
Ejemplo con const
const PI = 3.1416;
// PI = 3.14; // Error: Assignment to constant variable
Scope de bloque vs. scope de función
const PI = 3.1416;
function testVarLet() {
  if (true) {
    var x = 10;
    let y = 20;
  }
  console.log(x); // 10
  // console.log(y); // ReferenceError
}

x existe fuera del bloque, y no.

Cuándo Usar Cada Uno

  • const: Siempre que el valor no deba cambiar (constantes, referencias fijas).
  • let: Cuando el valor de la variable pueda cambiar (contadores, resultados intermedios).
  • var: Evitar su uso en código moderno, salvo por compatibilidad con código antiguo.

Buenas Prácticas

  • Prefiere const para todas las variables que no serán reasignadas.
  • Usa let solo cuando necesites reasignar el valor.
  • Evita var para prevenir errores de scope y hoisting difíciles de depurar.
  • Usa linters como ESLint para reforzar buenas prácticas y evitar errores comunes.

Resumen Visual

image

El uso correcto de const, let y var mejora la legibilidad, seguridad y mantenibilidad del código JavaScript. Elige la opción adecuada según la mutabilidad, el scope y el contexto de tu aplicación para evitar errores y escribir código más robusto y moderno.

Compatibilidad y Estándares

  • var: Introducido desde el inicio de JavaScript, es compatible con todos los navegadores y versiones.
  • let y const: Introducidos en ES6 (2015). Son estándar en todos los navegadores modernos; su uso es recomendado para nuevos proyectos por claridad, seguridad y predictibilidad.

Mejores Prácticas de la Comunidad

  • Regla de oro: Usa const por defecto. Solo usa let si necesitas reasignar el valor. Evita var salvo por compatibilidad con código antiguo.
  • Claridad: const deja claro que una variable no debe ser reasignada, facilitando la comprensión y el mantenimiento del código.
  • Legibilidad y mantenibilidad: El uso de let y const hace que el código sea más autodescriptivo y fácil de depurar.

Ejemplos Prácticos y Casos Reales

Ámbito de Bloque vs Ámbito de Función
if (true) {
  var globalVar = "var";
  let blockLet = "let";
  const blockConst = "const";
}
console.log(globalVar); // "var"
console.log(blockLet);  // ReferenceError
console.log(blockConst); // ReferenceError

var se escapa del bloque; let y const no.

Variables en el Objeto Global
var ancho = 500;
console.log(window.ancho); // 500

let alto = 300;
console.log(window.alto); // undefined

var añade la variable al objeto global (window); let y const no.

Mutabilidad de Objetos y Arrays con const
const persona = { nombre: "Ana" };
persona.nombre = "Juan"; // Válido

// persona = { nombre: "Luis" }; // Error: Assignment to constant variable

Se puede modificar el contenido del objeto, pero no reasignar la referencia.

Problemas en Bucles y Callbacks
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Imprime 3, 3, 3
}

for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100); // Imprime 0, 1, 2
}

let soluciona el clásico problema de cierre en bucles asíncronos.

Declaración de Funciones con let y const

  • Declarar funciones con const es preferible si no se planea reasignar la función, ya que indica explícitamente inmutabilidad del identificador.
  • Declarar funciones con let solo es útil si se prevé reasignar la función, lo cual es raro en la práctica.
const suma = (a, b) => a + b;
// suma = () => 0; // Error

let resta = (a, b) => a - b;
resta = () => 0; // Válido

Inicialización Obligatoria con const

  • Una variable declarada con const debe ser inicializada en el mismo momento de su declaración.
const PI; // SyntaxError
const PI = 3.1416; // Correcto

Redeclaración y Reasignación

image

Errores Comunes y Trampas

Hoisting y TDZ (Temporal Dead Zone):
  • var es "hoisted" e inicializada como undefined.
  • let y const son "hoisted" pero no inicializadas, por lo que acceder antes de la declaración genera error.
console.log(a); // undefined
var a = 5;

console.log(b); // ReferenceError
let b = 10;
Redeclaración accidental con var:
  • Puede sobrescribir variables sin advertencia, lo que causa errores difíciles de rastrear.

Impacto en el Objeto Global

  • Solo var agrega variables al objeto global (window en navegadores), lo que puede causar conflictos y errores inesperados en aplicaciones grandes.

Resumen de Recomendaciones Modernas

  • Usa const por defecto para todas las variables que no serán reasignadas.
  • Usa let solo cuando se requiera reasignación (ej: contadores en bucles).
  • Evita var para evitar problemas de ámbito, hoisting y conflictos globales.
  • Declara funciones con const para dejar claro que no deben ser reasignadas.
  • Apóyate en linters y herramientas modernas para reforzar estas prácticas.

El uso de let y const es el estándar en JavaScript moderno. Proporcionan mayor seguridad, claridad y facilidad de mantenimiento que var. Elige siempre la opción más restrictiva posible para evitar errores y escribir código más robusto y profesional.