La palabra clave var en JavaScript

En JavaScript, la forma en que creas y usas las variables afecta directamente el comportamiento del código. La palabra clave var se ha utilizado durante décadas para declarar variables. Desde que ES6 introdujo let y const, var rara vez es la elección correcta en código nuevo; sin embargo, seguirás encontrándola en tutoriales, preguntas de entrevista y proyectos heredados. Este capítulo explica exactamente cómo funciona var, por qué sus reglas de ámbito y hoisting sorprenden a los desarrolladores, y cuándo (si acaso) deberías usarla hoy.

Esta página cubre: cómo se determina el ámbito de var, el hoisting y la trampa de undefined, las variables globales accidentales, la redeclaración, el famoso bug del cierre en bucle, y las alternativas más seguras let/const.

Introducción a la declaración de variables con var

La palabra clave var declara una variable, opcionalmente inicializándola con un valor. Las variables declaradas con var tienen ámbito de función o ámbito global (nunca ámbito de bloque), y están sujetas al hoisting, que puede producir un comportamiento que sorprende a los desarrolladores que vienen de otros lenguajes. Para los conceptos básicos sobre declaración de variables, consulta Variables de JavaScript.

Ámbito de función

Una variable declarada con var dentro de una función es local a esa función y es accesible desde cualquier punto dentro de ella. De forma crucial, var no respeta los límites de los bloques: incluso cuando se declara dentro de un bloque como una sentencia if o un bucle for, la variable "se escapa" y es visible en toda la función que la contiene.

Esta es la diferencia más importante respecto a let y const: con ellas, x solo existiría dentro del bloque if, y el console.log lanzaría un ReferenceError. Consulta Ámbito de variables para ver el panorama completo del ámbito de bloque.

Hoisting

El hoisting es el comportamiento de JavaScript que trata las declaraciones como si se movieran al inicio de su ámbito contenedor. Con var, solo se eleva la declaración, no la asignación; por lo tanto, el nombre existe desde el inicio de la función pero contiene undefined hasta que la ejecución llega a la línea que lo asigna.

Leer y antes de su línea var devuelve undefined en lugar de un ReferenceError. Esto es lo que hace que el hoisting de var sea sutil: el código parece que "funciona", pero un error tipográfico o una asignación mal ubicada puede silenciosamente leer undefined.

let y const también se elevan, pero viven en la zona muerta temporal hasta que su declaración se ejecuta; por eso, acceder a ellas de forma anticipada lanza una excepción en lugar de retornar silenciosamente undefined, que suele ser lo que realmente deseas:

Variables globales y la palabra clave var

Cuando var se usa fuera de cualquier función, se convierte en una variable global accesible desde cualquier lugar. En los navegadores, esto también la adjunta como propiedad del objeto global (window), algo que let y const no hacen. El riesgo: dos scripts que ambos declaren var config se sobreescribirán silenciosamente entre sí.

var globalVar = "I am global";
// In a browser: window.globalVar === "I am global"  → true

let blockGlobal = "scoped";
// window.blockGlobal → undefined (let/const do not become window properties)

Olvidar declarar una variable (asignar a un nombre no declarado en modo no estricto) también crea una variable global accidental — otra razón para usar "use strict" y preferir let/const.

Limitaciones de var y alternativas modernas

Aunque var ha sido una parte fundamental de JavaScript, presenta limitaciones que llevaron a la introducción de let y const en ES6 (ECMAScript 2015), que ofrecen declaraciones de variables con ámbito de bloque.

Confusión por hoisting y ámbito

El comportamiento de hoisting y la naturaleza de var con ámbito de función pueden generar confusión, especialmente en construcciones de bucles o bloques condicionales, donde se esperan intuitivamente variables con ámbito de bloque.

Redeclaración con var y peculiaridades del cierre en bucle

• Redeclaración: A diferencia de let y const, var permite redeclarar la misma variable en el mismo ámbito sin producir un error; por lo tanto, una declaración duplicada puede sobrescribir silenciosamente una anterior.
• Cierre en bucle: Una variable de bucle con var vive en un ámbito de función compartido, por lo que cada cierre creado en el bucle ve la misma variable. Cuando los callbacks se ejecutan, el bucle ya ha terminado y la variable contiene su valor final.

El bug del cierre en bucle es el problema clásico de var. Los tres callbacks comparten el mismo i:

Cambiar var por let lo soluciona: let crea un nuevo enlace para cada iteración, de modo que cada cierre captura su propio valor:

Antes de let, la solución era usar una IIFE que capturara el valor en cada iteración:

Introducción de let y const

Para mitigar los problemas asociados con var, let y const ofrecen a los desarrolladores variables con ámbito de bloque, reduciendo el riesgo de errores por hoisting y haciendo el código más predecible y fácil de depurar.

Buenas prácticas para usar var en JavaScript

A pesar de sus limitaciones, var sigue siendo parte del lenguaje JavaScript y puede encontrarse, especialmente en código heredado. Seguir las buenas prácticas garantiza que su uso no afecte negativamente la funcionalidad ni el mantenimiento del código.

1. Limitar su uso en código moderno: Prefiere let y const para las declaraciones de variables, para aprovechar el ámbito de bloque y reducir posibles problemas de hoisting.
2. Comprender el ámbito: Cuando trabajes con var, ten en cuenta su naturaleza de ámbito de función y planifica la estructura de tu código para evitar variables globales no intencionadas.
3. Inicialización en el momento de la declaración: Inicializa las variables var en el punto de declaración para evitar valores undefined debidos al hoisting.

Conclusión

La palabra clave var ha sido durante mucho tiempo un pilar de JavaScript. Comprender su comportamiento de ámbito y hoisting es clave para escribir código fiable. A medida que el lenguaje evolucionó, se introdujeron let y const para abordar las limitaciones de var, haciendo que el JavaScript moderno sea más predecible. Sin embargo, entender var sigue siendo esencial para mantener bases de código heredadas. Siguiendo las buenas prácticas y prefiriendo las declaraciones con ámbito de bloque, los desarrolladores pueden escribir un JavaScript más limpio y fácil de mantener.

Práctica