Variables y Tipos de Datos en JavaScript

Al finalizar esta lección serás capaz de:

• Declarar variables usando let, const y entender por qué ya no usamos var
• Identificar y trabajar con los 7 tipos de datos primitivos de JavaScript
• Convertir datos entre diferentes tipos (type coercion y casting)
• Aplicar buenas prácticas de naming para tus variables
• Evitar los errores más comunes relacionados con variables y tipos

Imaginá que tenés un escritorio con cajones etiquetados. Cada cajón tiene una etiqueta (nombre) y contiene algo adentro (valor). Eso es exactamente lo que es una variable en programación: un espacio de memoria con un nombre que almacena un valor.

En JavaScript moderno tenemos dos formas principales de declarar variables: let y const.

let: variables que pueden cambiar

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

edad = 26; // ✅ Podemos cambiar el valor
console.log(edad); // 26

let nombre; // Podemos declarar sin asignar valor
console.log(nombre); // undefined
nombre = "Carlos"; // Y asignar después
console.log(nombre); // "Carlos"

Usá let cuando sepas que el valor va a cambiar durante la ejecución del programa: contadores, acumuladores, valores que se actualizan con input del usuario, etc.

const: variables que NO cambian

const PI = 3.14159;
console.log(PI); // 3.14159

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

const NOMBRE_EMPRESA = "Cursalo";
const URL_API = "https://api.ejemplo.com";
const DESCUENTO_MAXIMO = 0.5;

Usá const para valores que no deben cambiar: constantes matemáticas, URLs de configuración, valores de referencia. La regla general es: usá const por defecto y solo cambiá a let cuando realmente necesites reasignar el valor.

¿Y var? — La historia que debés conocer

Antes de 2015 (ES6), var era la única forma de declarar variables. Todavía funciona, pero tiene comportamientos problemáticos:

// Problema 1: var tiene "hoisting" confuso
console.log(mensaje); // undefined (no da error, ¡pero no tiene valor!)
var mensaje = "Hola";

// Con let, esto da error (más predecible)
// console.log(mensaje2); // ReferenceError: Cannot access before initialization
// let mensaje2 = "Hola";

// Problema 2: var no respeta el scope de bloque
if (true) {
  var filtrada = "Soy visible fuera del if";
  let bloqueada = "Solo existo dentro del if";
}
console.log(filtrada);  // ✅ "Soy visible fuera del if" (¡peligroso!)
// console.log(bloqueada); // ❌ ReferenceError

// Problema 3: var permite re-declaración
var usuario = "Ana";
var usuario = "Luis"; // ✅ No da error (puede causar bugs silenciosos)

let cuenta = 1;
// let cuenta = 2; // ❌ SyntaxError: Identifier already declared

Regla de oro: Nunca uses var en código nuevo. Usá const por defecto y let cuando necesites reasignar.

Convenciones de naming (nombres de variables)

El nombre que le das a tus variables importa mucho. Un buen nombre hace que el código se lea como un texto en español o inglés:

// ❌ Nombres malos
let x = 25;
let d = "2026-01-15";
let t = true;
let arr = [1, 2, 3];

// ✅ Nombres buenos
let edadUsuario = 25;
let fechaRegistro = "2026-01-15";
let estaActivo = true;
let calificaciones = [1, 2, 3];

Reglas y convenciones:

1. camelCase: Primera palabra en minúscula, siguientes con mayúscula inicial → nombreCompleto, precioTotal, esMayorDeEdad
2. UPPER_SNAKE_CASE para constantes: → MAX_INTENTOS, URL_BASE, PI
3. Nombres descriptivos: precioConDescuento en vez de pd
4. Booleanos con prefijo: esValido, tienePermiso, estaLogueado, puedeEditar
5. Sin caracteres especiales (excepto _ y $): No uses ñ, tildes ni espacios en nombres de variables
6. No empezar con número: 2nombre es inválido, nombre2 es válido
7. Case sensitive: nombre, Nombre y NOMBRE son tres variables diferentes

JavaScript tiene 7 tipos de datos primitivos (valores simples e inmutables) y 1 tipo complejo (objetos). Veamos cada primitivo:

String (texto)

Los strings representan texto. Podés crearlos con comillas simples, dobles o backticks:

let saludo1 = 'Hola mundo';     // Comillas simples
let saludo2 = "Hola mundo";     // Comillas dobles
let saludo3 = `Hola mundo`;     // Backticks (template literal)

// Los backticks permiten interpolación y múltiples líneas
let nombre = "María";
let mensaje = `Hola ${nombre}, ¿cómo estás?
Este mensaje tiene
múltiples líneas.`;
console.log(mensaje);

// Propiedades y métodos útiles de strings
let texto = "JavaScript es genial";
console.log(texto.length);           // 21 (cantidad de caracteres)
console.log(texto.toUpperCase());    // "JAVASCRIPT ES GENIAL"
console.log(texto.toLowerCase());    // "javascript es genial"
console.log(texto.includes("genial")); // true
console.log(texto.indexOf("es"));    // 11 (posición donde empieza)
console.log(texto.slice(0, 10));     // "JavaScript" (extraer porción)
console.log(texto.replace("genial", "increíble")); // "JavaScript es increíble"
console.log(texto.split(" "));       // ["JavaScript", "es", "genial"]
console.log(texto.trim());           // Elimina espacios al inicio y final

Number (números)

JavaScript usa un solo tipo para todos los números (enteros y decimales):

let entero = 42;
let decimal = 3.14;
let negativo = -10;
let grande = 1_000_000; // Separador visual (es lo mismo que 1000000)

// Operaciones matemáticas
console.log(10 + 3);   // 13 (suma)
console.log(10 - 3);   // 7 (resta)
console.log(10 * 3);   // 30 (multiplicación)
console.log(10 / 3);   // 3.3333... (división)
console.log(10 % 3);   // 1 (módulo - resto de la división)
console.log(2 ** 10);  // 1024 (potencia)

// El objeto Math
console.log(Math.round(4.7));   // 5 (redondear)
console.log(Math.floor(4.9));   // 4 (redondear hacia abajo)
console.log(Math.ceil(4.1));    // 5 (redondear hacia arriba)
console.log(Math.random());     // Número aleatorio entre 0 y 1
console.log(Math.max(1, 5, 3)); // 5
console.log(Math.min(1, 5, 3)); // 1
console.log(Math.abs(-15));     // 15 (valor absoluto)
console.log(Math.sqrt(144));    // 12 (raíz cuadrada)

// Valores especiales de Number
console.log(Infinity);      // Infinito
console.log(-Infinity);     // Infinito negativo
console.log(NaN);           // "Not a Number" (resultado de operación inválida)
console.log(0.1 + 0.2);    // 0.30000000000000004 (¡cuidado con decimales!)

BigInt (números muy grandes)

// Number tiene un límite: Number.MAX_SAFE_INTEGER = 9,007,199,254,740,991
let grande = 9007199254740991n; // La 'n' al final indica BigInt
let otroGrande = BigInt("9007199254740992");
console.log(grande + 1n); // 9007199254740992n

Boolean (verdadero/falso)

let esMayorDeEdad = true;
let tieneDeuda = false;

// Los booleanos son el resultado de comparaciones
console.log(10 > 5);     // true
console.log(10 < 5);     // false
console.log(10 === 10);  // true
console.log("hola" === "Hola"); // false (case sensitive)

undefined y null

// undefined: variable declarada sin valor asignado
let sinValor;
console.log(sinValor);   // undefined
console.log(typeof sinValor); // "undefined"

// null: ausencia intencional de valor
let valorVacio = null;
console.log(valorVacio); // null
console.log(typeof valorVacio); // "object" (bug histórico de JavaScript)

// La diferencia conceptual:
// undefined = "No sé qué valor tiene" (JavaScript lo asigna)
// null = "Intencionalmente no tiene valor" (vos lo asignás)

Symbol (identificadores únicos)

let id1 = Symbol("id");
let id2 = Symbol("id");
console.log(id1 === id2); // false (cada Symbol es único)
// Se usan principalmente para propiedades privadas en objetos (avanzado)

El operador typeof

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

JavaScript es un lenguaje de tipado dinámico, lo que significa que las variables pueden cambiar de tipo y JavaScript a veces convierte tipos automáticamente.

Coerción implícita (JavaScript convierte automáticamente)

// String + Number = String (concatenación)
console.log("5" + 3);     // "53" (3 se convirtió a string)
console.log("Edad: " + 25); // "Edad: 25"

// Otros operadores convierten a Number
console.log("5" - 3);     // 2 ("5" se convirtió a number)
console.log("5" * 2);     // 10
console.log("10" / 2);    // 5

// Comparación con == (coerción)
console.log(5 == "5");    // true (convierte y compara)
console.log(0 == false);  // true
console.log("" == false); // true
console.log(null == undefined); // true

// Comparación con === (sin coerción - RECOMENDADO)
console.log(5 === "5");   // false (diferente tipo)
console.log(0 === false); // false
console.log("" === false); // false

Conversión explícita (vos controlás)

// A String
let num = 42;
console.log(String(num));     // "42"
console.log(num.toString());  // "42"
console.log(`${num}`);        // "42" (con template literal)

// A Number
let texto = "123";
console.log(Number(texto));    // 123
console.log(parseInt(texto));  // 123 (entero)
console.log(parseFloat("3.14")); // 3.14 (decimal)
console.log(+"42");           // 42 (operador unario +)

// A Boolean
console.log(Boolean(1));       // true
console.log(Boolean(0));       // false
console.log(Boolean(""));      // false (string vacío)
console.log(Boolean("hola")); // true (string con contenido)
console.log(Boolean(null));    // false
console.log(Boolean(undefined)); // false

Valores "falsy" y "truthy"

En JavaScript, ciertos valores se evalúan como false cuando se usan en un contexto booleano. Son los falsy values:

// Todos los valores falsy (solo hay 8)
Boolean(false);     // false
Boolean(0);         // false
Boolean(-0);        // false
Boolean(0n);        // false (BigInt zero)
Boolean("");        // false (string vacío)
Boolean(null);      // false
Boolean(undefined); // false
Boolean(NaN);       // false

// Todo lo demás es truthy
Boolean("0");       // true (string con contenido)
Boolean(" ");       // true (string con espacio)
Boolean([]);        // true (array vacío)
Boolean({});        // true (objeto vacío)
Boolean("false");   // true (string con la palabra "false")

1. Usar == en vez de ===: Siempre usá comparación estricta (===) para evitar bugs por coerción automática.

2. Confundir null y undefined: undefined es el valor por defecto de JavaScript; null es una asignación intencional.

3. No entender que const con objetos permite mutar: const obj = {}; obj.nombre = "Ana" es válido porque no estás reasignando obj, estás modificando su contenido.

4. Concatenar strings con números sin querer: "Precio: " + 10 + 5 da "Precio: 105" no "Precio: 15". Usá paréntesis: "Precio: " + (10 + 5).

5. Confiar en la precisión de decimales: 0.1 + 0.2 !== 0.3 en JavaScript. Para dinero, trabajá con centavos (enteros).

1. Usá const por defecto y let solo cuando necesites reasignar. Nunca uses var.
2. JavaScript tiene 7 tipos primitivos: string, number, bigint, boolean, undefined, null y symbol.
3. typeof te permite verificar el tipo de un dato (cuidado: typeof null devuelve "object").
4. La coerción implícita puede causar bugs sutiles — preferí siempre === sobre ==.
5. Conocé los 8 valores falsy para evitar sorpresas en condiciones.
6. Template literals (backticks) son la forma moderna de trabajar con strings.
7. Para dinero y cálculos precisos, trabajá con números enteros (centavos).

1. ¿Cuál es la diferencia principal entre let y const?
a) let es más rápido
b) const no permite reasignación del valor
c) let solo funciona con números
d) No hay diferencia

2. ¿Qué devuelve typeof null?
a) "null"
b) "undefined"
c) "object"
d) "boolean"

3. ¿Cuál es el resultado de "5" + 3?
a) 8
b) "53"
c) Error
d) NaN

4. ¿Cuál de estos NO es un valor falsy?
a) 0
b) ""
c) null
d) "0"

5. ¿Cuál es la forma correcta de declarar una constante?
a) var PI = 3.14;
b) let PI = 3.14;
c) const PI = 3.14;
d) constant PI = 3.14;

Respuestas: 1-b, 2-c, 3-b, 4-d, 5-c

Ejercicio práctico

Misión: Calculadora de propinas

Creá un programa que:

1. Tenga el precio de una comida almacenado en una variable const
2. Calcule propinas del 10%, 15% y 20%
3. Muestre el total con cada opción de propina
4. Use template literals para formatear la salida
5. Incluya una variable booleana esGrupoGrande que, si es true, agregue un 5% extra de servicio

// Tu código aquí
const precioComida = 850; // en pesos
// ... completá el resto