array.forEach.call vs array.map.call

Question

To loop over the results of querySelectorAll in JavaScript, is one of the following more preferable than the other?

[].forEach.call(document.querySelectorAll('div'){
  // do something
})

[].map.call(document.querySelectorAll('div'){
  // do something
})

Essentially, I'm wondering if these each achieve the same result of providing access to each dom element returned from querySelectorAll. If so, what are reasons one might want to use one over the other?

Answer 1

forEach operates on the original array elements. (If you want just iterate over all element you should use forEach)

map is running through your array, applying a function to each element, and emitting the result as a new array. (if you want to apply some changes to each element you should use map)

Answer 2

There is a subtle difference in which elements will be looped over between map and forEach. If the element in the array is undefined, it will not be invoked in map, but it will be invoked on forEach.

Obviously this distinction does not apply in the case of querySelectorAll, which will never return undefined in its results.

So the only difference between them is that of what the function returns. forEach has no return value. map executes a function on each member of the array and returns the results. So, for instance, you could do this:

var values = [].map.call(document.querySelectorAll('input'), function(el) {
    return el.value;
});

This will return an array containing the value of every element selected by querySelectorAll('input').

So you should use map when that's what you want; otherwise, use forEach.

NB that Array.prototype.every and Array.prototype.some also exist; there may be times when they would be more appropriate.