ProgramaciónDesarrollador Frontend

Explique la diferencia entre la declaración de variables usando let, const y var en TypeScript. ¿Cómo influye su elección en el ámbito de visibilidad, la posibilidad de redeclaración, la mutabilidad del valor y la protección contra errores? Proporcione ejemplos de escenarios típicos de uso de cada uno de los métodos de declaración.

Supere entrevistas con el asistente de IA Hintsage

Respuesta.

En TypeScript (al igual que en el JavaScript moderno), las variables se pueden declarar utilizando let, const y var, y entre ellas hay diferencias importantes:

  • let — Ámbito de visibilidad limitado por bloque, la variable se puede redefinir (asignar un nuevo valor), pero no se puede declarar una segunda vez en el mismo ámbito.
  • const — También tiene ámbito de visibilidad limitado por bloque, el valor debe ser asignado de inmediato, no se puede redefinir (¡pero las propiedades internas de un objeto declarado como const son modificables!).
  • var — Ámbito de visibilidad funcional, posibilidad de elevación (hoisting), la variable se puede redeclarar y modificar.

Ejemplo:

if (true) { let a = 10; const b = 20; var c = 30; } console.log(c); // 30 — visible fuera del bloque! console.log(a); // Error: a no está definido console.log(b); // Error: b no está definido

Escenarios típicos:

  • const — para valores que no deben cambiar (constantes, configuraciones, referencias a funciones).
  • let — para valores que cambian durante la ejecución (contadores, variables en bucles).
  • var — no se recomienda su uso, solo para soportar código más antiguo.

Pregunta capciosa.

¿Puede const hacer que un objeto sea completamente inmutable? Explique, proporcione un ejemplo.

Respuesta: No, const solo impide el cambio de la referencia misma, pero no protege contra cambios en las propiedades del objeto!

const obj = { x: 1 }; obj.x = 2; // Esto es permitido! obj = { x: 3 }; // Error: asignación de nueva referencia

Para la inmutabilidad completa se utiliza Object.freeze:

const frozen = Object.freeze({ x: 1 }); frozen.x = 2; // Error en modo estricto, ¡pero no siempre el compilador advierte!

Ejemplos de errores reales debido al desconocimiento de los matices del tema.


Historia

Durante la migración de un gran proyecto frontend a TypeScript, los desarrolladores reemplazaron masivamente var por let, sin tener en cuenta que el ámbito de visibilidad ahora es por bloque. Esto llevó a que los contadores en algunos bucles for no fueran accesibles fuera del ciclo y surgieron errores inesperados en la lógica: el código dejó de funcionar al intentar acceder al contador del ciclo después de que este terminó.


Historia

Un desarrollador declaró una constante a través de const para almacenar un objeto de configuración, creyendo que las propiedades estaban protegidas contra cambios. Más tarde, en tiempo de ejecución, otro lugar del programa cambió una propiedad: esto causó errores difíciles de rastrear en el procesamiento de datos, porque el código externo cambió "sorpresivamente" la configuración global para todos los usuarios.


Historia

En el proyecto se usaron simultáneamente let, const y var sin una política clara. Un componente redeclaró una variable var dentro de una función, mientras que otro lugar esperaba que la variable estuviera declarada con let y por lo tanto no sería visible fuera del bloque. Resultado: sobreposición de variables, fallos en la lógica interna y un complicado depurado de problemas con el ciclo de vida de las variables no evidentes.