for vs forEach vs. map

Question

for vs forEach vs. map

Navigation

#1 by (8 votes)

7

Working in JavaScript, I have two arrays that I need to combine to generate a concatenation of all its 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 map method, 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);

The three methods cross both arrays and with the 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 on the others, or depending on the situation?
Is there a method that does something similar and is better (eg, more efficient or faster)

javascript bucles

asked by Alvaro Montoro 07.10.2016 в 15:12

source

1 answer

Obtain age from the date of birth in Java CSS conditional on language

score 8 · Accepted Answer

What are the advantages / disadvantages of each method?

It's a pretty generic question. The classic for and the more modern forEach , are basically the same. In fact, forEach was born as a more modern alternative to the classic for (as in most languages). The use of for is more reasonable to make a number given of interactions, while forEach is to go through collections. The advantage of for is that it is quite fast compared to forEach (although this is not slow).

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

The answer is always dependent. As I said in the previous point, for and forEach although they can be used for the same things, the last one is thought mainly to go through colleges (hence the name).

Map , on the other hand, is designed to iterate a collection but with the aim of operating that collection to return a new 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 fast)

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. Apparently map is faster than forEach in Gecko than in Webkit by a considerable difference.

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 , show the following:

Map is faster in Gecko than in all engines.
for is the fastest structure of all.
for in is the slowest structure of all.
forEach is faster than map in Webkit and Chakra .
Chakra is the one that takes more time between the engines.
for of takes almost the same time as forEach .

Obviously these results may vary between engine / browser versions, but I think the results are radical among them.