Variables JavaScript

Una variable es un contenedor con nombre que almacena un valor en memoria.

Parece simple, pero cómo y cuándo declarar una variable en JavaScript tiene más matices de lo que suele enseñarse.

Este fundamental cubre cómo funcionan las variables, las diferencias entre let, const y var, cómo evitar errores comunes y por qué el contexto importa.

Qué es una variable

Una variable es una referencia a un valor, no el valor en sí.

Cuando haces:

let price = 100;

Estás creando un identificador (price) que apunta internamente a un valor (100) almacenado en memoria. Ese valor puede cambiar si usas let, o quedar fijo si usas const.

let, const y var: diferencias clave

let

Declara una variable que puede ser reasignada, pero no redeclarada en el mismo bloque.

let total = 50;
total = 75; // valid
let total = 90; // ❌ SyntaxError

Tiene scope de bloque, lo que significa que solo existe dentro del bloque {} donde se declara.

const

Declara una variable cuyo valor no puede ser reasignado. Es constante en referencia, no necesariamente en contenido.

const tax = 0.21;
tax = 0.10; // ❌ TypeError

Pero si es un objeto, puede mutarse internamente:

const user = { name: 'Alice' };
user.name = 'Bob'; // ✅ allowed

const no congela el valor, solo impide la reasignación del identificador.

var (no recomendado)

var fue la única forma de declarar variables antes de ES6. Tiene varios comportamientos que la hacen poco recomendable hoy en día.

Scope de función, no de bloque

if (true) {
  var message = 'Visible';
}
console.log(message); // 'Visible', no ReferenceError

Redeclarable sin error

var count = 1;
var count = 2; // ✅ no error

Hoisting sin inicialización

console.log(x); // undefined
var x = 5;

Contaminación del contexto global

Cuando usas var en el nivel superior de un script (fuera de funciones), la variable se convierte en una propiedad del objeto global (window en navegador, global en Node.js):

var globalVariable = 42;
console.log(window.globalVariable); // 42

Esto puede causar colisiones con otras librerías, comportamientos inesperados, y errores difíciles de rastrear.

Ignora el modo estricto si no lo usas explícitamente:

El modo estricto ('use strict') desactiva varios errores silenciosos y previene malas prácticas, pero var se sigue comportando de forma insegura si no se activa el modo:

'use strict';

undeclaredVar = 10; // ❌ ReferenceError

Sin 'use strict', esta línea crearía una variable global sin avisarte, y eso es un agujero de seguridad y mantenibilidad.

Evita var salvo que estés manteniendo código legacy o por alguna otra razón de peso.

Qué significa ámbito o "scope"

El scope es el contexto donde una variable existe y es accesible.

if (true) {
  let discount = 10;
}
console.log(discount); // ❌ ReferenceError

discount no existe fuera del bloque if. Ese es el comportamiento correcto con let y const.

Con var, la variable existiría fuera del bloque, lo que puede generar bugs sutiles.

Qué es el alzado o “hoisting”

El hoisting es el comportamiento de JavaScript de mover las declaraciones al inicio del contexto.

Afecta a var y a las funciones declaradas, pero no a let ni const.

console.log(a); // undefined
var a = 10;

Con let o const, esto lanza un error porque existe la zona muerta temporal (TDZ):

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

TDZ significa que la variable ya está "reservada" pero aún no puede usarse hasta que se haya declarado realmente.

Reasignación vs. mutación

Muchos confunden esto:

const items = [];
items.push('item'); // ✅ allowed
items = [];         // ❌ TypeError

const impide reasignar el identificador, pero no impide modificar el contenido si es un objeto o array (que es, en realidad, un objeto).

Si no quieres que un objeto pueda mutarse, usa Object.freeze() (aunque solo aplica en superficie):

const config = Object.freeze({ debug: true });
config.debug = false; // sin efecto

Nombres de variables

JavaScript permite letras, dígitos, _ y $ en los nombres de variables, pero hay convenciones importantes para mantener código legible y profesional.

Tipos de notación

• camelCase: usado para variables y funciones (ej. userAge)
• PascalCase: usado para clases y constructores (ej. UserProfile)
• snake_case: poco común en JavaScript moderno, más típico en Python
• UPPER_SNAKE_CASE: usado para constantes que no cambian nunca (ej. MAX_USERS)

Recomendación FrontendLeap:

• Variables y funciones → camelCase
• Clases y componentes → PascalCase
• Constantes globales → UPPER_SNAKE_CASE

Evita:

let DATA = 42;          // unnecessary screaming
let some_data = 'ok';   // inconsistent style

Usa:

let userName = 'Alice';
const API_URL = 'https://api.example.com';
class UserProfile { ... }

Errores comunes

Declarar sin inicializar y usar antes

let total;
console.log(total); // undefined

Esto es válido, pero puede ser fuente de bugs si olvidas asignar valor después.

Recomendación: declara y asigna juntas (en la misma sentencia) si puedes prever el valor.

Usar const pensando que congela objetos

const settings = { theme: 'dark' };
settings.theme = 'light'; // ✅ allowed

const protege el enlace (la referencia), no el contenido. Para congelar realmente, necesitas una estrategia un poco más elaborada (lo veremos más adelante).

Usar var sin entender sus efectos

var score = 10;

function test() {
  if (true) {
    var score = 20;
  }
  console.log(score); // 20
}

Este tipo de colisión silenciosa puede romper lógica sin que te des cuenta.

No uses var. No estás en 2007.

Cuándo usar let y cuándo const

Por convención moderna:

• Usa const por defecto.
• Usa let solo si sabes que vas a reasignar el valor.
• No uses var en código moderno.

Esto hace que el código sea más predecible, más fácil de depurar y más robusto para equipos grandes o proyectos a largo plazo.

Anexo: ¿Qué es ES6? ¿Qué es ECMAScript?

JavaScript no evoluciona al azar. Tiene un estándar oficial: ECMAScript.

• ECMAScript (o ES) es la especificación técnica del lenguaje.
• Fue creada por la organización ECMA International.
• JavaScript es una implementación de esa especificación, igual que lo son otros lenguajes como JScript o ActionScript (hoy en desuso).

¿Qué es ES6 o ES2015?

• ES6 (también llamado ES2015) es la sexta edición del estándar ECMAScript.
• Fue una actualización enorme publicada en 2015.
• Introdujo muchas de las características modernas que hoy usamos a diario:
  • let y const.
  • Arrow functions () => {}.
  • Clases (class) aunque es syntactic sugar.
  • Módulos (import / export).
  • Promesas.
  • Template literals (`${value}\`).
  • Destructuración.
  • Parámetros por defecto.
  • y mucho más…

Desde entonces, cada año sale una nueva versión del estándar (ES2016, ES2017, etc.).

¿Por qué importa esto?

• Si estás usando let y const, estás usando ES6.
• Si usas var y funciones antiguas, estás usando sintaxis previa a ES6.
• Hoy en día, toda la industria asume que trabajas con ES6 en adelante.

Por eso evito enseñar var y otras prácticas antiguas. No son incorrectas, pero ya no son relevantes para la mayoría de proyectos profesionales.

Resumen:

ECMAScript es el estándar.

ES6 (o ES2015) es una versión clave que marcó el comienzo de la era moderna de JavaScript.

Enlaces útiles

• let - MDN
• const - MDN
• var - MDN
• JavaScript Hoisting Explained
• Temporal Dead Zone (TDZ) - 2ality
• Naming Conventions - clean-code-javascript