Home / Questions / 26508
Accepted
Alvaro Montoro
Asked: 2020-10-08 05:12:22 +0800 CST 2020-10-08 05:12:22 +0800 CST

for vs forEach vs map

  • 772

Working in JavaScript, I have two arrays that I need to combine to generate a concatenation of all their elements, for example:

var array1 = ["A", "B", "C"];
var array2 = ["1", "2", "3"];

resultado = ["A1", "A2", "A3", "B1", "B2", "B3", "C1", "C2", "C3"];

To do that I can think of 3 different methods: using the classic loop for, using the method forEach, or using the method map, in the following ways:

for

var array1 = ["A", "B", "C"];
var array2 = ["1", "2", "3"];

var resultado = [];
for(var x = 0; x < array1.length; x++) {
  for (var y = 0; y < array2.length; y++) {
    resultado.push(array1[x] + array2[y]);
  };
};

console.log(resultado);

forEach

var array1 = ["A", "B", "C"];
var array2 = ["1", "2", "3"];

var resultado = [];
array1.forEach(function(valor1) {
  array2.forEach(function(valor2) {
    resultado.push(valor1 + valor2);
  });
});

console.log(resultado);

map

var array1 = ["A", "B", "C"];
var array2 = ["1", "2", "3"];

var resultado = [];
array1.map(function(valor1) {
  array2.map(function(valor2) {
    resultado.push(valor1 + valor2);
  });
});

console.log(resultado);

All three methods traverse both arrays and with all three I get the same result (as you can see in the examples above). Now my questions:

  • What are the advantages/disadvantages of each method?
  • Is there one that should be used over the others? Or depending on the situation?
  • Is there a method that does something similar and is better (eg: more efficient or faster)
javascript

1 Answers

  1. Best Answer

    What are the advantages/disadvantages of each method?

    It's a pretty generic question. The classic forand the most modern forEachare basically the same. In fact, forEachit was born as a more modern alternative to the classic for(as in most languages). The use of foris more reasonable for doing a given number of iterations, while it forEachis for traversing collections. The advantage of foris that it is quite fast compared to forEach(although this one is not slow).

    Is there one that should be used over the others? Or depending on the situation?

    The answer is always it depends. As I said in the previous point, forand forEachalthough they can be used for the same things, the last one is mainly intended to traverse collections (hence its name).

    Map, on the other hand, is intended to iterate over a collection but with the goal of operating on that collection to return a new one from it. This algorithm works the same in languages ​​like Java.

    Is there a method that does something similar and is better (eg: more efficient or faster)

    To answer this question we can make a small benchmark comparing the different structures:

    • for
    • forEach
    • map
    • for in
    • for of

    performance test

    This simple performance test yields interesting results. It seems to mapbe faster than Gecko than Webkit by a considerable difference.forEach

    var array = [];
var runs = 100;

(function() {
  for (var i = 0; i < 100000; i++) array[i] = i;

  function runTest(name, f) {
      var totalTime = 0;
      console.time(name);

      for (var r = 0; r < runs; r++) {
          f();
      }
      return console.timeEnd(name);
  }

  function doNothing(v) { }

  runTest('for', function() {
      for (var i = 0; i < array.length; i++) {
          doNothing(array[i]);
      }
  });
  
  runTest('forEach', function() {
    array.forEach(doNothing);
	});
  
  runTest('for in', function() {
  	for(var i in array) {
    	doNothing(array[i]);
    }
  });
  
  runTest('for of', function() {
  	for(var i of array) {
    	doNothing(i)
    }
  });
  
  runTest('map', function() {
  	array.map(doNothing);
  })
})();

    Conclusions

    The latest versions of Firefox , Chrome and Edge , return the following:

    • Mapit is faster in Geckothan in all engines.
    • forIt is the fastest structure of all.
    • for init is the slowest structure of all.
    • forEachis faster than mapin Webkitand Chakra.
    • ChakraIt is the longest taking among the engines.
    • for oftakes about the same time as forEach.

    Obviously these results can vary between versions of engines / browsers, but I think the results are radical between them.

    • 18