What is the difference between foreach and map in Javascript?

Asked

Viewed 1,052 times

7

const arr = [1, 2, 3, 4, 5]

arr.forEach(i => i);

arr.map(i => i);

I’d like to understand the difference between the methods forEach and map in Javascript.

javascript array
  • 1

    duplicate? https://answall.com/questions/169270/qual-a-diff%C3%A7a-do-foreach-do-angular-e-a-fun%C3%A7%C3%A3o-map-do-javascript

  • 1

    @Anittadeveloper and Augusto - I almost indicated this duplicate too, but I saw that she talks about the angular.forEach, which, although similar, is not exactly the same as forEach Javascript native: https://stackoverflow.com/a/39212839 - Although the general operation is the same for arrays, I thought it best to answer instead of indicating the duplicate...

  • 1

    @Anittadeveloper is not duplicate, the Array.prototype.forEach() is completely different from angular.forEach()

  • 1

    I’m withdrawing my vote to close because hkotsubo and Arthur Siqueira are right.

  • Does this Answer your Question? What is the difference between the angular foreach and the javascript map function

2 answers

10


forEach serves to traverse the array and do something with its elements. But this "something" does not necessarily need to return something (so much so that the his return is undefined). Ex:

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

// só imprime o dobro dos elementos (não retorna nenhum valor)
arr.forEach(e => console.log(e * 2));

At the bottom the code above is just a different way of making a for traditional:

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++)
    console.log(arr[i] * 2);

map, in turn, does some operation with each element, and returns another array containing the result of this operation:

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

// gera outro array contendo o dobro de cada elemento
const dobros = arr.map(e => e * 2);

console.log(dobros); // [2, 4, 6, 8, 10]

Obviously map need to go through the array in order to execute the operation and generate a new array containing the results, but use it only to go through the array is a "crooked use".

  • 2

    When an answer comes up, there’s always someone faster than me.

  • 2

    @Augustovasques I got lucky, I got on the site and I ran into the question :-)

  • 2

    @hkotsubo I lost time with references hehehehe ;p

6

According to the mozilla website:

The method map() invokes the function callback passed by argument to each Array element and returns a new Array as a result.

[...]

The map method does not modify the original array. However, the callback function invoked by it can do so.

Yet according to the same:

The method forEach() executes a given function on each element of an array.

In summary, the method Array.prototype.map() returns a new vector with the generated modifications, while the Array.prototype.forEach() performs the functions in the original vector (so much so that forEach() returns undefined).

For didactic functions, I will recreate the functioning of both functions below.

The function forEach can be "translated" as:

function forEach(vetor, funcaoCallback){
    for(let x = 0; x < vetor.length; x++){
        funcaoCallback(vetor[x]);
    }
}

While the function map() can be "translated" as:

function map(vetor, funcaoCallback){
    let ans = [];
    for(let x = 0; x < vetor.length; x++){
        ans.push(funcaoCallback(vetor[x]));
    }
    return ans
}

Both have other differences, such as speed, and other technical aspects, as seen in the links below:

Browser other questions tagged javascript array

You are not signed in. Login or sign up in order to post.