Variables

¿Qué es una variable?

Una variable es un identificador que permite almacenar un valor para poder utilizarlo posteriormente durante la ejecución de un programa.

A diferencia de lenguajes de tipado estático como Java, las variables de JavaScript no están asociadas a un tipo de dato fijo. Una misma variable puede almacenar valores de distintos tipos a lo largo de la ejecución del programa.

let value = 25;
console.log(typeof value); // number

value = "Alice";
console.log(typeof value); // string

value = true;
console.log(typeof value); // boolean

Esta característica se conoce como tipado dinámico y proporciona una gran flexibilidad al lenguaje.

INFO

En proyectos de cierta envergadura es habitual utilizar TypeScript, un lenguaje desarrollado por Microsoft que amplía JavaScript añadiendo tipado estático.

Mientras que en JavaScript una variable puede almacenar valores de distintos tipos durante la ejecución,

let value = 25;
value = "Alice";
value = true;

en TypeScript es posible indicar el tipo de la variable para detectar errores antes de ejecutar el programa.

let value: number = 25;
// value = "Alice"; // Error
// value = true; // Error

TypeScript es un superconjunto de JavaScript, por lo que todo programa JavaScript válido también es un programa TypeScript válido.

Declaración de variables

Las variables se declaran mediante una palabra reservada (let o const) seguida de un identificador. Opcionalmente, pueden inicializarse asignándoles un valor.

let city;
let country = "Spain";

Si una variable se declara sin inicializar, su valor es undefined.

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

BUENAS PRÁCTICAS

JavaScript permite declarar varias variables en una misma sentencia

let firstName = "Alice", lastName = "Smith", age = 25;

Pero se recomienda declarar una variable por línea para mejorar la legibilidad del código.

let firstName = "Alice";
let lastName = "Smith";
let age = 25;

BUENAS PRÁCTICAS

Hasta la llegada de ECMAScript 2015 (ES6), las variables se declaraban mediante la palabra reservada var.

Aunque var sigue siendo compatible con JavaScript por motivos de retrocompatibilidad, en el desarrollo moderno se recomienda utilizar let y const, ya que proporcionan un comportamiento más predecible y seguro.

Nombre de variables

El nombre de una variable debe seguir las reglas de los identificadores de JavaScript:

• Debe comenzar por una letra, un guion bajo (_) o un signo de dólar ($).
• A partir del segundo carácter también puede contener dígitos (0-9).
• No puede contener espacios ni caracteres especiales, como -, +, . o #.
• JavaScript es case-sensitive (age, Age y AGE son identificadores diferentes).
• No puede coincidir con una palabra reservada del lenguaje (ej.: let, const, if, for, while, class o return)

// Nombres de variables correctos:
let firstName = "Alice";
let userAge = 25;
let totalPrice = 19.95;

// Nombres de variables incorrectos:
let 1name = "Alice"; // Comienza por un dígito
let first name = "Alice"; // Contiene un espacio
let user-age = 25; // Contiene un carácter no permitido
let class = "DAW"; // Utiliza una palabra reservada

BUENAS PRÁCTICAS

• Utiliza nombres descriptivos.
• Emplea la notación camelCase.
• Evita abreviaturas innecesarias.
• Procura que los identificadores comiencen por una letra.
• Aunque JavaScript permite utilizar _ y $ al inicio, estos prefijos suelen reservarse para convenciones específicas o determinadas bibliotecas.

// Nombres permitidos pero no recomendados
let a = "Alice"; // Poco descriptivo
let x = 25; // No indica qué representa el valor
let tmp = 19.95; // Abreviatura poco clara
let _name = "Alice"; // El prefijo _ suele reservarse para convenciones específicas
let $price = 19.95; // El prefijo $ suele utilizarse en algunas bibliotecas

INFO

Los prefijos _ y $ forman parte de los identificadores válidos de JavaScript, pero suelen utilizarse siguiendo determinadas convenciones:

• El prefijo _ se ha utilizado tradicionalmente para indicar que una variable o propiedad es de uso interno o "privada" por convención, aunque esto no impide su acceso. Desde ECMAScript 2022 existen los campos privados (#), por lo que esta convención es hoy menos necesaria, aunque sigue siendo habitual.
• El prefijo _ también es utilizado por bibliotecas como Underscore.js y Lodash como alias de su objeto principal.

_.map([1, 2, 3], (x) => x * 2);

• El prefijo $ es frecuente en algunas bibliotecas y frameworks. El ejemplo más conocido es jQuery, que utiliza $ como alias de su función principal.

$("#menu").hide();

En el desarrollo habitual, se recomienda que los nombres de las variables comiencen por una letra, salvo que exista un motivo justificado para utilizar estos prefijos.

Tipos de variables (var, let y const)

JavaScript permite declarar variables mediante var, let y const.

• let permite declarar variables cuyo valor puede modificarse.
• const declara constantes, es decir, variables cuyo identificador no puede reasignarse.
• var es la forma tradicional de declarar variables y se mantiene por compatibilidad con código antiguo. En el desarrollo moderno se recomienda utilizar let y const.

let age = 25;
console.log(age); // 25

age = 26;
console.log(age); // 26

const country = "Spain";
console.log(country); // Spain
country = "France"; // TypeError
console.log(country); // No se ejecuta

Hoisting

Antes de ejecutar un programa, el motor de JavaScript analiza el código y registra las declaraciones de variables y funciones. Este comportamiento se conoce como hoisting (elevación).

Hoisting con var

Las variables declaradas con var pueden utilizarse antes de su declaración. En ese caso, su valor será undefined.

console.log(age); // undefined
var age = 25;
console.log(age); // 25

De forma simplificada, JavaScript actúa como si el código anterior fuera el siguiente:

var age;
console.log(age); // undefined
age = 25;
console.log(age); // 25

Hoisting con let y const

Las variables declaradas con let también participan en el proceso de hoisting, pero no pueden utilizarse antes de su declaración.

console.log(age); // ReferenceError
let age = 25;

El comportamiento de const es idéntico al de let.

Ámbito de las variables

El ámbito (scope) determina desde qué partes del programa puede accederse a una variable.

Las variables declaradas con let y const tienen ámbito de bloque, mientras que las declaradas con var tienen ámbito de función.

Ejemplo

{
  let x = 10;
  const y = 20;
  var z = 30;

  console.log(x); // 10
  console.log(y); // 20
  console.log(z); // 30
}

// console.log(x); // ReferenceError
// console.log(y); // ReferenceError
console.log(z); // 30

Ámbito de las variables (Scope)

El ámbito (scope) de una variable es la parte del programa desde la que puede accederse a ella.

JavaScript dispone de distintos tipos de ámbito. Los más importantes son:

• Ámbito global.
• Ámbito de bloque.
• Ámbito de función.

Ámbito global

Una variable declarada fuera de cualquier bloque o función pertenece al ámbito global, por lo que puede utilizarse desde cualquier parte del programa.

const country = "Spain";
console.log(country); // Spain
{
  console.log(country); // Spain
}

Ámbito de bloque

Un bloque es cualquier conjunto de instrucciones delimitado por llaves ({}).

Las variables declaradas con let y const solo existen dentro del bloque en el que se declaran.

{
  const age = 25;
  console.log(age); // 25
}
console.log(age); // ReferenceError

Ámbito de función

Las variables declaradas dentro de una función solo pueden utilizarse desde esa función.

function greet() {
  const message = "Hello";
  console.log(message);
}
greet(); // Hello
console.log(message); // ReferenceError

Particularidad de var

A diferencia de let y const, las variables declaradas con var no tienen ámbito de bloque, sino de función.

{
  var city = "Valencia";
}
console.log(city); // Valencia

Por este motivo, en el desarrollo moderno se recomienda utilizar let y const.

BUENAS PRÁCTICAS

Declara las variables en el ámbito más reducido posible.

Resumen de buenas prácticas

• Declara una única variable por línea para mejorar la legibilidad del código.
• Utiliza nombres descriptivos que reflejen el propósito de la variable.
• Emplea la notación camelCase para nombrar las variables.
• Evita abreviaturas innecesarias y nombres poco significativos como a, x o tmp.
• Procura que los identificadores comiencen por una letra. Aunque _ y $ son válidos, suelen reservarse para convenciones específicas o determinadas bibliotecas.
• Declara las variables en el ámbito más reducido posible.
• Utiliza const siempre que la variable no vaya a reasignarse.
• Utiliza let cuando el valor de la variable deba cambiar durante la ejecución.
• Evita var en código moderno, ya que let y const ofrecen un comportamiento más seguro y predecible.
• Declara las variables antes de utilizarlas, aunque JavaScript permita acceder a las declaradas con var mediante hoisting.