Arrays

⏱ 45 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

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

Crear, leer y modificar arrays.
Recorrer listas con for…of y forEach.
Transformar y resumir datos con map, filter y reduce.
Buscar y ordenar sin cometer los errores habituales.

1.Qué es un array

Un array es una lista ordenada de valores guardados en una sola variable: los nombres de tus contactos, los precios de una tienda, las tareas de un día. Cada valor ocupa una posición (índice) que empieza en 0.

Crear y leer un array

const colores = ["rojo", "verde", "azul"];
//                  [0]     [1]      [2]

console.log(colores[0]);         // "rojo"
console.log(colores[2]);         // "azul"
console.log(colores[5]);         // undefined (no existe)
console.log(colores.length);     // 3
console.log(colores[colores.length - 1]);   // el último: "azul"
console.log(colores.at(-1));     // también el último

▶ Tu primer array

Código (edítalo y pulsa Ejecutar)

<script>
  const frutas = ["manzana", "pera", "mango"];
  console.log(frutas);
  console.log("Primera:", frutas[0]);
  console.log("Cantidad:", frutas.length);

  frutas[1] = "kiwi";            // cambiar un elemento
  console.log(frutas);

  const mezcla = [42, "texto", true, null, [1, 2]];   // pueden mezclar tipos
  console.log(mezcla.length, typeof mezcla);
  console.log(Array.isArray(mezcla));
</script>

Página (resultado)

Consola

⚠️ Importante · Se empieza a contar desde 0

El primer elemento es el [0] y el último es [length - 1]. Es la fuente de errores «por uno» más habitual. Y aunque el array se declare con const, sus elementos sí se pueden cambiar: const impide reasignar la variable, no modificar el contenido.

2.Añadir, quitar y buscar

Método	Qué hace	Devuelve	Modifica
`push(x)`	Añade al final	la nueva longitud	Sí
`pop()`	Quita del final	el elemento quitado	Sí
`unshift(x)`	Añade al principio	la nueva longitud	Sí
`shift()`	Quita del principio	el elemento quitado	Sí
`splice(i, n, …)`	Quita `n` elementos desde `i` (y puede insertar)	los quitados	Sí
`slice(a, b)`	Copia un trozo	un array nuevo	No
`concat(otro)` / `[...a, ...b]`	Une arrays	un array nuevo	No
`indexOf(x)` / `includes(x)`	Posición / ¿existe?	`número` / `booleano`	No
`join(sep)`	Convierte en texto	`string`	No
`reverse()` / `sort()`	Invierte / ordena	el mismo array	Sí

▶ Un carrito de compras

Código (edítalo y pulsa Ejecutar)

<script>
  const carrito = ["pan", "leche"];

  carrito.push("huevos");            // ["pan","leche","huevos"]
  carrito.unshift("fruta");          // ["fruta","pan","leche","huevos"]
  console.log(carrito);

  const quitado = carrito.pop();     // quita "huevos"
  console.log("Quité:", quitado, "→", carrito);

  console.log(carrito.indexOf("leche"), carrito.includes("pan"), carrito.includes("sal"));
  console.log(carrito.join(", "));
  console.log(carrito.slice(1, 3));   // copia: la original no cambia
  console.log([...carrito, "sal"]);   // copia con un elemento más
</script>

Página (resultado)

Consola

📌 Nota · Modificar o copiar

Algunos métodos modifican el array original (push, pop, splice, sort, reverse) y otros devuelven uno nuevo (slice, map, filter, concat). Saber cuál es cuál evita sorpresas. Para trabajar con seguridad, prefiere copiar: [...arr] o arr.slice().

3.Recorrer un array

▶ Tres formas de recorrer

Código (edítalo y pulsa Ejecutar)

<script>
  const notas = [8, 6, 9, 7];

  // 1. for clásico (cuando necesitas el índice)
  for (let i = 0; i < notas.length; i++) {
    console.log("Posición", i, "→", notas[i]);
  }

  // 2. for…of (cuando solo necesitas el valor)
  for (const nota of notas) {
    console.log("Nota", nota);
  }

  // 3. forEach (con una función)
  notas.forEach((nota, indice) => {
    console.log(indice + 1 + ". " + nota);
  });
</script>

Página (resultado)

Consola

4.Los métodos que más usarás: map, filter, reduce

En lugar de escribir un bucle cada vez, los arrays traen métodos que reciben una función (un callback) y hacen el trabajo repetitivo. Los tres más importantes:

Método	Para qué	Devuelve	Ejemplo
`map(fn)`	Transformar cada elemento	Un array del mismo tamaño	`[1,2,3].map(n => n * 2)` → `[2,4,6]`
`filter(fn)`	Quedarse con los que cumplan	Un array igual o más corto	`[1,2,3,4].filter(n => n % 2 === 0)` → `[2,4]`
`reduce(fn, inicial)`	Resumir todo en un valor	Un solo valor	`[1,2,3].reduce((total, n) => total + n, 0)` → `6`

▶ map, filter y reduce

Código (edítalo y pulsa Ejecutar)

<script>
  const precios = [120, 45, 300, 80, 15];

  const conIva    = precios.map(p => p * 1.16);
  const baratos   = precios.filter(p => p < 100);
  const total     = precios.reduce((suma, p) => suma + p, 0);

  console.log("Con IVA:", conIva);
  console.log("Baratos:", baratos);
  console.log("Total:", total);

  // Se pueden encadenar
  const totalBaratos = precios.filter(p => p < 100).reduce((s, p) => s + p, 0);
  console.log("Total de los baratos:", totalBaratos);
</script>

Página (resultado)

Consola

💡 Consejo · Cómo leer reduce

reduce((acumulado, elemento) => nuevoAcumulado, valorInicial). En cada vuelta recibes lo acumulado hasta ahora y el elemento actual, y devuelves el nuevo acumulado. El último valor es el resultado final. Si te cuesta, escribe primero el for equivalente y compáralo.

5.Buscar y comprobar

Método	Qué responde	Ejemplo
`find(fn)`	El primer elemento que cumple (o `undefined`)	`usuarios.find(u => u.id === 3)`
`findIndex(fn)`	Su posición (o `-1`)	`nums.findIndex(n => n > 10)`
`some(fn)`	¿Alguno cumple?	`nums.some(n => n < 0)`
`every(fn)`	¿Todos cumplen?	`nums.every(n => n > 0)`
`includes(valor)`	¿Contiene este valor?	`["a","b"].includes("a")`

▶ Buscar y comprobar

Código (edítalo y pulsa Ejecutar)

<script>
  const edades = [15, 22, 17, 30, 12];

  console.log(edades.find(e => e >= 18));        // 22
  console.log(edades.findIndex(e => e >= 18));    // 1
  console.log(edades.some(e => e < 13));          // true
  console.log(edades.every(e => e >= 18));        // false
  console.log(edades.filter(e => e >= 18).length + " mayores de edad");
</script>

Página (resultado)

Consola

6.Ordenar con sort

sort() ordena modificando el array. Y tiene una trampa famosa: por defecto ordena como texto, no como números.

▶ La trampa de sort

Código (edítalo y pulsa Ejecutar)

<script>
  const numeros = [10, 9, 1, 100, 25];

  console.log([...numeros].sort());                   // [1, 10, 100, 25, 9]  ← ¡como texto!
  console.log([...numeros].sort((a, b) => a - b));    // [1, 9, 10, 25, 100]  ascendente
  console.log([...numeros].sort((a, b) => b - a));    // [100, 25, 10, 9, 1]  descendente

  const nombres = ["Zoe", "ana", "Luis", "álvaro"];
  console.log([...nombres].sort((a, b) => a.localeCompare(b, "es")));   // alfabético correcto
</script>

Página (resultado)

Consola

⚠️ Importante · La función de comparación

(a, b) => a - b devuelve negativo si a va antes, positivo si va después y 0 si empatan. Para textos con tildes y eñes usa a.localeCompare(b, "es"). Y como sort modifica el original, cópialo antes con [...arr] si no quieres perder el orden.

7.Desestructurar y copiar

Sacar valores de un array

const [primero, segundo, ...resto] = [10, 20, 30, 40];
console.log(primero, segundo, resto);       // 10 20 [30, 40]

// Intercambiar dos variables
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b);                           // 2 1

// Copiar y combinar
const original = [1, 2, 3];
const copia = [...original];                // copia superficial
const ampliada = [0, ...original, 4];      // [0, 1, 2, 3, 4]

📌 Nota · Copias superficiales

[...arr] y arr.slice() copian un nivel: si los elementos son objetos u otros arrays, la copia comparte esas referencias. Para copias profundas existe structuredClone(arr).

8.Errores frecuentes

Empezar a contar desde 1: el primero es el [0].
Usar arr[arr.length]: no existe; el último es arr[arr.length - 1].
Olvidar el return en el callback de map/filter (con llaves): devuelve undefined.
Usar sort() sin función con números.
Modificar el array original sin querer con sort, reverse o splice.
Usar map solo para recorrer (sin usar el array que devuelve): para eso, forEach o for…of.
Usar == o indexOf para buscar objetos: compara referencias, no contenido.
Olvidar el valor inicial en reduce: con un array vacío da error.

📒 Apuntes para llevar

Un array es una lista ordenada; los índices empiezan en 0 y length da la cantidad.
push/pop trabajan al final y unshift/shift al principio; splice quita o inserta en cualquier punto.
slice, concat, map, filter y [...arr] no modifican el original; sort, reverse, splice, push… sí.
for, for…of y forEach recorren; map transforma, filter selecciona y reduce resume.
find, findIndex, some, every e includes buscan y comprueban.
sort ordena como texto por defecto: usa (a, b) => a - b para números y localeCompare para textos.
La desestructuración (const [a, b] = arr) y el spread ([...arr]) simplifican copias y asignaciones.
Una copia con [...arr] es superficial; para copias profundas, structuredClone().

9.Glosario

Término	Significado
Array	Lista ordenada de valores.
Índice	Posición de un elemento; empieza en 0.
Método	Función que pertenece a un valor (`arr.push()`).
Callback	Función que se pasa a un método para que la ejecute con cada elemento.
`map`	Crea un array nuevo transformando cada elemento.
`filter`	Crea un array nuevo con los elementos que cumplen una condición.
`reduce`	Resume un array en un solo valor.
Spread (`...`)	Reparte los elementos de un array.

🧠 Comprueba lo aprendido

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

¿Cuál es el índice del último elemento de un array a?

Como se cuenta desde 0, el último es length - 1 (o a.at(-1)).

¿Qué devuelve [1, 2, 3].map(n => n * 2)?

map devuelve un array nuevo con cada elemento transformado.

¿Qué hace [5, 12, 8].filter(n => n > 6)?

filter se queda con los elementos para los que el callback devuelve verdadero.

¿Qué da [10, 9, 1].sort() sin función de comparación?

Ordena como texto: "1" < "10" < "9". Para números necesitas (a, b) => a - b.

¿Cuál de estos métodos modifica el array original?

push añade al final del mismo array; los otros devuelven uno nuevo.

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