JavaScript — Map vs. ForEach

Hola, buenas a todos, hoy vamos a ver un tema bastante interesante a la hora de usar JavaScript.  Si ha trabajado con JS durante un tiempo, probablemente se encuentre con dos métodos Array aparentemente similares: Array.prototype.map()y Array.prototype.forEach().

Al ver esto nos preguntaremos, ¿cual es la diferencia? Ahora veremos un poco las diferencias entre ambos métodos.

JavaScript – Map y For Each

Primero echemos un vistazo a las definiciones en MDN:

• forEach() - ejecuta una función proporcionada una vez para cada elemento de la matriz.
• map() - crea una nueva matriz con los resultados de llamar a una función proporcionada en cada elemento de la matriz.

Bueno,  forEach()en realidad no devuelve nada (indefinido). Simplemente llama a una provided function en cada elemento de su matriz. Esta devolución de llamada puede cambiar la matriz original.

Mientras tanto, el método map() también llamará a una provided function en cada elemento de la matriz. La diferencia es que map()utiliza valores devueltos y en realidad devuelve una nueva matriz del mismo tamaño.

Considere el siguiente ejemplo. Si quisiéramos obtener el doble de cada elemento en la matriz de números enteros, podríamos usar cualquiera mapo forEach.

let arr = [1, 2, 3, 4, 5];

ForEach:

arr.forEach((num, index) => {
    return arr[index] = num * 2;
});

Resultado:

// arr = [2, 4, 6, 8, 10]

Map:

let doubled = arr.map(num => {
    return num * 2;
});

Resultado:

// doubled = [2, 4, 6, 8, 10]

Analizamos un poco la velocidad de ambos metodos:

jsPerf es un excelente sitio web para probar la velocidad de diferentes métodos y funciones de JavasScript.

Aquí están los resultados de mi prueba forEach()vs map():

Como puede ver, usando Chrome forEach()fue más de un 70% más lenta que map(). En otros navegadores probablemente sea diferente. Puede consultar los resultados completos de la prueba aquí.

Consideraciones Funcionales

Es importante también comprender que el uso map()puede ser preferible si estas cómodo con la programación funcional.

forEach() permite una devolución de llamada para mutar una matriz si así lo desea, afecta y cambia nuestra matriz original, mientras que map()devuelve una matriz completamente nueva, lo que deja la matriz original sin cambios.

¿Cual es mejor?

Eso depende de lo que necesites hacer con la matriz.

Bueno, espero les ayude en algo el articulo, asi como me ayudo ami a comprender un poco el uso de estas dos funciones.

Fuente: JavaScript — Map vs. ForEach – codeburst

Jlopezjujuy

administrator