Arrays en JavaScript: crear, acceder y recorrer

Un array es una lista ordenada

Los arrays en JavaScript guardan una secuencia ordenada de valores. Esos valores pueden ser de cualquier tipo (números, cadenas, objetos e incluso otros arrays) y no tienen por qué ser todos del mismo tipo. Para crear un array en JavaScript basta con usar corchetes:

Esa sintaxis literal es la que vas a usar para crear arrays en JavaScript el 99% de las veces. También existe new Array(...), pero tiene una trampa: new Array(3) genera un array de longitud 3 sin elementos reales, no [3]. Mejor quédate con [].

Los índices empiezan en cero

Se accede a cada elemento por su posición, empezando desde 0:

Dos detalles a tener en cuenta. Primero, si accedes a una posición fuera del array no obtienes un error: te devuelve undefined. De ahí vienen muchos de esos bugs del tipo "¿por qué esto es undefined?". Segundo, puedes asignar valor a cualquier índice, incluso uno que esté más allá del final, y JavaScript extenderá el array sin rechistar:

Las posiciones 3 y 4 quedan como "huecos vacíos" (sparse holes). El length salta a 6. Casi nunca vas a querer esto: es un efecto colateral de lo flexibles que son los arrays en JavaScript, no una característica en la que convenga apoyarse.

La propiedad length siempre está viva

array.length siempre es uno más que el índice más alto. Se actualiza sola cada vez que agregas o quitas elementos:

Merece la pena recordar ese último truco: asignar un valor a length recorta el array. Hacer nums.length = 0 es una forma rápida de vaciarlo sin crear uno nuevo.

push, pop, shift y unshift

Cuatro métodos para añadir y quitar elementos por los extremos:

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

push y pop son rápidos. En cambio, shift y unshift tienen que reindexar el resto de elementos, así que son más lentos en arrays grandes. Para tamaños normales no pasa nada, pero conviene tenerlo presente si trabajas con millones de elementos.

slice vs splice en JavaScript

Se llaman casi igual, pero hacen cosas totalmente distintas. Si los tienes claros desde el principio, te ahorras muchos dolores de cabeza.

slice(start, end) devuelve una copia de un trozo del array sin modificar el original. Además, end no se incluye:

splice(start, deleteCount, ...items) modifica el array original. Sirve para eliminar, insertar o ambas cosas a la vez, y devuelve lo que haya quitado:

Regla mnemotécnica: si la palabra te recuerda a cortar una rebanada de una barra de pan, es slice. Si te hace pensar en empalmar una película (cortar e insertar), es splice.

Buscar elementos en un array: indexOf, includes y find

Tres formas de buscar algo, cada una para su momento:

• indexOf(x) te devuelve la posición, o -1 si no lo encuentra. Útil cuando necesitas el índice.
• includes(x) te devuelve un booleano. Queda más limpio cuando solo quieres saber "¿está esto dentro?". Además maneja bien NaN, cosa que indexOf no hace.
• find(predicate) ejecuta una función sobre cada elemento y devuelve el primero que cumpla la condición. Es el método indicado para arrays de objetos, donde indexOf e includes solo comparan por igualdad estricta.

Cómo recorrer un array en JavaScript

Hay varias formas válidas, y cada una encaja mejor en un escenario distinto:

for...of es la opción por defecto: se lee bien, funciona con cualquier iterable y te da el valor directamente. forEach sirve cuando además necesitas el índice y no vas a cortar el bucle a medias (no puedes usar break dentro de forEach). El for clásico con índice es más largo, pero te da control total: úsalo cuando necesites saltarte elementos, recorrer el array al revés, o ambas cosas.

Hay un bucle que conviene evitar: for...in. Itera sobre las claves e incluye propiedades heredadas. Es para objetos, no para arrays.

Copiar y combinar arrays en JavaScript

Los arrays son valores por referencia. Asignar uno a otro no crea una copia: simplemente tienes dos nombres que apuntan al mismo array:

Para copiar un array de verdad, usa el operador spread o slice():

Ambos te dan una copia superficial: el array de primer nivel es nuevo, pero si los elementos son objetos, esos objetos se siguen compartiendo. El spread también es la forma más limpia de combinar arrays:

Arrays de objetos

En el código real, la mayoría de los arrays en JavaScript guardan objetos. Los mismos métodos siguen funcionando, pero ahora las comparaciones se vuelven bastante más interesantes:

filter devuelve un nuevo array con los elementos que cumplen una condición. map devuelve un nuevo array en el que cada elemento está transformado. Encadenar ambos es el pan de cada día cuando trabajas con arrays de objetos, y en la siguiente página veremos esta familia de métodos con más detalle.

Arrays vs objetos en JavaScript

Un modelo mental rápido: usa un array cuando el orden importa y estás manejando una lista del mismo tipo de cosas. Usa un objeto (o un Map) cuando necesites acceder a los datos por una clave con nombre. "Primero, segundo, tercero" es terreno de arrays. "Dame el usuario con id 42" es terreno de objetos o de Map.

Se pueden combinar, de hecho los arrays de objetos están por todas partes, pero no uses un array como diccionario con claves, ni un objeto como lista ordenada. Cada uno cumple bien su función.

Lo que viene: destructuring

Extraer valores de un array por su índice (y propiedades de un objeto por su nombre) es algo tan habitual que JavaScript tiene una sintaxis dedicada para ello. Se llama destructuring, y lo veremos a continuación.