Tutorial JavaScript: Variables

Fundamentos de variables: concepto y propósito, sintaxis, convenciones de nomenclatura

En JavaScript, una variable es un contenedor que almacena datos que pueden ser referenciados y manipulados en el código. Las variables permiten guardar valores dinámicos que pueden cambiar durante la ejecución del programa.

La sintaxis básica para declarar una variable en JavaScript es mediante las palabras clave let, const o var, seguidas del nombre de la variable:

let age;

En este ejemplo, se declara una variable llamada age. Inicialmente, esta variable tiene el valor undefined hasta que se le asigna un valor específico:

age = 25;

Es posible combinar la declaración y asignación en una sola línea:

let age = 25;

Las convenciones de nomenclatura en JavaScript establecen que los nombres de variables deben ser descriptivos y seguir el estilo camelCase. Esto significa que la primera palabra está en minúsculas y cada palabra subsiguiente comienza con una letra mayúscula:

let firstName = "John";
let totalPrice = 99.99;

Los nombres de variables deben comenzar con una letra, guión bajo _ o signo de dólar $, y pueden contener números, pero no pueden empezar con un número. Además, es importante evitar el uso de palabras reservadas de JavaScript como nombres de variables, ya que esto causaría errores en el código.

Es recomendable utilizar nombres significativos que reflejen el propósito de la variable. Por ejemplo, en lugar de usar nombres genéricos como x o y, es preferible usar counter o userEmail para mejorar la legibilidad del código.

Las variables en JavaScript son sensibles a mayúsculas (case-sensitive), lo que significa que myVariable y myvariable se consideran nombres distintos. Por ello, es importante ser consistente en el uso de mayúsculas y minúsculas para evitar errores difíciles de detectar.

La asignación de valores a variables se realiza usando el operador de asignación =. Por ejemplo:

let isActive = true;
let score = 0;
let greeting = "Hello, world!";

En estos ejemplos, las variables isActive, score y greeting se inicializan con valores de diferentes tipos de datos: booleano, numérico y cadena de texto, respectivamente.

Para declarar múltiples variables en una sola línea, se pueden separar por comas:

let x = 10, y = 20, z = 30;

Sin embargo, por claridad y mantenimiento del código, es preferible declarar cada variable en líneas separadas.

Declaración de variables modernas: let y const, diferencias con var

En JavaScript moderno, a partir de ECMAScript 2015 (ES6), se introdujeron dos nuevas formas de declarar variables: let y const. Estas palabras clave proporcionan un mayor control sobre el alcance y el comportamiento de las variables en comparación con var.

La declaración con let permite definir variables cuyo valor puede cambiar durante la ejecución del programa, pero con alcance de bloque. Esto significa que la variable existe únicamente dentro del bloque delimitado por llaves {} en el que se declara. Por ejemplo:

if (true) {
  let count = 10;
  console.log(count); // 10
}
console.log(count); // ReferenceError: count is not defined

En este caso, la variable count está limitada al bloque del if, y no es accesible fuera de él. Esto mejora la gestión de variables y previene errores asociados a accesos indebidos.

Por otro lado, const se utiliza para declarar variables cuyas referencias no pueden ser reasignadas. En otras palabras, una variable declarada con const es una constante, y su valor no puede cambiar después de la inicialización:

const PI = 3.1416;
PI = 3.14; // TypeError: Assignment to constant variable.

Es importante destacar que si una constante es un objeto o un array, sus propiedades o elementos pueden modificarse, ya que lo que es inmutable es la referencia, no el contenido:

const user = { name: "Alice" };
user.name = "Bob"; // Esto es válido
user = { name: "Charlie" }; // TypeError: Assignment to constant variable.

La principal diferencia entre let y var radica en el alcance. Mientras que var tiene alcance de función o global, let tiene alcance de bloque. Esto puede llevar a comportamientos inesperados al usar var dentro de bucles o condiciones:

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

En el primer caso, la variable i es compartida en cada iteración del bucle, debido a su alcance. Con let, cada iteración tiene su propia instancia de j, preservando el valor correcto en los callbacks.

Otro aspecto clave es el hoisting. Las variables declaradas con var son elevadas al inicio de su contexto, aunque su inicialización se mantenga en el lugar original. Esto puede causar que una variable sea accesible antes de su declaración, pero con valor undefined:

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

Con let y const, las variables también son hoisted, pero entran en el Temporal Dead Zone (TDZ) hasta que se ejecuta su declaración. Acceder a ellas antes de su declaración genera un error:

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

Esto refuerza buenas prácticas al evitar el uso de variables antes de su declaración, haciendo el código más predecible y seguro.

Alcance (scope) y ciclo de vida

En JavaScript, el alcance (scope) define la accesibilidad de las variables en diferentes partes del código. Comprender el alcance es fundamental para evitar errores y escribir código limpio y eficiente.

Existen tres tipos principales de alcance en JavaScript: alcance global, alcance de función y alcance de bloque. Cada tipo determina dónde y cómo se puede acceder a una variable.

El alcance global se refiere al espacio donde las variables son accesibles desde cualquier parte del código. Una variable declarada en el nivel superior, fuera de cualquier función o bloque, reside en el ámbito global. Por ejemplo:

let globalVar = "I am global";
function checkGlobal() {
  console.log(globalVar); // I am global
}

En este caso, globalVar es una variable global y está disponible tanto dentro como fuera de la función checkGlobal().

El alcance de función es el contexto dentro de una función. Las variables declaradas con var dentro de una función no son accesibles fuera de ella. Por ejemplo:

function greet() {
  var message = "Hello";
  console.log(message); // Hello
}
console.log(message); // ReferenceError: message is not defined

Aquí, message es una variable con alcance de función, y no se puede acceder a ella fuera de greet().

Con la introducción de let y const, se añadió el alcance de bloque. Un bloque es cualquier código dentro de llaves {}, como en funciones, bucles o condiciones. Las variables declaradas con let o const dentro de un bloque existen solo en ese bloque:

if (true) {
  let blockVar = "Inside block";
  console.log(blockVar); // Inside block
}
console.log(blockVar); // ReferenceError: blockVar is not defined

En este ejemplo, blockVar tiene alcance de bloque y no está disponible fuera del if.

El ciclo de vida de una variable comprende su creación, utilización y destrucción. Para variables de alcance global, permanecen en memoria durante toda la ejecución del programa. Esto puede impactar en el consumo de memoria si se abusa de variables globales.

Las variables con alcance de función se crean al invocar la función y se destruyen al finalizar su ejecución. Esto permite que los recursos sean liberados y evita fugas de memoria.

En el caso de variables con alcance de bloque, su ciclo de vida comienza al entrar en el bloque y termina al salir de él. Esto es especialmente útil en bucles o condiciones, donde se necesita que las variables sean temporales.

Es importante tener en cuenta el sombreado (shadowing) de variables. Si se declara una variable con el mismo nombre en un alcance interno, esta ocultará a la variable del alcance externo:

let value = 10;
function calculate() {
  let value = 20;
  console.log(value); // 20
}
calculate();
console.log(value); // 10

Aquí, la variable value dentro de calculate() oculta a la variable global value, pero solo dentro del alcance de la función.

Comprender el alcance y el ciclo de vida de las variables es esencial para evitar errores comunes como el acceso a variables no definidas o la contaminación del espacio global. Además, ayuda a escribir código más eficiente y mantenible.

Hoisting

El hoisting es una de las peculiaridades más interesantes de JavaScript. Para explicarlo de manera sencilla:

JavaScript parece "elevar" (hoist) las declaraciones de variables y funciones al principio de su ámbito antes de ejecutar el código.

Imagina que JavaScript lee tu código en dos pasadas:

1. Primera pasada: anota todas las declaraciones de variables y funciones
2. Segunda pasada: ejecuta el código línea por línea

Hoisting con variables

Veamos un ejemplo sencillo:

console.log(mascota); // undefined (¡no da error!)
var mascota = "gato";

Esto funciona porque JavaScript reordena internamente tu código así:

// Lo que JavaScript realmente hace:
var mascota;         // Declara la variable (primera pasada)
console.log(mascota); // undefined
mascota = "gato";    // Asigna el valor (segunda pasada)

Es como si JavaScript "elevara" la declaración (no la asignación) al principio.

Diferencias importantes con let y const

Consejo práctico: Para código moderno y más seguro, es recomendable usar let y const en lugar de var.

Cuando usamos let o const, el hoisting funciona diferente:

console.log(nombre); // ❌ Error: Cannot access 'nombre' before initialization
let nombre = "Ana";

Con let y const, las variables son reconocidas desde el principio (hoisting), pero no se pueden usar hasta su declaración. Es como si estuvieran en una "zona prohibida" (llamada técnicamente "Temporal Dead Zone" o TDZ).

Esta es una característica de seguridad que evita errores comunes: JavaScript nos está diciendo "sé que esta variable existirá, pero no puedes usarla todavía".

Hoisting con funciones

Las funciones declaradas con la sintaxis tradicional son completamente "elevadas" con su definición:

// Esto funciona perfectamente:
saludar(); // "¡Hola mundo!"

function saludar() {
  console.log("¡Hola mundo!");
}

Esto es muy útil porque nos permite organizar nuestro código de manera más legible, colocando las funciones principales arriba y las funciones auxiliares abajo.

¿Por qué es importante entender el hoisting?

Entender el hoisting te ayudará a:

• Evitar errores comunes al usar variables antes de declararlas
• Comprender mejor cómo JavaScript procesa tu código
• Escribir código más predecible y con menos sorpresas

Buenas prácticas de programación

Para evitar confusiones relacionadas con el hoisting:

• Declara todas tus variables al principio de su ámbito
• Usa let y const en lugar de var
• Declara las funciones antes de llamarlas, aunque el hoisting lo permita
• Escribe código como si el hoisting no existiera - será más claro y menos propenso a errores

Conceptos mas avanzados

Si te sientes cómodo con los conceptos básicos, aquí hay algunos casos más interesantes:

Las funciones expresadas (asignadas a variables) se comportan diferente a las funciones declaradas:

saludo(); // ❌ Error: saludo is not a function

var saludo = function() {
  console.log("Hola");
};

La variable saludo es elevada (hoisted), pero en este punto solo contiene undefined, no la función.

Usando let o const para funciones expresadas:

bienvenida(); // ❌ Error: Cannot access 'bienvenida' before initialization

const bienvenida = function() {
  console.log("Bienvenido");
};

Recuerda: El hoisting es un concepto que entenderás mejor con la práctica. Por ahora, concéntrate en las buenas prácticas mencionadas y todo irá bien.