JavaScript: diferença entre .forEach () e .map ()

Eu sei que houve muitos tópicos como este. E eu sei o básico:.forEach() opera na matriz original e .map()na nova.

No meu 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);

E esta é a saída:

[ -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 ]

Não consigo entender por que usar practicealtera o valor de bpara undefined.
Desculpe se esta é uma pergunta boba, mas sou muito novo nessa linguagem e as respostas que encontrei até agora não me satisfizeram.

Eles não são um e o mesmo. Deixe-me explicar a diferença.

forEach: Itera sobre uma lista e aplica alguma operação com efeitos colaterais a cada membro da lista (exemplo: salvar cada item da lista no banco de dados)

map: Isso itera sobre uma lista, transforma cada membro dessa lista e retorna outra lista do mesmo tamanho com os membros transformados (exemplo: transformar a lista de strings em maiúsculas)

Referências

Array.prototype.forEach () - JavaScript | MDN

Array.prototype.map () - JavaScript | MDN

• Array.forEach “Executa uma função fornecida uma vez por elemento da matriz.”

• Array.map “Cria uma nova matriz com os resultados da chamada de uma função fornecida em cada elemento desta matriz.”

Portanto, forEachnão retorna nada. Ele apenas chama a função para cada elemento do array e então está feito. Portanto, tudo o que você retornar dentro dessa função chamada é simplesmente descartado.

Por outro lado, map irá de forma semelhante chamar a função para cada elemento do array, mas em vez de descartar seu valor de retorno, ele irá capturá-lo e construir um novo array desses valores de retorno.

Isso também significa que você pode usar maponde quer que esteja, forEachmas ainda assim não deve fazer isso, para não coletar os valores de retorno sem qualquer propósito. É apenas mais eficiente não coletá-los se você não precisar deles.

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | foreach | mapa |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Funcionalidade | Executa determinada operação em cada | Executa determinada "transformação" em |
| | elemento da matriz | "cópia" de cada elemento |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Valor de retorno | Retorna indefinido | Retorna uma nova matriz com transformado |
| | | elementos deixando de volta a matriz original |
| | | inalterado |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Preferível | Executando não transformação como | Obtendo array contendo saída de |
| cenário de uso | processamento em cada elemento. | algum processamento feito em cada elemento |
| e exemplo | | da matriz. |
| | Por exemplo, salvar todos os elementos em | |
| | o banco de dados | Por exemplo, obtendo array de |
| | | comprimentos de cada string no |
| | | array |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

A principal diferença que você precisa saber é que .map()retorna uma nova matriz, enquanto .forEach()não retorna . É por isso que você vê essa diferença na saída. .forEach()apenas opera em todos os valores da matriz.

Leia:

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

Você também pode querer verificar: - Array.prototype.every()- JavaScript | MDN

forEach: Se você deseja executar uma ação nos elementos de um Array e é o mesmo que você usa para loop. O resultado desse método não nos dá uma saída, apenas um loop pelos elementos.

map: Se você deseja executar uma ação nos elementos de um array e também deseja armazenar a saída de sua ação em um Array. Isso é semelhante ao loop for dentro de uma função que retorna o resultado após cada iteração.

Espero que isto ajude.

A diferença está no que eles retornam. Após a execução:

arr.map()

retorna uma matriz de elementos resultantes da função processada; enquanto:

arr.forEach()

retorna indefinido.

Análise de desempenho Os loops For têm um desempenho mais rápido do que map ou foreach conforme o número de elementos em uma matriz aumenta.

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');

Diferença entre Foreach e mapa:

Map () : se você usar map, map pode retornar uma nova matriz iterando a matriz principal.

Foreach () : Se você usar Foreach, ele não poderá retornar nada para cada array principal de iteração.

link útil : use este link para entender a diferença

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

Algo a ser destacado é que foreach ignora os valores não inicializados, enquanto map não.

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];

Diferença entre forEach () e map ()

forEach () apenas percorre os elementos. Ele joga fora os valores de retorno e sempre retorna indefinido. O resultado desse método não nos dá uma saída.

map () percorre os elementos aloca memória e armazena os valores de retorno iterando o array principal

Exemplo:

   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 () é mais rápido que forEach ()

Map retorna implicitamente, enquanto forEach não.

É por isso que quando você está codificando um aplicativo JSX, quase sempre usa map em vez de forEach para exibir conteúdo no React .

forEach () :

valor de retorno: indefinido

originalArray: modificado após a chamada do método

mapa () :

valor de retorno: novo Array preenchido com os resultados da chamada de uma função fornecida em cada elemento do array de chamada

originalArray: não modificado após a chamada do método