Variables y tipos

Todo programa trabaja con datos: el nombre de un usuario, el precio de un producto, si alguien inició sesión o no. Para guardar y manipular esos datos usamos variables. En esta lección aprenderás a declararlas con let, const y var, qué tipos de datos existen en JavaScript y cómo evitar los errores más comunes al convertir entre ellos.

Concepto

Una variable es como una caja con etiqueta: la etiqueta es el nombre y dentro guardas un valor. Cuando necesitas el valor, lo buscas por su etiqueta.

let nombre = 'Ana';
//  ↑        ↑
// etiqueta  contenido

En JavaScript hay tres palabras para crear variables:

Palabra	¿Se puede reasignar?	Alcance (scope)	¿Usarla hoy?
`const`	No	Bloque `{ }`	✅ Por defecto
`let`	Sí	Bloque `{ }`	✅ Cuando el valor cambia
`var`	Sí	Función	❌ Código antiguo

Ejemplo: `let`, `const` y `var`

// const: el valor NO se puede reasignar
const IVA = 0.16;
const nombreTienda = 'La Esquina';
// IVA = 0.20; // ❌ TypeError: Assignment to constant variable.

// let: el valor SÍ puede cambiar
let total = 0;
total = total + 250;  // agregamos una playera
total = total + 180;  // agregamos una gorra
console.log(total);   // 430

// Puedes declarar sin valor inicial (sólo con let)
let mensaje;
console.log(mensaje); // undefined
mensaje = 'Gracias por tu compra';

// var: la forma antigua. Funciona, pero tiene comportamientos raros
var contador = 1;

Reglas para nombrar variables

Pueden contener letras, números, _ y $, pero no pueden empezar con número.
Distinguen mayúsculas: precio y Precio son variables distintas.
No uses palabras reservadas (let, if, function, class...).
Convención en JS: camelCase → precioConDescuento, usuarioActivo.
Constantes "de configuración" a veces se escriben en MAYÚSCULAS: IVA, API_URL.

// ✅ Nombres claros
const precioUnitario = 99.9;
let cantidadEnCarrito = 3;
const esMayorDeEdad = true;

// ❌ Nombres confusos
let x = 99.9;
let dato2 = 3;
let flag = true;

Buena práctica

Usa const por defecto. Sólo cambia a let cuando sepas que la variable debe reasignarse (contadores, acumuladores, valores que el usuario modifica). Así tu código es más predecible y evitas cambios accidentales. Olvídate de var.

const no significa "inmutable"

const impide reasignar la variable, pero si guarda un objeto o array, su contenido sí puede cambiar:

const carrito = [];
carrito.push('Playera'); // ✅ permitido: modificamos el contenido
// carrito = [];         // ❌ error: reasignar no

Lo verás a detalle en Arrays.

Hoisting y la TDZ (lo básico)

Hoisting ("elevación") significa que JavaScript "conoce" las declaraciones antes de ejecutar el código, como si las subiera al inicio. Pero se comporta distinto según la palabra:

// Con var: la declaración sube, pero el valor no
console.log(a); // undefined (no da error, pero es confuso)
var a = 5;

// Con let y const: existen, pero no puedes tocarlas antes de declararlas
console.log(b); // ❌ ReferenceError: Cannot access 'b' before initialization
let b = 10;

El espacio entre el inicio del bloque y la línea donde declaras una variable con let o const se llama TDZ (Temporal Dead Zone, zona muerta temporal). Si intentas usar la variable ahí, obtienes un error. Y eso es bueno: te avisa de un error en lugar de darte un undefined silencioso.

La regla práctica: declara tus variables antes de usarlas y nunca tendrás problemas. Profundizaremos en Scope y closures.

Tipos de datos primitivos

JavaScript tiene 7 tipos primitivos (valores simples) y un tipo complejo, object (objetos, arrays, funciones).

// 1. string: texto, entre comillas simples, dobles o invertidas
const producto = 'Café de Chiapas';
const descripcion = "Tostado medio";
const etiqueta = `Producto: ${producto}`; // template literal

// 2. number: enteros y decimales (no hay separación)
const precio = 189.5;
const stock = 40;
const temperatura = -3;

// 3. boolean: verdadero o falso
const disponible = true;
const enOferta = false;

// 4. undefined: variable declarada sin valor
let cupon;
console.log(cupon); // undefined

// 5. null: "vacío a propósito"
let usuarioLogueado = null; // aún no hay nadie

// 6. bigint: enteros enormes (terminan en n)
const numeroGigante = 9007199254740993n;

// 7. symbol: identificadores únicos (uso avanzado)
const id = Symbol('id');

En el día a día usarás sobre todo string, number, boolean, undefined y null.

El operador `typeof`

Te dice de qué tipo es un valor. Muy útil para depurar:

console.log(typeof 'Hola');      // "string"
console.log(typeof 42);          // "number"
console.log(typeof 3.14);        // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof 10n);         // "bigint"
console.log(typeof Symbol());    // "symbol"
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"  (los arrays son objetos)
console.log(typeof function(){}); // "function"
console.log(typeof null);        // "object"  😵 bug histórico

Error común

typeof null devuelve "object". Es un error de diseño de 1995 que nunca se corrigió para no romper sitios existentes. Para saber si algo es null, compáralo directamente: valor === null. Para saber si es un array, usa Array.isArray(valor).

`null` vs `undefined`

Ambos significan "no hay valor", pero con intenciones diferentes:

	`undefined`	`null`
Significa	"Todavía no tiene valor"	"Vacío a propósito"
Quién lo pone	JavaScript, automáticamente	Tú, el programador
Ejemplo	Variable sin asignar, propiedad que no existe	Usuario que cerró sesión

let telefono;                // undefined: nadie lo ha asignado
const cliente = { nombre: 'Ana' };
console.log(cliente.email);  // undefined: la propiedad no existe

let carritoActivo = { id: 1 };
carritoActivo = null;        // null: lo vaciamos intencionalmente

Regla práctica: deja que JavaScript use undefined, y usa tú null cuando quieras indicar "vacío".

Conversión de tipos

Muchas veces recibes datos en un tipo y los necesitas en otro. Por ejemplo, todo lo que viene de un <input> o de prompt es texto.

Conversión explícita (tú la pides)

// A número
Number('42');        // 42
Number('3.5');       // 3.5
Number('');          // 0
Number('hola');      // NaN
Number(true);        // 1
parseInt('42px');    // 42   (lee hasta donde puede)
parseFloat('3.99€'); // 3.99

// A texto
String(123);         // "123"
(99.5).toFixed(2);   // "99.50" (útil para precios)

// A booleano
Boolean(1);          // true
Boolean(0);          // false
Boolean('');         // false
Boolean('texto');    // true

Conversión implícita (JavaScript la hace solo)

Aquí es donde aparecen las sorpresas:

console.log('5' + 2);   // "52"  → el + con texto CONCATENA
console.log('5' - 2);   // 3     → el - convierte a número
console.log('5' * '2'); // 10
console.log(true + 1);  // 2
console.log('10' / 2);  // 5

Error común

Sumar valores de un formulario sin convertirlos:

const cantidad = document.querySelector('#cantidad').value; // "2"
const precio = 150;
console.log(cantidad * precio); // 300 (funciona por casualidad)
console.log(cantidad + precio); // "2150" ❌

// ✅ Convierte siempre al recibir el dato
const cantidadNum = Number(cantidad);
console.log(cantidadNum + precio); // 152

NaN: "Not a Number"

NaN aparece cuando una operación matemática no tiene sentido. Lo curioso: es de tipo number.

const resultado = Number('abc');
console.log(resultado);          // NaN
console.log(typeof resultado);   // "number" 🤯
console.log(NaN === NaN);        // false (¡NaN no es igual ni a sí mismo!)

// ✅ La forma correcta de detectarlo
console.log(Number.isNaN(resultado)); // true

// Caso real: validar la edad que escribió el usuario
const edadTexto = '25 años';
const edad = Number(edadTexto);
if (Number.isNaN(edad)) {
  console.log('Por favor escribe sólo números');
}

Casos de uso reales

Carrito de compras: const IVA = 0.16; y let total = 0; que va aumentando.
Formularios: convertir input.value con Number() antes de calcular y validar con Number.isNaN().
Sesión de usuario: let usuario = null; hasta que inicia sesión.
Precios: total.toFixed(2) para mostrar siempre dos decimales.
Configuración: const API_URL = 'https://api.mitienda.com'; que nunca cambia.

Ejercicios

Declara las variables adecuadas (const o let) para: el nombre de tu tienda, el número de visitas del día (que irá aumentando) y si la tienda está abierta. Imprime el tipo de cada una con typeof.
¿Qué imprime cada línea? Piénsalo antes de ejecutarlo: '3' + 4, '3' * 4, Number(''), Number('12abc'), typeof NaN.
Escribe un programa que tome el texto '1499.9' (precio de un producto), le sume el 16 % de IVA y muestre el total con dos decimales.

Ver solución

const nombreTienda = 'La Esquina';
let visitasHoy = 0;
const estaAbierta = true;

visitasHoy = visitasHoy + 1;

console.log(typeof nombreTienda); // "string"
console.log(typeof visitasHoy);   // "number"
console.log(typeof estaAbierta);  // "boolean"

'3' + 4;          // "34"  (concatena)
'3' * 4;          // 12    (convierte a número)
Number('');       // 0
Number('12abc');  // NaN   (parseInt sí daría 12)
typeof NaN;       // "number"

const precioTexto = '1499.9';
const IVA = 0.16;

const precio = Number(precioTexto);
const total = precio * (1 + IVA);

console.log(`Total: $${total.toFixed(2)}`); // Total: $1739.88

Resumen

Usa const por defecto, let si el valor cambia y evita var.
Nombra variables en camelCase y con nombres descriptivos.
let y const tienen TDZ: no las uses antes de declararlas.
Los primitivos son: string, number, boolean, undefined, null, bigint y symbol.
typeof te dice el tipo (ojo: typeof null es "object").
undefined = sin valor todavía; null = vacío a propósito.
Convierte datos explícitamente con Number(), String(), Boolean(); cuidado con + y textos.
Detecta NaN con Number.isNaN().

Siguiente: Operadores

Variables y tipos ​

Concepto ​

Ejemplo: let, const y var ​

Reglas para nombrar variables ​

Hoisting y la TDZ (lo básico) ​

Tipos de datos primitivos ​

El operador typeof ​

null vs undefined ​

Conversión de tipos ​

Conversión explícita (tú la pides) ​

Conversión implícita (JavaScript la hace solo) ​

NaN: "Not a Number" ​

Casos de uso reales ​

Ejercicios ​

Resumen ​