JS: Variables

Las variables son espacios de memoria que tienen un nombre asignado. En esos espacios se almacena información —como puede ser un número, una cadena de texto (string) o un valor lógico (verdadero o falso)— que puede ser utilizada y modificada durante la ejecución de nuestro programa.

Podemos imaginar una variable como una caja con una etiqueta. La caja representa el espacio de memoria, la etiqueta es el nombre de la variable y el contenido de la caja es el valor almacenado. La ventaja de las variables es que nos permiten guardar datos para consultarlos o modificarlos posteriormente.

Por tanto, a diferencia de las variables en matemáticas, que representan un valor fijo o una incógnita dentro de una ecuación, las de programación funcionan como contenedores dinámicos. Así, mientras que una incógnita corresponde a un único valor, una variable puede actualizarse cuantas veces sea necesario. De hecho, el mismo nombre ya lo dice: son valores cambiantes.

En programación, las variables se usan con mucha frecuencia. Por ejemplo, nos permiten almacenar datos personales del usuario, crear contadores numéricos, guardar el resultado de un cálculo, controlar el estado de una situación (verdadero o falso), almacenar configuraciones o trabajar con datos temporales.

La versión ECMAScript 6 (ES2015) introdujo las palabras clave let, para declarar variables, y const, para declarar constantes.

Anteriormente, las variables se declaraban con la palabra reservada var, pero actualmente su uso se considera obsoleto. Aunque todavía es frecuente encontrar mucho código JavaScript que la utiliza, se desaconseja debido a problemas de ámbito y a su comportamiento poco predecible.

Declarar variables

Declarar una variable es la acción de crear un espacio de memoria con un nombre para almacenar y modificar datos en el código. En JavaScript se hace usando la palabra clave let seguida del nombre o identificador que queramos usar. Con esta acción, el programa reservará y organizará la memoria necesaria. De forma opcional, podemos hacer una asignación inicial de valor.

Esta es la sintaxis básica:

let nombre;

Cuando se declara una variable sin valor, de forma automática, JavaScript le asigna el valor undefined, que permite representar la ausencia de un valor válido. Más adelante podremos asignarle un valor; cuando la inicialicemos.

En el ejemplo anterior, su valor inicial es undefined.

También es posible declarar muchas variables en una misma sentencia. Puede ser práctico declararlas al inicio de una función, dejándolas preparadas y asumiendo que sus valores se asignarán o determinarán más tarde.

Por ejemplo:

let nombre, apellidos, edad;

Hay que tener en cuenta que en JavaScript, una variable solo se puede declarar una vez con el mismo nombre dentro del mismo ámbito (scope). Sin embargo, se podría volver a declarar en diferentes ámbitos. Este código devolverá error:

let x;
let x; // Error

Inicializar variables

De poco serviría declarar variables si nunca van a contener un valor. Siguiendo el símil de la caja etiquetada: una caja vacía solo ocupa espacio. Con la memoria sucede lo mismo. Inicializar una variable significa asignarle un valor, lo cual se hace mediante el símbolo igual (=), utilizado para la asignación.

Si la variable ya fue declarada, asignarle un valor es tan sencillo como escribir su identificador seguido del operador de asignación (=). A la derecha de este operador se indica el valor que contendrá la variable.

// Declaración
let edad;

// Inicialización
edad = 25;

También es posible declarar la variable y, al mismo tiempo, asignarle un valor (inicializarla) en una sola sentencia. Por ejemplo:

let edad = 25;
let init = 0;
let posX = 200;

O hacerlo todo en la misma línea:

let edad = 25, init = 0, posX = 200;

Modificar variables

Después de haber inicializado una variable, se puede modificar su valor siempre que sea necesario. Se trata simplemente de crear una nueva asignación de valor. Esto significa que el valor inicial se sobreescribe.

En el siguiente ejemplo, declaramos la variable edad, le asignamos el valor 25 y finalmente hacemos una segunda asignación con el valor 30. El valor almacenado será el último que se le haya asignado, en orden descendente.

let edad;
edad = 25;
edad = 30;

Ámbito (scope) de ‘let’

La instrucción let declara una variable con ámbito (scope) de bloque. Por tanto, las variables definidas con esta instrucción solo son accesibles dentro de un bloque definido por las llaves { y }, como puede ser el cuerpo de una función, un bucle o las sentencias de una estructura condicional.

Siempre se tendrá en cuenta el bloque más cercano. Por ejemplo, si se declara una variable dentro de un condicional que forma parte de una función, el bloque que restringe el ámbito de la variable será el del condicional.

function ejemplo() {
  if (true) {
    let n = 500;
    console.log(n); // 500
  }
  console.log(n); // Error
}

ejemplo();

En este ejemplo, se intenta imprimir el valor de la variable n fuera del bloque en el que fue declarada. El intérprete de JavaScript no puede acceder a su valor, por lo que el código devuelve un error.

Aunque let tiene ámbito de bloque, ese bloque depende del lugar en el que se declare la variable. A diferencia de lo que ocurría con var, las variables declaradas con let no se añaden como propiedades del objeto global (window en navegadores o globalThis), lo que evita errores inesperados.

Si una variable se declara dentro de unas llaves ({}), su ámbito se limita solo a ese bloque. Lo mismo ocurre dentro de estructuras como if, for o while. En cambio, si la declaración se encuentra dentro de una función, el ámbito se extiende a toda la función, incluyendo los bloques que haya en su interior.

Por otro lado, si la variable se declara en la raíz de un archivo cargado como módulo —usando <script type="module"> o mediante import—, el ámbito se limita al propio módulo y no se comparte con otros archivos.

Nombrar variables

Las reglas para nombrar variables son las mismas que deben aplicarse para la mayoría de identificadores de JavaScript. Los nombres pueden formarse con letras, números, el símbolo del dólar ($) y el guión bajo (_). Pero no pueden comenzar con un número ni contener espacios ni guiones medios (-). Tampoco se admiten otros símbolos especiales aparte de los mencionados.

Por convención, cuando un nombre está compuesto por varias palabras, se recomienda usar el estilo camelCase, donde la primera palabra se escribe en minúsculas y las siguientes inician con mayúscula. Además, debe evitarse el uso de cualquiera de las palabras reservadas del lenguaje.

El hoisting con ‘let’

En JavaScript, las variables se “preparan”, por decirlo de algún modo, antes de que el código se ejecute. A este comportamiento se le llama hoisting (elevación). Lo que sucede es que se elevan al principio de su contexto —ámbito de bloque— para quedar reservadas. Sin embargo, no quedan inicializadas hasta que el flujo del programa alcanza la línea de su declaración.

En cambio, con var, las variables no solo se elevan sino que además se inicializan con undefined. Esto hace posible usarlas antes de la declaración, lo que es una mala práctica. Ya no se recomienda el uso de var.

En este proceso, desde que se elevan al inicio de su contexto hasta su declaración, las variables let permanecen residen en una zona conocida como Temporal Dead Zone (TDZ) o «zona temporal muerta», que va desde el inicio del bloque en el que están declaradas hasta la línea exacta de la declaración.

Resumen comparativo: