Lección 04 de 7

JavaScript en detalle — tipos, variables, arrays y objetos

Los bugs más famosos de JS no son magia: son reglas. Aquí las ves con lupa: typeof, const vs let, '3' + 10, índices desde 0, .length vs .push(), y objetos con notación de punto.

1 · typeof

Comparar el tipo de un valor

Qué es

typeof te dice qué tipo de dato tienes: número, texto, booleano, etc.

Por qué existe

A veces un valor «parece» número pero es texto ('10'). Si no sabes el tipo, los operadores hacen cosas raras. typeof existe para preguntar: ¿qué es esto?

Cómo funciona (paso a paso)

Escribes typeof delante del valor.
JS responde con un texto en minúsculas: 'number', 'string', 'boolean'…
Importante: 'Number' con mayúscula NO es la respuesta correcta.

Ejemplo sencillo

typeof 10 → "number". typeof "hola" → "string".

Analogía

Es como preguntarle a una caja del supermercado: «¿qué categoría eres?» — lácteos, fruta, limpieza. typeof te da la categoría del dato.

El código

console.log(typeof 10);        // "number"
console.log(typeof "hola");    // "string"
console.log(typeof true);      // "boolean"
console.log(typeof [1,2]);     // "object"  (los arrays son objetos)
console.log(typeof undefined); // "undefined"

Bug clásico 🐛

typeof 10 === 'Number' es falso. JavaScript distingue mayúsculas: la respuesta correcta es 'number' con minúscula.

2 · const vs let

El candado de const

Qué es

let permite cambiar el valor de la caja. const pone un candado: no puedes reasignar.

Por qué existe

A veces un valor NO debe cambiar (precio fijo, ID). const evita que lo pises por accidente. let existe para contadores y cosas que sí cambian.

Cómo funciona (paso a paso)

Con const: guardas el valor una vez.
Si intentas precio = 120, JS lanza TypeError.
Con let: puedes hacer stock = 4 sin problema.
Regla práctica: empieza con const; cambia a let solo cuando necesites reasignar.

Ejemplo sencillo

const precio = 100; luego precio = 120 → error. let stock = 5; stock = 4 → ok.

Analogía

const es un frasco sellado: puedes mirar adentro, pero no cambiar el contenido. let es un vaso normal: lo rellenas cuando quieras.

El código

const precio = 100;
precio = 120;  // ❌ TypeError

let stock = 5;
stock = 4;     // ✅ OK

3 · Coerción de tipos

Por qué '3' + 10 = '310'

Qué es

Coerción es cuando JS convierte solo un tipo a otro para poder operar (texto ↔ número).

Por qué existe

Existe para «intentar ayudar», pero a veces te confunde. Entenderla evita bugs como '3' + 10 = '310'.

Cómo funciona (paso a paso)

Con +: si un lado es texto, pega (concatena) en vez de sumar.
Con - * /: intenta convertir a número y calcula.
Si quieres sumar de verdad, convierte tú: Number('3') + 10.

Ejemplo sencillo

'3' + 10 → '310' (pegó). '3' - 10 → -7 (restó).

Analogía

Es como mezclar manzanas y carteles: con + a veces pega el cartel «3» junto al «10». Con − entiende que quieres hacer cuentas.

El código

'3' + 10   // "310"   (concatena)
'3' - 10   // -7      (resta numérica)
'3' * 10   // 30      (multiplica)
Number('3') + 10  // 13   (conversión explícita)

Cómo evitarlo

Convierte tú mismo con Number(x) o parseInt(x) antes de sumar.

4 · Arrays

🍎 Listas ordenadas — el índice arranca en 0

Qué es

Un array es una lista ordenada de casilleros. El primer casillero es el 0, no el 1.

Por qué existe

Necesitas guardar varios valores juntos (frutas, notas, usuarios) y saber en qué posición está cada uno.

Cómo funciona (paso a paso)

Creas la lista: ['manzana', 'pera', 'uva'].
frutas[0] es el primero, frutas[1] el segundo…
.length (sin paréntesis) cuenta cuántos hay: es una propiedad, un dato.
.push('kiwi') (con paréntesis) añade al final: es un método, una acción.

Ejemplo sencillo

En una lista de 3, frutas[3] es undefined: no hay cuarto casillero.

Analogía

Fila de casilleros del cole: el primero se numera 0. .length es el cartel «hay 3». .push() es la acción de meter otra cosa al final.

Traducir: lista de frutas

Nivel 1 · Lenguaje natural

Crear una lista llamada frutas con manzana, pera y uva.
Leer el primer casillero (posición 0), el segundo (1) y el tercero (2).
Preguntar cuántos hay (sin hacer una acción: solo leer el dato).
Añadir kiwi al final (eso sí es una acción).

Nivel 2 · Pseudocódigo

crear lista frutas = ["manzana", "pera", "uva"]

leer frutas[0]   → "manzana"
leer frutas[1]   → "pera"
leer cuantos = frutas.length   → 3

añadir al final: frutas.push("kiwi")
ahora length = 4

Nivel 3 · Código

let frutas = ["manzana", "pera", "uva"];

frutas[0];   // "manzana"
frutas[1];   // "pera"
frutas.length;   // 3  ← dato (sin ())
frutas.push("kiwi");  // acción (con ())
// ahora length = 4

Español → Lógica → Código

Diferencia clave

Propiedad = dato que ya está calculado (sin ()).
Método = acción que la variable puede hacer (siempre con ()).

5 · Objetos

📇 Fichas con etiquetas — notación de punto

Qué es

Un objeto guarda datos con nombre (etiqueta), no con número como el array.

Por qué existe

Una persona o un libro tienen campos con sentido: titulo, autor, paginas. Los nombres ayudan más que [0], [1], [2].

Cómo funciona (paso a paso)

Escribes { clave: valor, … }.
Lees con punto: libro.titulo.
Puedes cambiar: libro.leido = false.
Array = casilleros numerados. Objeto = fichas etiquetadas.

Ejemplo sencillo

libro.titulo → "El Principito". libro.paginas → 96.

Analogía

Una ficha de biblioteca: no buscas «casillero 2», buscas la etiqueta «título» o «autor».

Traducir: ficha de un libro

Nivel 1 · Lenguaje natural

Crear una ficha llamada libro.
Guardar título, autor, páginas y si ya lo leí.
Leer el título y las páginas.
Cambiar «leído» a falso.

Nivel 2 · Pseudocódigo

crear ficha libro
    titulo = "El Principito"
    autor = "Saint-Exupéry"
    paginas = 96
    leido = verdadero

leer libro.titulo
leer libro.paginas
cambiar libro.leido = falso

Nivel 3 · Código

let libro = {
  titulo: "El Principito",
  autor:  "Saint-Exupéry",
  paginas: 96,
  leido:   true
};

libro.titulo;   // "El Principito"
libro.paginas;  // 96
libro.leido = false;

Español → Lógica → Código

Array vs. Objeto

Array = casilleros numerados (frutas[0]).
Objeto = fichas etiquetadas (libro.titulo).

6 · Resumen express

Los bugs más comunes en una tabla

Escribiste	JS ve	Arreglo
typeof 10 === 'Number'	false	usa 'number' en minúscula
const x = 1; x = 2;	TypeError	cambia const → let
'3' + 10	'310'	Number('3') + 10 → 13
frutas[3] en lista de 3	undefined	recuerda: el índice empieza en 0
arr.length()	TypeError	es propiedad: arr.length (sin paréntesis)
arr.push	no hace nada	es método: arr.push('kiwi')

◀ Anterior

Fundamentos de programación

Siguiente ▶

Comandos de la terminal