$(...)..map(...).reduce is not a function

Question

I'm trying to calculate the sum of the height of a couple elements in the page using map & reduce. For unknown reasons this is throwing me the following exception:

VM52933:2 Uncaught TypeError: $(...).map(...).reduce is not a function(…)

$('.items')
    .map( (index,slide) => $(slide).height() )
    .reduce( (prev, next) => prev + next, 0 )

.map returns a valid array:

[48, 48, 48, 75, 48]

If i do the map separately ( [48, 48, 48, 75, 48].reduce(...) ) it works. What am I doing wrong here?

Answer 1

It is because you are when you do $('.items') its an array like structure but not array. If you see the prototype it dof NodeList type ad it doesn't have reduce method on it. If you pass this from Array.from then it will convert it to proper array and you will be able to apply reduce, map and all the other array functions.

More details can be found at

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

do something like

Array.from($('.items'))
.map( (slide) => $(slide).height() )
.reduce( (prev, next) => prev + next, 0 );