Métodos de arreglos en JavaScript: Mutan vs No Mutan
Introducción En este artículo sobre JavaScript Array Methods Mutating vs Non Mutating explicamos de forma clara y práctica la diferencia entre métodos que modifican el array original y métodos que devuelven nuevos arrays o valores sin alterar el original. Incluye ejemplos simples para cada método y recomendaciones de uso en proyectos reales.
Métodos que mutan el array Estos métodos cambian directamente el array original.
1 push() Añade uno o varios elementos al final del array. Ejemplo arr = [1,2,3]; arr.push(4) Resultado [1,2,3,4]
2 pop() Elimina el último elemento del array. Ejemplo arr = [1,2,3]; arr.pop() Resultado [1,2]
3 shift() Elimina el primer elemento del array. Ejemplo arr = [1,2,3]; arr.shift() Resultado [2,3]
4 unshift() Añade uno o varios elementos al inicio del array. Ejemplo arr = [1,2,3]; arr.unshift(0) Resultado [0,1,2,3]
5 splice() Cambia el array eliminando o reemplazando elementos y opcionalmente insertando nuevos. Ejemplo arr = [10,5,6,4]; arr.splice(1,2,20,30) Resultado [10,20,30,4]
6 fill() Rellena una zona del array con un valor estático. Ejemplo arr = [25,30,35,40,45,50]; arr.fill(0,2,5) Resultado [25,30,0,0,0,50]
7 sort() Ordena los elementos in place. Ejemplo arr = [30,10,1,20]; arr.sort() Resultado [1,10,20,30]
8 reverse() Invierte el orden de los elementos in place. Ejemplo arr = [1,2,3,4]; arr.reverse() Resultado [4,3,2,1]
9 copyWithin() Copia parte del array a otra posición dentro del mismo array. Ejemplo arr = [1,2,3,4,5]; arr.copyWithin(0,2) Resultado [3,4,5,4,5]
Métodos que no mutan el array Estos métodos devuelven nuevos arrays o valores sin modificar el array original, lo que favorece la inmutabilidad y reduce efectos secundarios.
1 slice() Devuelve una porción del array. Ejemplo arr = [1,2,3,4,5]; arr.slice(1,4) Resultado [2,3,4]
2 concat() Combina arrays en un nuevo array. Ejemplo arr1 = [a,b]; arr2 = [c,d]; arr1.concat(arr2) Resultado [a,b,c,d]
3 indexOf() Devuelve el primer índice de un elemento o -1 si no existe. Ejemplo arr = [1,2,3,4]; arr.indexOf(3) Resultado 2
4 lastIndexOf() Devuelve el último índice de un elemento. Ejemplo arr = [a,b,a]; arr.lastIndexOf(a) Resultado 2
5 includes() Comprueba si un valor existe en el array. Ejemplo arr = [1,2,3]; arr.includes(2) Resultado true
6 find() Devuelve el primer elemento que cumple una condición. Ejemplo nums = [10,25,30]; nums.find(n => n > 20) Resultado 25
7 findIndex() Devuelve el índice del primer elemento que cumple una condición. Ejemplo nums = [10,25,30]; nums.findIndex(n => n > 20) Resultado 1
8 filter() Devuelve un nuevo array con los elementos que cumplen la condición. Ejemplo nums = [10,25,30]; nums.filter(n => n > 20) Resultado [25,30]
9 map() Transforma cada elemento y devuelve un nuevo array. Ejemplo nums = [1,2,3]; nums.map(n => n * 2) Resultado [2,4,6]
10 reduce() Reduce el array a un solo valor aplicando una función acumuladora. Ejemplo nums = [1,2,3]; nums.reduce((t,n) => t + n,0) Resultado 6
11 reduceRight() Reduce desde la derecha hacia la izquierda. Ejemplo nums = [1,2,3]; nums.reduceRight((t,n) => t + n,0) Resultado 6
12 some() Devuelve true si al menos un elemento cumple la condición. Ejemplo nums = [1,2,3]; nums.some(n => n % 2 === 0) Resultado true
13 every() Devuelve true si todos los elementos cumplen la condición. Ejemplo nums = [2,4,6]; nums.every(n => n % 2 === 0) Resultado true
14 forEach() Ejecuta una función para cada elemento sin devolver nuevo array. Ejemplo nums = [1,2,3]; nums.forEach(n => console.log(n)) Resultado imprime 1 2 3
15 toSorted() Devuelve una copia ordenada sin mutar el original. Ejemplo nums = [3,1,2]; nums.toSorted() Resultado [1,2,3]
16 toSpliced() Devuelve un nuevo array con la operación splice aplicada sin mutar el original. Ejemplo nums = [1,2,3]; nums.toSpliced(1,1) Resultado [1,3]
17 at() Devuelve el elemento en la posición indicada, acepta índices negativos. Ejemplo nums = [10,20,30]; nums.at(1) Resultado 20
18 findLast() Devuelve el último elemento que cumple la condición. Ejemplo nums = [10,25,30,25]; nums.findLast(n => n === 25) Resultado 25
19 findLastIndex() Devuelve el índice del último elemento que cumple la condición. Ejemplo nums = [10,25,30,25]; nums.findLastIndex(n => n === 25) Resultado 3
20 join() Une los elementos en una cadena con un separador. Ejemplo arr = [Hello,World]; arr.join( ) Resultado Hello World
21 flat() Aplana arrays anidados hasta la profundidad indicada. Ejemplo arr = [1,[2,[3]]]; arr.flat(2) Resultado [1,2,3]
22 flatMap() Aplica map y luego aplana el resultado una profundidad. Ejemplo arr = [1,2,3]; arr.flatMap(x => [x,x*2]) Resultado [1,2,2,4,3,6]
23 toReversed() Devuelve una copia invertida sin mutar el original. Ejemplo arr = [1,2,3]; arr.toReversed() Resultado [3,2,1]
Buenas prácticas Cuando busques evitar efectos secundarios usa métodos no mutantes para mantener la inmutabilidad y facilitar pruebas y depuración. En casos donde el rendimiento y la manipulación directa son críticos puedes optar por métodos mutantes pero con cuidado y documentación clara.
Sobre Q2BSTUDIO Q2BSTUDIO es una empresa de desarrollo de software y aplicaciones a medida especializada en software a medida, inteligencia artificial y ciberseguridad. Ofrecemos servicios cloud aws y azure, servicios inteligencia de negocio, soluciones de ia para empresas, agentes IA y consultoría en power bi. Diseñamos soluciones a medida que combinan mejores prácticas de ingeniería, seguridad y modelos de inteligencia artificial para impulsar la transformación digital de tu organización.
Servicios destacados Desarrollo de aplicaciones a medida integradas con servicios cloud aws y azure, proyectos de inteligencia artificial para análisis avanzado y automatización, implementación de agentes IA para atención y procesos, auditorías y soluciones de ciberseguridad, y cuadros de mando con power bi para servicios inteligencia de negocio.
Contacto y siguiente paso Si necesitas asesoría para elegir entre enfoques inmutables o mutantes en tus desarrollos o quieres diseñar software a medida con capacidades de inteligencia artificial y ciberseguridad contacta con Q2BSTUDIO para una consulta personalizada. Integrar las decisiones correctas sobre manipulación de arrays en JavaScript es un detalle que mejora la calidad del código y el éxito de tus proyectos.