map contra forEach de JavaScript: cuándo usar cada uno

En este artículo discutiremos los métodos map y forEach en JavaScript, y también analizaremos las diferencias entre ellos para comprender cuándo usar cada uno.

JavaScript es una de las tecnologías centrales de la web. La mayoría de los sitios web la utilizan, y todos los navegadores web modernos son compatibles con ella sin necesidad de complementos. En esta serie, discutiremos diferentes trucos y consejos que te ayudarán en tu desarrollo cotidiano con JavaScript.

Como parte de tu desarrollo cotidiano con JavaScript, a menudo necesitas trabajar con matrices. Y cuando trabajas con ellas, a menudo necesitas procesar elementos de matriz y, por lo tanto, requieres una manera de recorrer cada elemento de una matriz. En JavaScript, forEach y map son dos de los métodos más populares para trabajar con matrices. El propósito principal de ambos métodos es iterar a través de matrices. Si bien pueden parecer casi idénticos, existen ciertas diferencias entre ellos. map se usa para transformar cada elemento de una matriz, mientras que forEach se usa para ejecutar una función en cada elemento sin cambiar la matriz.

En esta publicación, discutiremos ambos métodos junto con un par de ejemplos reales. Al final, también discutiremos las diferencias entre ambos métodos. Al terminar, comprenderás mejor cuándo usar cada uno.

El método forEach

El método forEach te permite ejecutar una función iterando a través de cada elemento de una matriz. Es importante tener en cuenta que el método forEach no devuelve nada y, por lo tanto, si intentas obtener el valor de devolución del método forEach, obtendrás el valor "undefined". En cambio, te permite modificar los valores de una matriz existente aplicando la función de devolución de llamada en cada elemento de una matriz. Dado que te permite modificar la matriz de origen en sí, es un método de mutación.

Echemos un vistazo rápido al siguiente ejemplo para comprender cómo funciona el método forEach.

Como puedes ver, estamos calculando el cuadrado de todos los elemento de una matriz. Se llama al método forEach con cada elemento y registramos su cuadrado. El valor de devolución de este método auxiliar es ignorado y la matriz original no cambia. El valor de devolución de forEach siempre es undefined.

El método map

El método map, que es muy similar al método forEach, te permite ejecutar una función por cada elemento de una matriz. Pero la diferencia es que el método map crea una nueva matriz usando los valores de devolución de esta función. map crea una nueva matriz aplicando la función de devolución de llamada en cada elemento de la matriz de origen. Dado que map no cambia la matriz de origen, podemos decir que es un método inmutable.

Revisemos el ejemplo que acabamos de discutir en la sección anterior con su contraparte, el método map.

Como puedes ver, la matriz numberArray permanece sin cambios, pero el valor devuelto por map es una nueva matriz que se construye aplicando la función de cálculo del cuadrado a cada elemento de la matriz.

Una gran ventaja de la función map es que puede encadenarse. Esto significa que puedes llamar a una serie de operaciones map en sucesión. Este es un ejemplo de encadenamiento, en el que multiplicamos cada número por 2, los convertimos en cadenas y luego colocamos un signo de dólar en cada uno.

Encadenamiento de map

Diferencias entre los métodos map contra forEach

La diferencia principal entre map y forEach es que el método map devuelve una nueva matriz aplicando la función de devolución de llamada en cada elemento de una matriz, mientras que el método forEach no devuelve nada.

Puedes usar el método forEach para mutar la matriz de origen, pero esta realmente no es la manera en la que debe usarse. En cambio, es excelente para cuando necesitas realizar alguna acción con cada elemento de la matriz.

Por otro lado, el método map se usa para crear una matriz nueva y, por lo tanto, puede encadenarse. Puedes llamar a una serie de operaciones con map una tras otra.

El método forEach no devuelve nada, por lo que no puedes encadenarlo con ningún otro método; no puede encadenarse.

¿Cuál debería usar, map o forEach?

Ahora, todo se reduce a esta pregunta, ¿cómo puedes decidir si debes usar el método map o el método forEach?

Si planeas alterar los elementos de la matriz aplicando alguna función, deberías usar el método map, ya que no modifica la matriz original y devuelve una matriz nueva. De esta forma, la matriz original se mantiene intacta. Por otro lado, si quieres recorrer todos los elementos de una matriz, y no necesitas que una matriz sea devuelta, usa el método forEach.

Aparte de esto, las funciones son muy similares.

Conclusión

Hoy discutimos dos útiles métodos en JavaScript: map y forEach. Analizamos las diferencias entre ellos junto con un par de ejemplos reales.