Métodos de Array en JavaScript
Aprende los métodos esenciales de array en JavaScript con ejemplos ejecutables: push, pop, map, filter, reduce, slice, splice, find y los nuevos métodos inmutables.
Introducción
Los arrays son una de las estructuras de datos más utilizadas en JavaScript, y la mayor parte de su potencia proviene de sus métodos incorporados: funciones que se llaman sobre un array para añadir, eliminar, buscar, transformar o reordenar sus elementos. Esta guía cubre los métodos que utilizarás a diario, explica la importantísima diferencia entre los métodos que mutan el array original y los que devuelven un nuevo array, y muestra cada uno con un ejemplo ejecutable.
Si eres nuevo en los arrays, empieza por el capítulo JavaScript Array y luego vuelve aquí.
Comprendiendo los Arrays de JavaScript
Un array almacena una lista ordenada de valores en una sola variable. Los valores pueden ser de cualquiera de los tipos de datos de JavaScript — números, strings, objects, incluso otros arrays — y no es necesario definir el tamaño por adelantado.
Crear un Array
La forma más sencilla de crear un array es con la sintaxis literal de corchetes:
let fruits = ["Apple", "Banana", "Cherry"];Esto crea un array llamado fruits con tres elementos de tipo string.
Acceder a los Elementos de un Array
Se accede a los elementos mediante su índice, una posición que empieza en cero contando desde el inicio del array:
La propiedad length indica cuántos elementos hay, y at() acepta índices negativos, por lo que at(-1) siempre devuelve el último elemento.
Métodos Mutantes vs. No Mutantes
Antes de ver los métodos individuales, aprende esta distinción — explica la mayoría de los errores con arrays:
- Los métodos mutantes modifican el array en su lugar.
push,pop,shift,unshift,splice,sort,reverseyfillmodifican el array sobre el que se llaman. - Los métodos no mutantes dejan el original intacto y devuelven un nuevo array o valor.
map,filter,slice,concat,reduce,findy los más recientestoSorted/toSpliced/toReversedpertenecen a este grupo.
Cuando compartas un array entre funciones o lo almacenes en el estado (por ejemplo en un componente de React), prefiere los métodos no mutantes para no cambiar accidentalmente datos de los que depende otra parte del código.
Métodos Principales de Array
| Método | ¿Muta? | Descripción |
|---|---|---|
push() | Sí | Añade uno o más elementos al final; devuelve la nueva longitud. |
pop() | Sí | Elimina el último elemento y lo devuelve. |
shift() | Sí | Elimina el primer elemento y lo devuelve. |
unshift() | Sí | Añade elementos al inicio; devuelve la nueva longitud. |
splice() | Sí | Elimina, reemplaza y/o inserta elementos en cualquier posición. |
sort() | Sí | Ordena los elementos (alfabéticamente por defecto). |
reverse() | Sí | Invierte el orden de los elementos. |
fill() | Sí | Sobreescribe un rango de elementos con un valor estático. |
slice() | No | Devuelve una copia superficial de una porción del array. |
concat() | No | Fusiona arrays y devuelve un nuevo array. |
map() | No | Devuelve un nuevo array con los resultados de aplicar una función a cada elemento. |
filter() | No | Devuelve un nuevo array con los elementos que superan una prueba. |
reduce() | No | Reduce el array a un único valor. |
forEach() | No | Ejecuta una función para cada elemento (devuelve undefined). |
find() | No | Devuelve el primer elemento que satisface una prueba. |
findIndex() | No | Devuelve el índice del primer elemento que satisface una prueba. |
indexOf() | No | Devuelve el primer índice de un valor, o -1. |
includes() | No | Devuelve true/false según si existe un valor. |
some() | No | true si al menos un elemento supera una prueba. |
every() | No | true si todos los elementos superan una prueba. |
toSorted() | No | Devuelve una copia ordenada (el array original no cambia). |
toSpliced() | No | Devuelve una copia modificada (el array original no cambia). |
Añadir y Eliminar Elementos
push()
push() añade uno o más elementos al final del array y devuelve la nueva longitud.
unshift()
unshift() inserta elementos al inicio del array.
pop()
pop() elimina el último elemento y lo devuelve. Junto con push(), permite que un array actúe como una pila (último en entrar, primero en salir).
shift()
shift() elimina el primer elemento y lo devuelve. Ten en cuenta que shift y unshift son más lentos que push/pop porque todos los elementos restantes deben reindexarse.
Buscar Elementos
indexOf()
indexOf() devuelve el primer índice de un valor, o -1 si no se encuentra. Utiliza igualdad estricta, por lo que no puede encontrar objects por su contenido.
includes()
includes() responde a una pregunta más simple de sí/no: ¿existe este valor en el array? Es más claro que indexOf(x) !== -1 y, a diferencia de indexOf, puede encontrar NaN.
find() y findIndex()
Cuando necesitas localizar un elemento por una condición en lugar de un valor exacto, usa find() (devuelve el elemento) o findIndex() (devuelve su índice). Ambos se detienen en la primera coincidencia.
some() y every()
some() devuelve true si al menos un elemento supera la prueba; every() devuelve true solo si todos la superan.
Iterar y Transformar
Estos métodos reciben una función callback y son el núcleo del JavaScript moderno y declarativo. Se complementan de forma natural con los patrones del capítulo Bucles en JavaScript.
forEach()
forEach() ejecuta una función una vez por cada elemento. Siempre devuelve undefined, así que úsalo para efectos secundarios (como registrar en consola), no para construir un nuevo valor.
map()
map() crea un nuevo array transformando cada elemento. El nuevo array siempre tiene la misma longitud que el original.
filter()
filter() crea un nuevo array que contiene solo los elementos para los cuales el callback devuelve un valor verdadero.
reduce()
reduce() reduce un array a un único valor aplicando repetidamente una función. El callback recibe un acumulador y el elemento actual; el segundo argumento de reduce es el valor inicial del acumulador.
Puedes encadenar estos transformadores: primero map, luego filter, luego reduce, y cada paso produce la entrada del siguiente.
Reordenar y Dividir
sort()
sort() ordena en su lugar. Por defecto compara los elementos como strings, lo que da resultados sorprendentes con números — 10 se ordena antes que 2 porque "10" viene antes que "2" alfabéticamente. Pasa siempre una función de comparación al ordenar números.
reverse()
reverse() invierte el orden de los elementos en su lugar.
slice()
slice(start, end) devuelve una copia superficial de una porción del array. El índice end no se incluye, y el original queda intacto, lo que convierte a slice() en una forma práctica de copiar un array.
splice()
splice(start, deleteCount, ...items) es el editor de propósito general en su lugar: puede eliminar, reemplazar e insertar. En el siguiente ejemplo inserta "Grape" en el índice 2 sin eliminar nada (deleteCount es 0).
concat()
concat() fusiona arrays en un nuevo array sin modificar los originales. La sintaxis de spread ([...a, ...b]) hace lo mismo; consulta Parámetros rest y sintaxis spread.
fill()
fill(value, start, end) sobreescribe un rango de elementos con un valor estático, en su lugar.
Métodos Inmutables (de Copia)
Introducidos en ES2023, estos métodos hacen exactamente lo que hacen sort, splice y reverse — pero devuelven un nuevo array y dejan el original intacto. Son ideales para estado que no debe mutarse.
toSorted()
toSpliced()
Conclusión
Dominar los métodos de array de JavaScript es una de las habilidades más valiosas del lenguaje: map, filter y reduce sustituyen la mayoría de los bucles manuales, mientras que saber qué métodos mutan y cuáles copian previene toda una clase de errores. Sigue practicando con los ejemplos ejecutables anteriores y explora temas relacionados como los fundamentos de JavaScript Array y la sintaxis spread.