Arrays

Un array es una lista ordenada de valores. Es la estructura de datos más usada en JavaScript: listas de usuarios, resultados de una API, elementos de un carrito de compra — todo acaba siendo arrays.

Crear y acceder

const frutas = ['manzana', 'pera', 'naranja'];

frutas[0]   // 'manzana' — índice empieza en 0
frutas[1]   // 'pera'
frutas[2]   // 'naranja'
frutas[3]   // undefined — no existe

frutas.length // 3 — número de elementos

// Último elemento
frutas[frutas.length - 1] // 'naranja'
frutas.at(-1)             // 'naranja' — forma moderna

Los arrays pueden contener cualquier tipo, incluso mezclados:

const mixto = [1, 'texto', true, null, { nombre: 'Ana' }, [1, 2]];

Métodos básicos

Añadir y quitar elementos

const arr = [1, 2, 3];

arr.push(4);     // añade al final → [1, 2, 3, 4]
arr.pop();       // quita el último → [1, 2, 3], devuelve 4

arr.unshift(0);  // añade al inicio → [0, 1, 2, 3]
arr.shift();     // quita el primero → [1, 2, 3], devuelve 0

Buscar

const nums = [10, 20, 30, 20, 40];

nums.indexOf(20)     // 1 — primer índice donde aparece
nums.lastIndexOf(20) // 3 — último índice
nums.includes(30)    // true — ¿existe el valor?
nums.includes(99)    // false

Ordenar y revertir

const letras = ['c', 'a', 'b'];
letras.sort()    // ['a', 'b', 'c'] — modifica el array original

const nums = [10, 2, 30, 4];
nums.sort()          // [10, 2, 30, 4] — mal: ordena como strings
nums.sort((a, b) => a - b) // [2, 4, 10, 30] — correcto para números

const arr = [1, 2, 3];
arr.reverse() // [3, 2, 1]

slice y splice

const arr = [1, 2, 3, 4, 5];

// slice — extrae sin modificar el original
arr.slice(1, 3)  // [2, 3] — desde índice 1 hasta 3 (sin incluir)
arr.slice(-2)    // [4, 5] — últimos 2 elementos
arr              // [1, 2, 3, 4, 5] — sin cambios

// splice — modifica el array original
arr.splice(1, 2)      // elimina 2 elementos desde índice 1 → devuelve [2, 3]
arr                   // [1, 4, 5]

arr.splice(1, 0, 99)  // inserta 99 en índice 1 sin eliminar
arr                   // [1, 99, 4, 5]

Métodos de transformación (los más importantes)

Estos métodos no modifican el array original — devuelven uno nuevo.

map — transforma cada elemento

const precios = [10, 20, 30];
const conIVA = precios.map(precio => precio * 1.21);
// [12.1, 24.2, 36.3]

const usuarios = [{ nombre: 'Ana', edad: 28 }, { nombre: 'Luis', edad: 34 }];
const nombres = usuarios.map(u => u.nombre);
// ['Ana', 'Luis']

filter — filtra según una condición

const nums = [1, 2, 3, 4, 5, 6];
const pares = nums.filter(n => n % 2 === 0);
// [2, 4, 6]

const usuarios = [
  { nombre: 'Ana', activo: true },
  { nombre: 'Luis', activo: false },
  { nombre: 'Marta', activo: true },
];
const activos = usuarios.filter(u => u.activo);
// [{ nombre: 'Ana', ... }, { nombre: 'Marta', ... }]

find — devuelve el primer elemento que cumple la condición

const usuarios = [
  { id: 1, nombre: 'Ana' },
  { id: 2, nombre: 'Luis' },
  { id: 3, nombre: 'Marta' },
];

const usuario = usuarios.find(u => u.id === 2);
// { id: 2, nombre: 'Luis' }

const noExiste = usuarios.find(u => u.id === 99);
// undefined

reduce — acumula un valor

El más potente y el más confuso al principio. Útil para sumas, agrupaciones, transformaciones complejas:

// Acumulador, elementoActual, índice (opcional), array (opcional)
array.reduce((acumulador, elemento) => nuevoAcumulador, valorInicial)

const precios = [10, 20, 30, 15];

const total = precios.reduce((suma, precio) => suma + precio, 0);
// 75

// Contar ocurrencias
const frutas = ['manzana', 'pera', 'manzana', 'naranja', 'pera', 'manzana'];
const conteo = frutas.reduce((acc, fruta) => {
  acc[fruta] = (acc[fruta] ?? 0) + 1;
  return acc;
}, {});
// { manzana: 3, pera: 2, naranja: 1 }

forEach — ejecuta una acción por cada elemento

const frutas = ['manzana', 'pera', 'naranja'];
frutas.forEach((fruta, índice) => {
  console.log(`${índice}: ${fruta}`);
});

forEach no devuelve nada. Úsalo para efectos secundarios (logs, mutaciones). Para transformar datos, usa map.

some y every

const nums = [1, 3, 5, 7, 8];

nums.some(n => n % 2 === 0)  // true — al menos uno es par
nums.every(n => n % 2 === 0) // false — no todos son pares

Combinar arrays: spread y concat

const a = [1, 2, 3];
const b = [4, 5, 6];

const combinado = [...a, ...b];    // [1, 2, 3, 4, 5, 6]
const combinado2 = a.concat(b);   // mismo resultado

const conExtra = [...a, 99, ...b]; // [1, 2, 3, 99, 4, 5, 6]

Desestructuración de arrays

const [primero, segundo, ...resto] = [10, 20, 30, 40, 50];

primero // 10
segundo // 20
resto   // [30, 40, 50]

// Intercambiar variables
let x = 1, y = 2;
[x, y] = [y, x];
// x = 2, y = 1

En la siguiente lección vemos los objetos: la estructura para agrupar datos y comportamientos relacionados.