Variables y tipos de datos

⏱ 40 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Declarar variables con const y let y nombrarlas bien.
Reconocer los tipos de datos y consultar su tipo con typeof.
Manipular texto con plantillas y métodos de string.
Operar con números y convertir tipos sin sorpresas.

1.Variables: cajas con nombre

Una variable es un espacio con nombre donde guardas un valor para usarlo después. Es como una caja con una etiqueta: puedes mirar qué hay dentro, cambiarlo y usarlo cuantas veces quieras.

Crear y usar variables

let edad = 25;                    // la creas con let
const pais = "México";            // la creas con const
console.log(edad, pais);          // 25 "México"

edad = 26;                        // let permite cambiar el valor
console.log("Ahora tengo", edad);

Palabra	Se puede reasignar	Cuándo usarla
`const`	No	Por defecto. Para todo lo que no cambia
`let`	Sí	Cuando el valor tiene que cambiar (un contador, un total)
`var`	Sí	No la uses. Es la forma antigua y tiene comportamientos confusos

▶ Variables en acción

Código (edítalo y pulsa Ejecutar)

<script>
  const producto = "Cuaderno";
  let cantidad = 2;
  console.log(producto, cantidad);

  cantidad = cantidad + 1;
  console.log("Después de añadir uno:", cantidad);

  // producto = "Lápiz";   // ← descomenta: TypeError, const no se puede reasignar
</script>

Página (resultado)

Consola

💡 Consejo · Empieza siempre con const

Usa const y cámbialo a let solo cuando el compilador te lo exija. Así sabes de un vistazo qué valores nunca cambian, y tu código tiene menos sorpresas.

2.Cómo nombrar variables

Pueden contener letras, números, _ y $, pero no pueden empezar con número.
Distinguen mayúsculas y minúsculas: edad y Edad son variables distintas.
No pueden ser palabras reservadas (let, if, class…).
Se usa la convención camelCase: precioTotal, nombreDelCliente.
Los nombres deben decir qué contienen: total y no t; esMayor y no flag.
Las constantes «de verdad» (valores fijos del programa) suelen ir en MAYÚSCULAS: const IVA = 0.16;.

Bien	Mal	Por qué
`precioTotal`	`x`	No dice nada
`nombreCliente`	`nombre cliente`	No admite espacios
`pagina2`	`2pagina`	No puede empezar con número
`esMayorDeEdad`	`mayor?`	No admite signos como `?`
`let total`	`let let`	Palabra reservada

3.Los tipos de datos

Cada valor tiene un tipo. El tipo decide qué puedes hacer con él: sumar números, juntar textos, decidir con verdadero o falso…

Tipo	Qué guarda	Ejemplos
`string`	Texto	`"hola"`, `'adiós'`, ` plantilla `
`number`	Números (enteros y decimales)	`42`, `3.14`, `-7`, `NaN`, `Infinity`
`boolean`	Verdadero o falso	`true`, `false`
`undefined`	Variable creada sin valor	`let x;`
`null`	«Nada» a propósito	`let resultado = null;`
`bigint`	Enteros enormes	`9007199254740993n`
`symbol`	Identificadores únicos	(uso avanzado)
`object`	Colecciones de datos (arrays, objetos…)	`[1, 2, 3]`, `{ nombre: "Ana" }`

Para saber el tipo de un valor existe el operador typeof:

▶ typeof

Código (edítalo y pulsa Ejecutar)

<script>
  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"  (un error histórico del lenguaje)
  console.log(typeof [1, 2, 3]);     // "object"  (los arrays son objetos)

  let sinValor;
  console.log(sinValor);             // undefined
</script>

Página (resultado)

Consola

📌 Nota · JavaScript es de tipado dinámico

No declaras el tipo de una variable: JavaScript lo deduce del valor, y una misma variable puede cambiar de tipo con el tiempo. Es flexible, pero obliga a ser cuidadoso: muchos errores vienen de tipos que no son los que creías.

4.Trabajar con texto

Strings: lo esencial

const nombre = "Ana";
const apellido = 'Pérez';

console.log(nombre + " " + apellido);        // unir con +
console.log(`Hola, ${nombre} ${apellido}`);  // plantilla de texto (¡mejor!)
console.log(nombre.length);                  // 3  (cantidad de caracteres)
console.log(nombre[0]);                      // "A" (primer carácter)

Las plantillas de texto (comillas invertidas ` `) permiten **insertar valores** con ${…}` y escribir varias líneas. Son la forma más cómoda de componer mensajes.

Método	Qué hace	Ejemplo → resultado
`length`	Cantidad de caracteres	`"hola".length` → `4`
`toUpperCase()` / `toLowerCase()`	Mayúsculas / minúsculas	`"hola".toUpperCase()` → `"HOLA"`
`trim()`	Quita espacios de los extremos	`" hola ".trim()` → `"hola"`
`includes(texto)`	¿Contiene…?	`"manzana".includes("zan")` → `true`
`startsWith()` / `endsWith()`	¿Empieza / termina con…?	`"hola".startsWith("ho")` → `true`
`indexOf(texto)`	Posición de la primera aparición (o -1)	`"hola".indexOf("l")` → `2`
`slice(inicio, fin)`	Extrae un fragmento	`"abcdef".slice(1, 4)` → `"bcd"`
`replace(a, b)`	Reemplaza la primera aparición	`"a-b-c".replace("-", "+")` → `"a+b-c"`
`replaceAll(a, b)`	Reemplaza todas	`"a-b-c".replaceAll("-", "+")` → `"a+b+c"`
`split(sep)`	Divide en un array	`"a,b,c".split(",")` → `["a","b","c"]`
`repeat(n)`	Repite el texto	`"ab".repeat(3)` → `"ababab"`
`padStart(n, c)`	Rellena por la izquierda	`"7".padStart(2, "0")` → `"07"`

▶ Prueba los métodos de texto

Código (edítalo y pulsa Ejecutar)

<script>
  const frase = "  JavaScript es divertido  ";
  console.log(frase.trim());
  console.log(frase.trim().toUpperCase());
  console.log(frase.includes("divertido"));
  console.log(frase.trim().split(" "));
  console.log(frase.trim().slice(0, 10));

  const usuario = "Ana", puntos = 1250;
  console.log(`${usuario} tiene ${puntos} puntos`);
</script>

Página (resultado)

Consola

⚠️ Importante · Los strings no se modifican

Los métodos de texto devuelven un texto nuevo, no cambian el original. frase.toUpperCase(); por sí solo no hace nada visible: debes guardar o usar el resultado (const grande = frase.toUpperCase();).

5.Trabajar con números

Operación	Ejemplo	Resultado
Suma, resta	`5 + 3`, `5 - 3`	`8`, `2`
Multiplicación, división	`5 * 3`, `10 / 4`	`15`, `2.5`
Resto (módulo)	`10 % 3`	`1`
Potencia	`2 ** 3`	`8`
Incrementar	`x++`, `x += 5`	suma 1 / suma 5 a `x`

Función	Qué hace	Ejemplo
`Math.round(n)`	Redondea	`Math.round(2.6)` → `3`
`Math.floor(n)` / `Math.ceil(n)`	Hacia abajo / arriba	`Math.floor(2.9)` → `2`
`Math.max(…)` / `Math.min(…)`	El mayor / menor	`Math.max(3, 9, 5)` → `9`
`Math.random()`	Aleatorio entre 0 y 1	`Math.floor(Math.random() * 6) + 1` → un dado
`n.toFixed(2)`	Texto con 2 decimales	`(3.14159).toFixed(2)` → `"3.14"`
`Number.isInteger(n)`	¿Es entero?	`Number.isInteger(4.0)` → `true`

▶ Números

Código (edítalo y pulsa Ejecutar)

<script>
  console.log(10 / 3);
  console.log((10 / 3).toFixed(2));
  console.log(10 % 3);
  console.log(2 ** 10);
  console.log(Math.round(4.5), Math.floor(4.9), Math.ceil(4.1));

  // El famoso problema de los decimales
  console.log(0.1 + 0.2);                   // 0.30000000000000004
  console.log((0.1 + 0.2).toFixed(2));      // "0.30"

  // Un dado de 6 caras
  console.log(Math.floor(Math.random() * 6) + 1);
</script>

Página (resultado)

Consola

📌 Nota · ¿Por qué 0.1 + 0.2 no da 0.3?

Las computadoras guardan los decimales en binario y algunos no se pueden representar con exactitud. No es un error de JavaScript: pasa en casi todos los lenguajes. Para dinero, redondea con toFixed() o trabaja en centavos (números enteros).

6.Conversión de tipos

Cuando recibes datos de un formulario o de internet, casi siempre son texto, aunque parezcan números. Hay que convertirlos:

Función	Convierte a	Ejemplos
`Number(x)`	Número	`Number("42")` → `42` · `Number("hola")` → `NaN`
`parseInt(x)`	Entero	`parseInt("42px")` → `42`
`parseFloat(x)`	Decimal	`parseFloat("3.5kg")` → `3.5`
`String(x)`	Texto	`String(42)` → `"42"`
`Boolean(x)`	true / false	`Boolean("")` → `false` · `Boolean("a")` → `true`

▶ El peligro de sumar textos

Código (edítalo y pulsa Ejecutar)

<script>
  const a = "5";
  const b = 3;
  console.log(a + b);               // "53"  ← ¡unió textos!
  console.log(Number(a) + b);       // 8
  console.log(a * b);               // 15  (el * sí convierte)

  console.log(Number("hola"));      // NaN: «no es un número»
  console.log(Number(""));          // 0
  console.log(Number.isNaN(Number("hola")));
</script>

Página (resultado)

Consola

⚠️ Importante · El operador + con texto

Si uno de los lados de + es texto, JavaScript concatena en vez de sumar: "5" + 3 da "53". Convierte antes con Number(). Con -, * y / sí convierte solo, pero conviene ser explícito.

🔍 Ejemplo · Los valores «falsos»

Se comportan como false al convertirlos a booleano: false, 0, "" (texto vacío), null, undefined y NaN. Todo lo demás es «verdadero», incluso "0" y []. Lo usarás en la próxima lección para tomar decisiones.

7.Errores frecuentes

Reasignar una const: TypeError: Assignment to constant variable.
Usar una variable antes de crearla: ReferenceError o undefined.
Sumar textos creyendo que son números: "5" + 3 → "53".
Olvidar convertir lo que viene de un formulario.
Confundir null y undefined: undefined es «aún no tiene valor»; null es «vacío a propósito».
Esperar que toUpperCase() modifique el original.
Comparar números decimales con === tras operar (0.1 + 0.2 === 0.3 es false).
Nombres poco claros que obligan a adivinar qué guarda cada variable.

📒 Apuntes para llevar

Una variable guarda un valor con nombre. Usa const por defecto, let si debe cambiar y nunca var.
Los nombres van en camelCase, no empiezan con número ni usan palabras reservadas, y deben decir qué guardan.
Tipos: string, number, boolean, undefined, null, bigint, symbol y object. typeof consulta el tipo.
Las plantillas de texto ` Hola ${nombre} ` insertan valores y son la mejor forma de componer mensajes.
Los métodos de texto (toUpperCase, includes, slice, split, trim…) devuelven valores nuevos.
Math.round/floor/ceil/random y toFixed() ayudan con los números; cuidado con los decimales.
Number(), parseInt(), parseFloat(), String() y Boolean() convierten tipos.
"5" + 3 concatena: convierte siempre los datos de un formulario antes de operar.

8.Glosario

Término	Significado
Variable	Espacio con nombre donde se guarda un valor.
`const` / `let`	Declaran variables: `const` no se reasigna, `let` sí.
Tipo de dato	Categoría de un valor: texto, número, booleano…
Plantilla de texto	Texto con comillas invertidas que admite `${}` y varias líneas.
`typeof`	Operador que devuelve el tipo de un valor.
`NaN`	«Not a Number»: resultado de una operación numérica inválida.
Concatenar	Unir textos uno tras otro.
Conversión	Cambiar un valor de un tipo a otro.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Cuál es la mejor práctica para declarar una variable que no cambiará?

const expresa que el valor no se reasigna, y evita errores.

¿Qué muestra console.log("5" + 3)?

Si un lado es texto, + concatena: "53".

¿Cuál de estos es un nombre de variable válido?

¿Qué devuelve Number("hola")?

NaN significa «no es un número».

¿Qué hace "Hola".toUpperCase() sobre la variable original?

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio