Arrays en JavaScript: de listas simples a transformaciones limpias

Los arrays son una de las estructuras más usadas en JavaScript porque representan listas: productos, posts, usuarios, mensajes, tareas, resultados de una API o filas de una tabla. Al principio parecen fáciles, pero en proyectos reales la diferencia está en saber cuándo mutar, cuándo crear una copia y qué método expresa mejor la intención.

Crear arrays y acceder a datos

La forma más común de crear un array es con corchetes:

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits[0]); // "apple"
console.log(fruits.length); // 3

Los índices empiezan en 0, así que el último elemento está en array.length - 1. También puedes usar at() para leer desde el final de forma más clara:

console.log(fruits.at(-1)); // "orange"

Mutar o no mutar

Algunos métodos modifican el array original:

const numbers = [1, 2, 3];

numbers.push(4);
numbers.pop();
numbers.sort();

Otros devuelven un nuevo array:

const numbers = [1, 2, 3];
const doubled = numbers.map((number) => number * 2);

console.log(numbers); // [1, 2, 3]
console.log(doubled); // [2, 4, 6]

Esta diferencia importa mucho en frameworks como React, donde normalmente quieres crear nuevas referencias para que la UI detecte cambios correctamente.

map, filter y reduce

Estos tres métodos cubren gran parte del trabajo diario con listas.

map() transforma cada elemento:

const users = [
  { name: 'Ana', active: true },
  { name: 'Luis', active: false },
];

const names = users.map((user) => user.name);
console.log(names); // ["Ana", "Luis"]

filter() conserva solo los elementos que cumplen una condición:

const activeUsers = users.filter((user) => user.active);

reduce() acumula un resultado. Es útil cuando quieres calcular un total o convertir una lista en otro formato:

const cart = [
  { product: 'Keyboard', price: 80 },
  { product: 'Mouse', price: 40 },
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(total); // 120

No uses reduce() para todo. Si map() o filter() hacen el trabajo de forma más clara, son mejores opciones.

Buscar elementos

Para saber si existe un valor simple, usa includes():

const roles = ['admin', 'editor', 'reader'];
console.log(roles.includes('admin')); // true

Para objetos, usa find() o some():

const posts = [
  { slug: 'arrays', published: true },
  { slug: 'draft', published: false },
];

const post = posts.find((item) => item.slug === 'arrays');
const hasDrafts = posts.some((item) => !item.published);

find() devuelve el elemento. some() devuelve un booleano. Elegir el método correcto hace que el código se lea casi como una frase.

Copias, slice y spread

Si necesitas agregar o quitar elementos sin modificar el original, puedes crear copias:

const original = ['React', 'Astro'];
const updated = [...original, 'Node.js'];

console.log(original); // ["React", "Astro"]
console.log(updated); // ["React", "Astro", "Node.js"]

slice() también devuelve una copia parcial:

const firstTwo = updated.slice(0, 2);

Esto es más predecible que mutar una lista compartida por varias partes de la aplicación.

Ordenamiento: cuidado con sort

sort() muta el array y convierte valores a string si no le pasas una función de comparación:

const numbers = [10, 2, 30];
console.log(numbers.sort()); // [10, 2, 30] como strings

Para números:

const sorted = [...numbers].sort((a, b) => a - b);
console.log(sorted); // [2, 10, 30]

La copia con [...] evita modificar el array original.

Performance y legibilidad

En listas pequeñas, prioriza claridad. En listas muy grandes o código que corre muchas veces por segundo, evita recorrer la misma lista cinco veces sin necesidad. Por ejemplo, encadenar filter().map().sort() es legible, pero cada paso crea trabajo. Si notas un problema real de performance, mide primero y optimiza después.

Buenas prácticas

• Usa map para transformar, filter para seleccionar y reduce para acumular.
• Evita mutar arrays compartidos si el dato alimenta una UI o un estado.
• Usa find cuando necesitas el elemento y some cuando solo necesitas saber si existe.
• Copia antes de ordenar si no quieres modificar el array original.
• No uses forEach cuando necesitas devolver un nuevo array; probablemente buscas map.
• Mantén los callbacks pequeños y legibles.

Conclusión

Los arrays son mucho más que una lista de valores. Bien usados, permiten escribir transformaciones claras y predecibles. El salto de calidad aparece cuando eliges el método por intención, controlas la mutación y haces que cada operación explique qué está pasando con los datos.