Arrays en JavaScript

¿Qué es un Array?

Un array es una lista ordenada de valores. Cada elemento tiene una posición (índice) que empieza en 0. Pueden contener cualquier tipo de dato — incluso mezclarlos.

const frutas   = ["manzana", "naranja", "uva"];
const numeros  = [1, 2, 3, 4, 5];
const mixto    = ["Ana", 28, true, null];
const vacio    = [];

console.log(frutas[0]);      // "manzana"
console.log(frutas.length);  // 3
console.log(frutas.at(-1));  // "uva" — último elemento

Probá el Ejemplo 1: Crear y acceder a arrays

Agregar y quitar elementos

const frutas = ["manzana", "naranja"];

// Agregar
frutas.push("uva");           // agrega al final    → [..., "uva"]
frutas.unshift("kiwi");       // agrega al principio → ["kiwi", ...]

// Quitar
frutas.pop();                 // quita el último     → devuelve "uva"
frutas.shift();               // quita el primero    → devuelve "kiwi"

// Insertar o eliminar en cualquier posición (splice)
frutas.splice(1, 0, "pera"); // inserta "pera" en índice 1 sin borrar nada
frutas.splice(1, 1);         // elimina 1 elemento desde el índice 1

Método	Acción	Devuelve
push(x)	Agrega al final	Nuevo length
pop()	Quita el último	El elemento quitado
unshift(x)	Agrega al principio	Nuevo length
shift()	Quita el primero	El elemento quitado
splice(i, n)	Elimina n elementos desde i	Array de eliminados

Recorrer arrays

for...of — el más limpio

const frutas = ["manzana", "naranja", "uva"];

for (const fruta of frutas) {
    console.log(fruta);
}
// manzana
// naranja
// uva

forEach — cuando necesitás el índice

frutas.forEach((fruta, i) => {
    console.log(`${i + 1}. ${fruta}`);
});
// 1. manzana
// 2. naranja
// 3. uva

for clásico — cuando necesitás control total

for (let i = 0; i < frutas.length; i++) {
    console.log(frutas[i]);
}

Probá el Ejemplo 2: Recorrer arrays

Métodos de transformación

Estos métodos son fundamentales en JavaScript moderno. Todos devuelven un array nuevo sin modificar el original.

map() — transformar cada elemento

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

const dobles = numeros.map(n => n * 2);
// [2, 4, 6, 8, 10]

const nombres = ["ana", "carlos", "beatriz"];
const mayus = nombres.map(n => n[0].toUpperCase() + n.slice(1));
// ["Ana", "Carlos", "Beatriz"]

filter() — filtrar elementos

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const pares     = numeros.filter(n => n % 2 === 0);  // [2, 4, 6, 8, 10]
const mayoresCinco = numeros.filter(n => n > 5);     // [6, 7, 8, 9, 10]

const productos = [
    { nombre: "Laptop",  precio: 1200, stock: 5 },
    { nombre: "Mouse",   precio: 25,   stock: 0 },
    { nombre: "Teclado", precio: 75,   stock: 3 },
];
const disponibles = productos.filter(p => p.stock > 0);
// [{ nombre: "Laptop"... }, { nombre: "Teclado"... }]

reduce() — reducir a un valor

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

const suma  = numeros.reduce((acc, n) => acc + n, 0);   // 15
const maximo = numeros.reduce((max, n) => n > max ? n : max, 0);  // 5

const precios = [1200, 25, 75, 450];
const total   = precios.reduce((acc, p) => acc + p, 0);  // 1750

find() y findIndex()

const usuarios = [
    { id: 1, nombre: "Ana",    activo: true  },
    { id: 2, nombre: "Carlos", activo: false },
    { id: 3, nombre: "Bea",    activo: true  },
];

const ana        = usuarios.find(u => u.nombre === "Ana");
// { id: 1, nombre: "Ana", activo: true }

const idxCarlos  = usuarios.findIndex(u => u.nombre === "Carlos");
// 1

Probá el Ejemplo 3: map, filter y reduce

Otros métodos útiles

Ordenar, buscar y verificar

const nums = [3, 1, 4, 1, 5, 9, 2, 6];

nums.sort((a, b) => a - b);   // [1, 1, 2, 3, 4, 5, 6, 9] — ascendente
nums.sort((a, b) => b - a);   // [9, 6, 5, 4, 3, 2, 1, 1] — descendente

nums.includes(5);              // true
nums.indexOf(4);               // índice de 4

// some() — ¿alguno cumple?
nums.some(n => n > 8);        // true (hay un 9)

// every() — ¿todos cumplen?
nums.every(n => n > 0);       // true (todos positivos)

// flat() — aplanar arrays anidados
const anidado = [[1, 2], [3, 4], [5]];
anidado.flat();               // [1, 2, 3, 4, 5]

Combinar arrays

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

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

// Copiar un array
const copia = [...a];                // nueva referencia
const copia2 = a.slice();           // alternativa

Ejemplo Completo — Sistema de productos

Un catálogo de productos con filtrado, ordenamiento y estadísticas:

const productos = [
    { nombre: "Laptop",    precio: 1200, categoria: "tech",  stock: 5  },
    { nombre: "Mouse",     precio: 25,   categoria: "tech",  stock: 0  },
    { nombre: "Teclado",   precio: 75,   categoria: "tech",  stock: 8  },
    { nombre: "Silla",     precio: 350,  categoria: "mueble",stock: 3  },
    { nombre: "Monitor",   precio: 450,  categoria: "tech",  stock: 2  },
    { nombre: "Escritorio",precio: 280,  categoria: "mueble",stock: 0  },
];

// Solo tech con stock
const techDisponibles = productos
    .filter(p => p.categoria === "tech" && p.stock > 0)
    .sort((a, b) => a.precio - b.precio);

// Total del inventario
const totalInv = productos.reduce((acc, p) => acc + p.precio * p.stock, 0);

// Nombres de todos los productos
const nombres = productos.map(p => p.nombre).join(", ");

// Mostrar resultados
let html = "<h3>Tech disponibles</h3>";
techDisponibles.forEach(p => {
    html += `<p>${p.nombre} — $${p.precio} (${p.stock} en stock)</p>`;
});
html += `<p><strong>Total inventario: $${totalInv}</strong></p>`;
document.getElementById("resultado").innerHTML = html;

Probá el Ejemplo 4: Sistema de productos

Buenas Prácticas

• const para arrays: el array puede cambiar de contenido, pero la variable siempre apunta al mismo
• for...of para iterar: más limpio que el for clásico cuando no necesitás el índice
• map/filter/reduce para transformar: más declarativo y legible que los loops manuales
• spread [...arr] para copiar: nunca arr2 = arr1 — eso crea una referencia, no una copia
• sort con comparadora para números: .sort((a, b) => a - b) siempre
• No modificar el original: preferí métodos que devuelven arrays nuevos (map, filter, slice) en vez de los que mutan (push, splice)