JavaScript Map-Reduce – Simple Reduce Example

[1,2,3,4].reduce(function(lastReturn, currentCell, index, array){
  return lastReturn + currentCell;
});

outputs:

10

the idea is that you’ll be travelling along the array, but will keep maintaining a return result along the way,
each iteration may return a result, which will be stored in the lastReturn (in the example above), so you’ll might want to chain any math calculation, which will be eventually be returned as the lastReturn of the callback, in this case a single number.

at the first time running naturally the lastReturn will be undefined, so using ‘+’ (in math) will be treated as 0.

here is another example, but now, let us work with some DOM objects:
walking on all the elements, that has href with value (meaning non-empty href), lets find the with as much characters in its href-URL.

Array.prototype.reduce.call(document.querySelectorAll('a[href]:not([href=""]'), function(lastReturn, currentCell, index, array){
  return (index === 1) ? currentCell : //handling first case, where lastReturn is undefined...
    currentCell.href.length > lastReturn.href.length ? currentCell : lastReturn;
});

on my website it will probably return something like this..
<a href="http://icompile.eladkarako.com/javascript-code-segment-piggybackdata-the-proper-object-oriented-way-to-overcome-known-problem-of-callback-hell-and-chained-callbacks-with-single-data-parameter/" rel="bookmark" title="Permanent link to this post">JavaScript Code-Segment: PiggybackData : The Proper Object-Oriented Way to Overcome Known Problem Of "Callback-Hell" And Chained Callbacks With Single Data Parameter</a>
 

better than a loop? Yes!
Browser’s JS-engines (especially SpiderMonkey and V8) will implement map/reduce in a more efficient way then normal “free-written-loops” (for and while), the rule of thumb is simple “always prefer using predicted-behavior methods (iterated prototypes)”

Leave a Reply