Diferencia entre forEach() y map() loop en JavaScript

Cuando trabajamos con una array, es un paso esencial iterar en la array para acceder a los elementos y realizar algún tipo de funcionalidad en esos elementos para realizar cualquier tarea.
Por ejemplo, si tiene una array de calificaciones obtenidas por 20 estudiantes y desea calcular su GPA, si tiene una array de imágenes y desea mostrarlas en la interfaz, etc. Para administrar estos casos, debe tener conocimiento de cómo acceder al elemento de la array y cómo operar en ellos. 

Además de las construcciones básicas del lenguaje, es decir , for loop , while loop y do-while loop , existen dos métodos ampliamente utilizados para la iteración.

.forEach() y .map(): estos son los métodos que se usan para iterar en una array, más técnicamente invocan la función de devolución de llamada proporcionada para cada elemento de una array.

Sintaxis:

forEach((currentElement, indexOfElement, array) => { ... } )

map((currentElement, indexOfElement, array) => { ... } )

Parámetros:

• currentElement: este es el elemento actual que se está procesando en la devolución de llamada.
• indexOfElement: el índice de ese elemento actual dentro de la array.
• array: la array en la que se realiza toda la operación.

Ejemplo 1: Nuestro objetivo es crear un tipo de funcionalidad que pueda dar valores cuadrados de los elementos de una array dada. Hemos creado dos arrays, una está trabajando con forEach() y la otra con map() , y ambas producen el mismo resultado. Se accede al elemento y al índice dentro de la función de devolución de llamada y estamos asignando el cuadrado de cada elemento en ese índice.

<script>
    /* forEach method */
    let myArray1 = [1, 2, 3, 4];
    myArray1.forEach((element, index) => {
        myArray1[index] = element * element;
    })
    console.log(myArray1);
 
    /* map method */
    let myArray2 = [1, 2, 3, 4];
    myArray2.map((element, index) => {
        myArray2[index] = element * element;
    })
    console.log(myArray2);
</script>

Salida: con la imagen de salida a continuación, podemos deducir el funcionamiento de ambos métodos.

Ejemplo 2: estamos realizando la misma funcionalidad, pero el valor devuelto por forEach() es «indefinido» y el valor devuelto por el método map() es una array. 

<script>
    let myArray = [1, 2, 3, 4];
 
    const returnValue = myArray.forEach((element) => {
        return element * element;
    });
    console.log(returnValue);
</script>

Producción:

Ejemplo 3: El siguiente ejemplo demuestra el método map() .

<script>
    let myArray = [1, 2, 3, 4];
 
    const returnValue = myArray.map((element) => {
        return element * element;
    })
    console.log(returnValue);
</script>

Producción:

Ejemplo 4: En este ejemplo, vamos a aplicar la técnica de enstringmiento, el valor de retorno se opera en el siguiente método de instancia. Hemos utilizado el método array reverse() para simplificar, pero puede ser cualquier cosa, es decir, ordenar, buscar, reducir, filtrar, etc. Incluso se pueden utilizar métodos personalizados para enstringr.  

<script>
    let myArray = [1, 2, 3, 4];
 
    const returnValue = myArray.forEach((element) => {
        return element * element;
    }).reverse();
    console.log(returnValue);
</script>

Salida:  El método forEach() está devolviendo » indefinido » y el siguiente método de instancia (inverso) puede ser invocado por una array. TypeError está siendo lanzado por JavaScript.  

Ejemplo 5: El siguiente código demuestra el método reverse() para el resultado obtenido del método map() como se implementa en el código anterior.

<script>
    let myArray = [1, 2, 3, 4];
 
    const returnValue = myArray.map((element) => {
        return element * element;
    }).reverse();
    console.log(returnValue);
</script>

Salida: aquí, el método de mapa devuelve una array que invoca el siguiente método de instancia y que luego proporciona el valor de retorno final (inverso de la array que invoca).

Diferencias entre los métodos forEach() y map():

Conclusión: Como están trabajando con muy pocas diferencias, también la velocidad de ejecución no es significativa a considerar, por lo que es hora de pensar, ¿cuál elegir? Si desea los beneficios del valor de retorno o de alguna manera no desea cambiar la array original, entonces proceda con el mapa(); de lo contrario, si solo está interesado en iterar o realizar el proceso de no transformación en la array, forEach() podría ser la mejor opción.