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

En JavaScript, el concepto de hoisting se refiere al comportamiento por el cual las declaraciones de variables y funciones son elevadas al comienzo de su contexto de ejecución antes de que el código sea ejecutado. Esto implica que es posible acceder a ciertas variables y funciones antes de su declaración explícita en el código fuente.

Con la declaración **var**, las variables son hoisted al inicio de su ámbito, pero su inicialización no lo es. Esto significa que la variable existe desde el comienzo del bloque, pero no tiene un valor asignado hasta que se alcanza la línea de inicialización. Por ejemplo:

console.log(score); // undefined
var score = 100;

En este ejemplo, la variable score está declarada y se ha elevado al inicio del contexto, pero su valor es undefined hasta que se asigna 100. Intentar usar la variable antes de su asignación puede conducir a resultados inesperados.

Con **let** y **const**, las variables también experimentan hoisting, pero se comportan de manera diferente debido a la Temporal Dead Zone (TDZ). La TDZ es el lapso entre el inicio del contexto y la declaración de la variable, durante el cual no es posible acceder a ella. Intentar utilizar una variable en la TDZ genera un ReferenceError:

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

Este comportamiento con let y const previene el acceso a variables antes de su declaración, fomentando prácticas de codificación más seguras y predecibles.

Las funciones declaradas con la sintaxis clásica de function son completamente hoisted, incluyendo tanto su declaración como su definición. Esto permite llamar a una función antes de que aparezca en el código:

greet(); // "Hello!"

function greet() {
  console.log("Hello!");
}

En este caso, la función greet está disponible en todo su ámbito debido al hoisting, lo que permite su invocación previa a la declaración.

Por otro lado, las funciones expresadas asignadas a variables, como las funciones anónimas o funciones flecha, no son totalmente hoisted. Si se declaran con var, la variable que contiene la función es elevada pero inicializada como undefined, lo que provoca un error al intentar invocarla:

sayHi(); // TypeError: sayHi is not a function
var sayHi = function() {
  console.log("Hi!");
};

En este ejemplo, aunque sayHi está hoisted, no contiene la función hasta su asignación posterior, resultando en un error al intentar ejecutarla antes de tiempo.

Cuando se utilizan **let** o **const** para declarar funciones expresadas, la variable no está disponible hasta su declaración debido a la TDZ, y cualquier intento de acceder a ella antes produce un ReferenceError:

welcome(); // ReferenceError: Cannot access 'welcome' before initialization
const welcome = () => {
  console.log("Welcome!");
};

Este comportamiento enfatiza la importancia de declarar funciones antes de usarlas cuando se emplean expresiones de función con let o const.

El hoisting también puede afectar el comportamiento en bucles y callbacks. Por ejemplo, al usar var en un bucle for, la variable índice es compartida en todo el ámbito de la función, lo que puede generar resultados inesperados:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Imprime: 3, 3, 3

Aquí, debido al hoisting y al alcance de var, la variable i toma el valor final después del bucle en cada iteración del setTimeout. Al cambiar la declaración a let, se crea una nueva instancia de i en cada iteración, solucionando el problema:

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

Comprender el funcionamiento del hoisting es fundamental para evitar errores y comportamientos inesperados en el código. Al ser conscientes de cómo JavaScript maneja la elevación de declaraciones, es posible escribir código más claro y fiable, asegurando que variables y funciones estén declaradas y disponibles en el momento adecuado.