4 ms·
DOM APIs have much improved since jQuery first arrived, so while that was the case originally, it's become less true over time. It's definitely still less verbo
by sim0n 9y ago
DOM APIs have much improved since jQuery first arrived, so while that was the case originally, it's become less true over time. It's definitely still less verbose though, for example:
$('.my-component div').css({ background: 'yellow' })
vs.
Array.from(document.querySelectorAll('.my-component div')).map(node => {
node.style.background = 'yellow';
})
- scottmf 9y agoWhy use map instead of forEach?
- tvalentius 9y agoIf you only want to translate(map) each element in to another set of value, using Map is much more simpler and readable than forEach
- scottmf 9y agoThe code loops through an array, has side effects and returns nothing so forEach would be more descriptive IMO. As for simple/readable it’s the same code but s/map/forEach.
- grumblestumble 9y agoActually, this is incorrect. You're abusing map here. The purpose of map is to map an existing array onto a new array. You're using map here to mutate properties on nodes in the original array, and creating a new Array, which has the length of the initial array, where each value is the return value of `node.style.background = 'yellow';` forEach is much more indicative of what you're actually doing here, which is running through an iterable and mutating properties on each node. Simple rule of thumb: if you're not using the results of `map`, you shouldn't be using it.
- esprehn 9y agoThe modern DOM API has forEach on NodeList so you can skip the Array.from. document.querySelectorAll('.my-component div').forEach(node => node.style.background = 'yellow'); https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach https://developer.mozilla.org/en-US/docs/Web/API/NodeList/fo...