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?
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?
3 Answers
Reset to default 7forEach 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)
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.
forEach - only iterates the array elements.
map - iterates the array elements and returns a new array. for example..
var temp = [].map.call(document.querySelectorAll('div'), function(e){
return e.id;
// do something
})
temp is new array having id of all div elements;