Trabajar con arrays

En esta lección aprenderás lo básico de los arrays en JavaScript para manejar varios datos juntos de forma eficiente. Está dirigida a quien busca «uso de arrays en JavaScript» o «forEach en JavaScript para principiantes».

Un array es una caja capaz de guardar varios datos a la vez. Se crea con [ ], se consulta su tamaño con .length y se recorre su contenido con un bucle for o con distintos métodos. Si intentaras manejar 100 nombres con «una variable por valor», tendrías que crear 100 variables distintas: nada realista. Un array te permite gestionar todos esos datos en una sola variable.

El código de ejemplo crea un array llamado frutas, obtiene el número de elementos con .length y procesa cada elemento con .forEach(). El patrón .forEach((elemento, indice) => { ... }) se usa siempre que quieres aplicar el mismo tratamiento a todos los elementos de un array; es una forma de pensar que también verás en .map() y .filter() más adelante.

Un tropiezo habitual al empezar es que los índices empiezan en 0. frutas[1] se refiere al segundo elemento, y ese desfase entre «el primero es frutas[0]» y la forma cotidiana de contar provoca muchos fallos. Ten cuidado además: acceder a un índice que no existe no lanza error, simplemente devuelve undefined.

En el desarrollo real, los datos que vienen en varios elementos —una lista de productos, los comentarios de los usuarios— se manejan casi siempre como arrays. Los datos que llegan de una base de datos o de una API también suelen tener forma de array, así que soltura con los arrays es, básicamente, la forma física del desarrollo web.

Los arrays traen además métodos como .push() para añadir un elemento al final y .pop() para quitar el último. Combinando estos métodos básicos puedes implementar sin dificultad operaciones que ves a diario en aplicaciones reales, como añadir un artículo al carrito.

Cuando quieres eliminar un elemento del array, o insertar uno en una posición concreta, usas .splice() en ambos casos. Es un método con argumentos algo enrevesados, pero aparece a menudo siempre que hay que editar el interior de un array, así que merece la pena recordar el nombre aunque no lo domines de inmediato.