JavaScript: diferencia entre .forEach () y .map ()

Sé que hubo muchos temas como este. Y conozco lo básico: .forEach()funciona en la matriz original y .map()en la nueva.

En mi caso:

function practice (i){
    return i+1;
};

var a = [ -1, 0, 1, 2, 3, 4, 5 ];
var b = [ 0 ];
var c = [ 0 ];
console.log(a);
b = a.forEach(practice);
console.log("=====");
console.log(a);
console.log(b);
c = a.map(practice);
console.log("=====");
console.log(a);
console.log(c);

Y esta es la salida:

[ -1, 0, 1, 2, 3, 4, 5 ]
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
undefined
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
[ 0, 1, 2, 3, 4, 5, 6 ]

No puedo entender por qué el uso practicecambia el valor de ba undefined.
Lo siento si esta es una pregunta tonta, pero soy bastante nuevo en este idioma y las respuestas que encontré hasta ahora no me satisfacen.

No son lo mismo. Déjame explicarte la diferencia.

forEach: Esto itera sobre una lista y aplica alguna operación con efectos secundarios a cada miembro de la lista (ejemplo: guardar cada elemento de la lista en la base de datos)

map: Esto itera sobre una lista, transforma cada miembro de esa lista y devuelve otra lista del mismo tamaño con los miembros transformados (ejemplo: transformar la lista de cadenas a mayúsculas)

Referencias

Array.prototype.forEach () - JavaScript | MDN

Array.prototype.map () - JavaScript | MDN

• Array.forEach "Ejecuta una función proporcionada una vez por elemento de matriz".

• Array.map "Crea una nueva matriz con los resultados de llamar a una función proporcionada en cada elemento de esta matriz".

Entonces, en forEachrealidad no devuelve nada. Simplemente llama a la función para cada elemento de la matriz y luego está listo. Entonces, todo lo que devuelva dentro de esa función llamada simplemente se descarta.

Por otra parte, map llamará de manera similar a la función para cada elemento de la matriz, pero en lugar de descartar su valor de retorno, lo capturará y creará una nueva matriz de esos valores de retorno.

Esto también significa que puede usar mapdonde sea que esté usando, forEachpero aún así no debe hacerlo para no recopilar los valores de retorno sin ningún propósito. Es más eficiente no recolectarlos si no los necesita.

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | foreach | mapa |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Funcionalidad | Realiza una operación dada en cada | Realiza una "transformación" dada en |
| | elemento de la matriz | "copia" de cada elemento |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Valor devuelto | Devoluciones indefinidas | Devuelve una nueva matriz con transformado |
| | | elementos que dejan atrás la matriz original |
| | | sin cambios |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Preferible | Realización de no transformación como | Obtención de matriz que contiene la salida de |
| escenario de uso | procesamiento en cada elemento. | algún procesamiento realizado en cada elemento |
| y ejemplo | | de la matriz. |
| | Por ejemplo, guardar todos los elementos en | |
| | la base de datos | Por ejemplo, obtener una matriz de |
| | | longitudes de cada cadena en el |
| | | matriz |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

La principal diferencia que debe saber es que .map()devuelve una nueva matriz, mientras .forEach()que no. Es por eso que ves esa diferencia en la salida. .forEach()simplemente opera en todos los valores de la matriz.

Leer:

• Array.prototype.forEach()- JavaScript | MDN
• Array.prototype.map()- JavaScript | MDN

Es posible que también desee consultar: - Array.prototype.every()- JavaScript | MDN

forEach: si desea realizar una acción sobre los elementos de una matriz y es la misma que usa para el bucle. El resultado de este método no nos da una salida de compra, solo recorre los elementos.

map: si desea realizar una acción en los elementos de una matriz y también desea almacenar la salida de su acción en una matriz. Esto es similar al bucle for dentro de una función que devuelve el resultado después de cada iteración.

Espero que esto ayude.

La diferencia radica en lo que devuelven. Después de la ejecución:

arr.map()

devuelve una matriz de elementos resultantes de la función procesada; mientras:

arr.forEach()

devuelve indefinido.

Análisis de rendimiento Los bucles For funcionan más rápido que map o foreach a medida que aumenta el número de elementos en una matriz.

let array = [];
for (var i = 0; i < 20000000; i++) {
  array.push(i)
}

console.time('map');
array.map(num => {
  return num * 4;
});
console.timeEnd('map');


console.time('forEach');
array.forEach((num, index) => {
  return array[index] = num * 4;
});
console.timeEnd('forEach');

console.time('for');
for (i = 0; i < array.length; i++) {
  array[i] = array[i] * 2;

}
console.timeEnd('for');

Diferencia entre Foreach y mapa:

Map () : si usa map, map puede devolver una nueva matriz iterando la matriz principal.

Foreach () : si usa Foreach, entonces no puede devolver nada por cada lata que itera la matriz principal.

useFul link : use este enlace para comprender la diferencia

https://codeburst.io/javascript-map-vs-foreach-f38111822c0f

Una cosa a señalar es que foreach omite valores no inicializados mientras que map no lo hace.

var arr = [1, , 3];

arr.forEach(function(element) {
    console.log(element);
});
//Expected output: 1 3

console.log(arr.map(element => element));
//Expected output: [1, undefined, 3];

Diferencia entre forEach () y map ()

forEach () simplemente recorre los elementos. Elimina los valores devueltos y siempre devuelve indefinidos. El resultado de este método no nos da una salida.

map () recorre los elementos asigna memoria y almacena valores de retorno iterando la matriz principal

Ejemplo:

   var numbers = [2,3,5,7];

   var forEachNum = numbers.forEach(function(number){
      return number
   })
   console.log(forEachNum)
   //output undefined

   var mapNum = numbers.map(function(number){
      return number
   })
   console.log(mapNum)
   //output [2,3,5,7]

map () es más rápido que forEach ()

Map devuelve implícitamente mientras que forEach no lo hace.

Es por eso que cuando estás codificando una aplicación JSX, casi siempre usas map en lugar de forEach para mostrar contenido en React .

forEach () :

valor de retorno: indefinido

originalArray: modificado después de la llamada al método

mapa () :

valor de retorno: nueva matriz poblada con los resultados de llamar a una función proporcionada en cada elemento de la matriz de llamada

originalArray: no modificado después de la llamada al método