Map / Filter / Reduce in Javascript using Prototype

Links

official blog post and comments
source for this example
reduce extension for prototype

Introduction

Lets say we have following piece of HTML code <div class="test-div">some string</div> <div class="test-div">Foo!</div> <div class="test-div">Boo! 12</div> <div class="test-div">4</div> <div class="test-div">8</div> <div class="test-div">Foo FTW! </div> <div class="test-div">30</div> <div class="test-div" id="result">Reduce result here</div> And lets say we want to have 3 buttons that will trigger 3 different actions:
1 - convert text to bold in all elements
2 - select only string containing elements, and change their background
3 - select only integer containing elements, and write sum of them into last div

You are probably thinking about bunch of loops and if's, but things don't have to be that complicated, it can be all done without single loop! Those who use python are probably familiar with map/filter/reduce lambda functions, so why not use them in Javascript? And look, no loops or if's :). Whole script is so simple, easy to read and understand. Also keep in mind that i wrote this tutorial so you can understand ideas behind filter/map/reduce, i know that you can do a lot of things from this example in a different way, or even more simple, but idea is to make it really simple, so anyone could understand it. Also because of that i did not write whole code in OO javascript, but there is nothing stoping you to use map/filter/reduce with full blown OO JS code.

Demo

Click on the buttons to see results, read explanations below.

Reset All

Map explanation

Goal: apply function that converts text to bold
In order to use map function, we must make list of elements on which we want to apply that function. Then, we will map some other function to each element in the list.
here is how we map the function to all div elements with class test-div $$('div.test-div').map(setBold); and here is how the setBold function looks like function setBold(element){ $(element).setStyle({fontWeight:'bold'}); }

Filter explanation

Goal: select only string containing elements, and change theirs background
Filter function takes list of elements (same as map), apply some function to each element, and return only those elements for which applied function returns true. For example lets say we want to apply function that examines element content, and then apply filter to return elements with non-numeric content.

here is the simple function that checks for content, and hides element if it has numeric content: function hasStringContent(element){ var content=$(element).innerHTML; if(!parseInt(content)) return true; }

also, here is another simple function that just change background to the red for given element: function setBackgroundRed(element){ $(element).setStyle({background:'red'}); }

now, the fun part: we apply filter to the elements, and use setBackgroundRed function on remaining elements. var stringElements=$$('div.test-div').filter(hasStringContent); stringElements.map(setBackgroundRed); This example shows how prototype and map/filter/aproach can simplify your life, there is no loops, if's and code looks much cleaner and

Reduce explanation

Goal: select only integer containing elements, and write sum of them into last div
Surprisingly, in order to achieve this goal, we don't need any loops or control structures, it can be all done using map/filter/reduce approach

But first, lets talk about reduce. Lets see how reduce behaves in comparison to map and filter:

Map - takes list of elements, and applies given function to every element and returns an list with the results.
Filter - takes list of elements, applies given function to every element, and returns those elements for which function returns true.
Reduce - takes list of elements, applies given function of two arguments to the two elements in the list, from left to right, until it reduces the list to a single element.
for example, if we have array [1,2,3,5] and call reduce(sumItems) on it, where sumItems is function(a,b){return a+b; } result will be 11;

Here is the actual code that we use to achieve our goal all that: var numbers=$$('div.test-div').filter(hasIntContent); numbers=numbers.map(ContentToInt); var sum=numbers.reduce(doSum) $('result').update(sum);

Lets examine what is happening here, so we can understand how this code works.
Line 1 - we fetch an array of div elements that have integers for a content, and we put them into variable numbers.
Line 2 - now, we use map function to convert list of HTML div objects into array of numbers that they hold
Line 3 - now we can do actual reduce, so we call doSum function on whole list, we assign result of reduce to the sum variable
Line 4 - write result into last div

Reduce Prototype.js extension

map and filter functions are supported by prototype, but in order to use reduce we must add following code Enumerable.reduce=function(iterator){ list=this; last = new Object(); if(list.length <= 1) return; if(list.length == 2) return iterator(list[0],list[1]); last = list[0]; for(var li = 1;li < list.length;li++){ last = iterator(last,list[li]); } return last; } Object.extend(Array.prototype, Enumerable);

I hope you enjoyed this tutorial, for questions and comments please visist official blog post and comments page.
Thanks.