Arrays en JavaScript: cómo guardar y recorrer listas de datos

En el artículo anterior aprendiste a empaquetar código en funciones para no repetirlo. Pero hay otro problema que seguro te ha pasado ya: ¿qué haces cuando necesitas guardar no un dato, sino una lista de datos? ¿Una variable por cada tarea de tu lista de la compra? Para eso existen los arrays, y son probablemente la estructura de datos que más vas a usar a partir de ahora.

Qué es un array y por qué lo necesitas

Un array es una lista ordenada de valores guardada bajo un único nombre de variable. En vez de crear tarea1, tarea2 y tarea3, guardas las tres en un solo sitio:

const tareas = ["Comprar pan", "Estudiar JavaScript", "Sacar al perro"];

Ya sabes guardar datos en variables; un array es, simplemente, una variable que guarda varios datos a la vez, en un orden concreto, y que puedes recorrer, modificar y filtrar con métodos ya hechos.

Cómo crear un array

La forma normal de crear un array es con corchetes [], separando cada elemento por comas. Esto se llama un "literal de array" y es lo que vas a usar el 99% de las veces:

const colores = ["rojo", "verde", "azul"];
const numeros = [10, 25, 3, 47];
const vacio = [];

Existe también new Array("rojo", "verde"), pero no lo vas a necesitar casi nunca: es más código para el mismo resultado. Como con las variables, usa const por defecto, incluso para arrays a los que vas a añadir o quitar elementos — const impide que reasignes toda la variable a otra cosa, pero el contenido del array sí puedes modificarlo.

Acceder y modificar elementos: el índice

Cada elemento de un array tiene una posición, llamada índice, que empieza en 0 (no en 1). Así que en este array:

const colores = ["rojo", "verde", "azul"];

colores[0] es "rojo", colores[1] es "verde" y colores[2] es "azul". Este detalle confunde a mucha gente al empezar, pero acostúmbrate pronto: el primer elemento siempre está en el índice 0, y el último está en length - 1, no en length.

Para cambiar un valor, accedes por su índice y reasignas:

colores[1] = "amarillo";
console.log(colores); // ["rojo", "amarillo", "azul"]

Si pides una posición que no existe, como colores[10], no da error: devuelve undefined.

La propiedad length

Todo array tiene una propiedad length que te dice cuántos elementos contiene:

const colores = ["rojo", "verde", "azul"];
console.log(colores.length); // 3

Es útil para muchas cosas, como acceder al último elemento sin contar a mano: colores[colores.length - 1].

Añadir y quitar elementos: push, pop, shift y unshift

Estos cuatro métodos son los que vas a usar constantemente para modificar un array, y los cuatro cambian el array original (no crean uno nuevo):

• push(valor) añade un elemento al final y devuelve la nueva longitud.
• pop() elimina el último elemento y lo devuelve.
• unshift(valor) añade un elemento al principio.
• shift() elimina el primer elemento y lo devuelve.

const tareas = ["Comprar pan"];
tareas.push("Estudiar JavaScript");
console.log(tareas); // ["Comprar pan", "Estudiar JavaScript"]

tareas.shift();
console.log(tareas); // ["Estudiar JavaScript"]

Si necesitas añadir o quitar elementos en mitad del array (no solo al principio o al final), existe splice(), pero para empezar con push, pop, shift y unshift ya vas a cubrir la mayoría de casos.

Recorrer un array: for, for...of y forEach

Casi siempre que tienes un array, quieres hacer algo con cada uno de sus elementos. Hay tres formas habituales de recorrerlo. La más clásica es el bucle for, usando el índice:

const colores = ["rojo", "verde", "azul"];

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

Más cómoda de leer, sin preocuparte del índice, es for...of:

for (const color of colores) {
  console.log(color);
}

Y la tercera opción es el método forEach, que recibe una función y la ejecuta una vez por cada elemento:

colores.forEach((color) => {
  console.log(color);
});

Las tres hacen lo mismo en este ejemplo. Para empezar, usa la que mejor entiendas — for...of suele ser la más legible — y no te agobies por elegir "la correcta": en código real vas a usar las tres según el caso.

Buscar dentro de un array: indexOf, includes y find

Para saber si un valor está en un array, o encontrarlo, tienes tres métodos útiles:

• includes(valor) devuelve true o false según si el valor está en el array.
• indexOf(valor) devuelve la posición del valor, o -1 si no existe.
• find(funcion) devuelve el primer elemento que cumple una condición (útil con arrays de objetos).

const colores = ["rojo", "verde", "azul"];

colores.includes("verde"); // true
colores.indexOf("amarillo"); // -1

const numeros = [4, 9, 15, 23];
const primerMayorQueDiez = numeros.find((n) => n > 10);
console.log(primerMayorQueDiez); // 15

Transformar un array sin tocar el original: map y filter

A diferencia de push o pop, los métodos map y filter no modifican el array original: crean uno nuevo. Esto es importante y evita bastantes errores sutiles más adelante.

map transforma cada elemento y devuelve un array nuevo con los resultados:

const precios = [10, 20, 30];
const conIva = precios.map((precio) => precio * 1.21);
console.log(conIva); // [12.1, 24.2, 36.3]
console.log(precios); // [10, 20, 30] (sin cambios)

filter se queda solo con los elementos que cumplen una condición (la misma lógica que ya conoces de los condicionales, aplicada elemento a elemento):

const edades = [15, 22, 17, 30, 12];
const mayoresDeEdad = edades.filter((edad) => edad >= 18);
console.log(mayoresDeEdad); // [22, 30]

Qué modifica el array original y qué no

Esta es la tabla que te vas a querer guardar: saber si un método cambia tu array o te devuelve uno nuevo evita muchos bugs raros de "por qué mi array ya no es el que era".

Modifican el array original	Devuelven un array nuevo
push(), pop()	map(), filter()
shift(), unshift()	slice(), concat()
splice(), sort(), reverse()	find() (un elemento, no un array)

Arrays que mezclan tipos de datos

Un mismo array puede contener distintos tipos de datos a la vez — strings, números, booleanos, incluso otros arrays u objetos:

const mezcla = ["Ana", 28, true, ["JavaScript", "CSS"]];

En la práctica, lo más habitual es que un array sea más predecible (solo números, o solo strings, o solo objetos con la misma forma), pero conviene saber que JavaScript no te obliga a ello.

Errores típicos al empezar

• Confundir el índice con la posición "humana": el primer elemento es array[0], no array[1].
• Esperar que map o filter modifiquen el array original: no lo hacen, devuelven uno nuevo. Si no guardas ese resultado en una variable, lo pierdes.
• Usar for...in para recorrer arrays: está pensado para objetos y puede darte sorpresas con arrays; usa for...of o forEach.
• Comparar arrays con === esperando que funcione por contenido: dos arrays con los mismos valores no son iguales con ===, porque compara referencias, no contenido.

En resumen

Con esto ya tienes lo esencial para trabajar con listas de datos en JavaScript: crear arrays con [], acceder por índice empezando en 0, añadir y quitar con push/pop/shift/unshift, recorrerlos con for...of o forEach, y transformarlos sin tocar el original con map y filter. El resto de métodos (reduce, sort, splice, some, every...) los vas a ir incorporando sobre la marcha, cuando te encuentres con el problema concreto que resuelven.

El siguiente paso natural desde aquí son los bucles, para repetir código sin copiarlo a mano — y los vas a usar precisamente para recorrer arrays como estos. Más adelante llegan los objetos: otra forma de agrupar datos, pero por nombre en vez de por posición.