JavaScript tiene algunos métodos útiles que nos ayudan a recorrer nuestras matrices. Los dos más utilizados para la iteración son Array.prototype.map()y Array.prototype.forEach().

Pero creo que siguen siendo un poco confusos, especialmente para un principiante. Porque ambos hacen una iteración y generan algo. ¿Entonces cuál es la diferencia?

En este artículo, veremos lo siguiente:

• Definiciones
• El valor devuelto
• Capacidad para encadenar otros métodos
• Mutabilidad
• Velocidad de rendimiento
• Pensamientos finales

Definiciones

El mapmétodo recibe una función como parámetro. Luego lo aplica en cada elemento y devuelve una matriz completamente nueva poblada con los resultados de llamar a la función proporcionada.

Esto significa que devuelve una nueva matriz que contiene una imagen de cada elemento de la matriz. Siempre devolverá la misma cantidad de artículos.

 const myAwesomeArray = [5, 4, 3, 2, 1] myAwesomeArray.map(x => x * x) // >>>>>>>>>>>>>>>>> Output: [25, 16, 9, 4, 1]

Por ejemplo map, el forEach()método recibe una función como argumento y la ejecuta una vez para cada elemento de la matriz. Sin embargo, en lugar de devolver una nueva matriz como map, devuelve undefined.

const myAwesomeArray = [ { id: 1, name: "john" }, { id: 2, name: "Ali" }, { id: 3, name: "Mass" }, ] myAwesomeArray.forEach(element => console.log(element.name)) // >>>>>>>>> Output : john // Ali // Mass

1. El valor devuelto

La primera diferencia entre map()y forEach()es el valor de retorno. El forEach()método devuelve undefinedy map()devuelve una nueva matriz con los elementos transformados. Incluso si hacen el mismo trabajo, el valor de retorno sigue siendo diferente.

const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x) //>>>>>>>>>>>>>return value: undefined myAwesomeArray.map(x => x * x) //>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25] 

2. Capacidad para encadenar otros métodos

La segunda diferencia entre estos métodos de matriz es el hecho de que map()es encadenable. Esto significa que puede adjuntar reduce(), sort(), filter()y así sucesivamente después de realizar un map()método en una matriz.

Eso es algo con lo que no puedes hacer forEach()porque, como puedes adivinar, regresa undefined.

const myAwesomeArray = [1, 2, 3, 4, 5] myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value) //>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined myAwesomeArray.map(x => x * x).reduce((total, value) => total + value) //>>>>>>>>>>>>>return value: 55 

3. Mutabilidad

En general, la palabra "mutar" significa cambiar, alternar, modificar o transformar. Y en el mundo de JavaScript tiene el mismo significado.

Un objeto mutable es un objeto cuyo estado se puede modificar después de su creación. Por lo tanto, ¿qué pasa con forEachy mapen relación con la mutabilidad?

Bueno, según la documentación de MDN:

forEach()no muta la matriz en la que se llama. (Sin embargo, callbackpuede hacerlo).

map()no muta la matriz en la que se llama (aunque callback, si se invoca, puede hacerlo).

JavaScript es extraño .

Aquí vemos una definición muy similar y todos sabemos que ambos reciben callbackun argumento. Entonces, ¿cuál se basa en la inmutabilidad?

Bueno, en mi opinión, esta definición no es clara. Y para saber cuál no muta la matriz original, primero tenemos que comprobar cómo funcionan estos dos métodos.

El map()método devuelve una matriz completamente nueva con elementos transformados y la misma cantidad de datos. En el caso de forEach(), incluso si regresa undefined, mutará la matriz original con callback.

Por tanto, vemos claramente que se map()basa en la inmutabilidad y forEach()es un método mutador.

4. Velocidad de rendimiento

En cuanto a la velocidad de rendimiento, son un poco diferentes. Pero, ¿importa? Bueno, depende de varias cosas como su computadora, la cantidad de datos con la que está tratando, etc.

Puede comprobarlo por su cuenta con este ejemplo a continuación o con jsPerf para ver cuál es más rápido.

const myAwesomeArray = [1, 2, 3, 4, 5] const startForEach = performance.now() myAwesomeArray.forEach(x => (x + x) * 10000000000) const endForEach = performance.now() console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`) const startMap = performance.now() myAwesomeArray.map(x => (x + x) * 10000000000) const endMap = performance.now() console.log(`Speed [map]: ${endMap - startMap} miliseconds`) 

Pensamientos finales

Como siempre, la elección entre map()y forEach()dependerá de su caso de uso. Si planea cambiar, alternar o utilizar los datos, debe elegir map(), porque devuelve una nueva matriz con los datos transformados.

Pero, si no necesita la matriz devuelta, no use map(), en su lugar use forEach()o incluso un forbucle.

Con suerte, esta publicación aclara las diferencias entre estos dos métodos. Si hay más diferencias, compártalas en la sección de comentarios, de lo contrario, gracias por leerlo.

Leer más de mis artículos en mi blog

Foto de Franck V. en Unsplash