性能差异（map（），forEach（），for（））

Question

Recently I had some issues using built-in map() function on array in JavaScript, which I managed to solve by using standard for loop. I've look through posts on StackOverflow to find out where is the difference between those two methods (and forEach() which I tested just for sake of it). I understand that map() is creating a new array by executing the function provided, whereas forEach() (and I believe for as well) are not creating a new array.

Could anyone please explain where is the difference in how the functions are executed?

Tested scenario: Frontend in ReactJS receives data from the backend over http request. The received data contains array of objects, where one property is image in base64 string. I defined the function which converted each image to image object (using Jimp), inverted the color, change to base64 and saved back in the array as JSX object to be displayed on the page. Three version of code looked as followed:

FOR LOOP:

            console.log("before for");
            for(n of result) {
                console.log("inside for ", counter);
                await this.processImage(n, counter++);
            }
            console.log("end for");
            this.setState(() => {
                console.log("Rendered");
                return {
                    rows: result
                }
            })

FOREACH():

            console.log("before foreach");
            result.forEach(async (n) => {
                console.log("inside foreach ", counter);
                await this.processImage(n, counter++);
                counter++;
            })
            console.log("end foreach");
            this.setState(() => {
                console.log("Rendered");
                return {
                    rows: result
                }
            })

MAP():

            console.log("before map");
            result.map(async (n) => {
                console.log("inside map ", counter);
                await this.processImage(n, counter++);
                counter++;
            })
            console.log("end map");
            this.setState(() => {
                console.log("Rendered");
                return {
                    rows: result
                }
            })

I included the console.logs in the code above to show how I was testing the execution of the code. In each scenario what I got was (before, inside x3, end, rendered) in the same order. Unfortunately, map() and forEach() didn't perform the whole image processing and what I could see on the page instead of an image was super-long string. The for loop didn't fail a single time.

I understand in this situation I probably don't need to use map() as I don't have to create a new array. I would still like to know why the result was not always guaranteed, so I can avoid issues in the future.

I want to properly understand how those functions work, so I can use them correctly in the future. The documentation I read on is not very clear to me, I hope you guys can help!

Thanks

Answer 1

By using an async function inside .map and .forEach you fire and forget the asynchronous action, which means that you won't know when it finished. The async function does however return a Promise, and if you use .map you could collect them in an array, call Promise.all on that and await that:

await Promise.all(result.map(async (n) => {
   console.log("inside map ", counter);
   await this.processImage(n, counter++);
   counter++; // why increase counter twice?
}));
// all processings are guaranteed to be done

This will execute all the processing in parallel , which is probably (way) faster than processing sequentially which you'd do with the for loop. Using a .forEach you aren't able to wait for all results to arrive, and therefore you probably don't want to use it in most cases.

---

If you arent doing asynchronous things, for and .forEach would behave nearly equal, except for arrays with empty slots ( .forEach skips empty slots):

for(const el of Array(3)) 
  console.log(el); // logs undefined three times

Array(3).forEach(console.log) // silence

.map behaves like .forEach just that it builds up an array with the returned values, just as you said.