Map - Filter - Reduce

by brnvndr

HTML

<h1>
Map - Reduce - Filter
</h1>

<hr />

<h2>
Basic Map
</h2>
<p>
    <label>Original</label>
    <span id="originalExample"></span>
</p>
<p>
    <label>For each:</label>
    <span id="foreachExample"></span>
</p>
<p>
    <label>Map:</label>
    <span id="mapExample"></span>
</p>
  
<hr />

<h2>
Chaining Map
</h2>

<p>
    <label>Chained: </label>
    <span id="chainedExample"></span>
</p>

<hr />
<h2>
Basic Filter
</h2>
<p>
    <label>Filtered Results:</label>
    <span id="filteredResults"></span>
</p>

<hr />
<h2>
Reduce
</h2>
<p>
    <label>Reduce Result:</label>
    <span id="reduceResult"></span>
</p>

<hr />
<h2>
Reduce - Return Array
</h2>

<p>
    <label>Reduce Array:</label>
    <span id="reduceArray"></span>
</p>

<hr />
<h2>
Complete Chaining Example
</h2>

<p>
    <label>Chaining Result:</label>
    <span id="chainingResult"></span>
</p>

JavaScript

var names = ["Brian", "Kit", "Mark", "Shane"];

document.getElementById("originalExample").innerHTML = names.toString();

// Iterative Method
var namesForEach = [];

for (var i = 0 ; i < names.length ; i++){
    namesForEach[i] = names[i].toUpperCase();
}

document.getElementById("foreachExample").innerHTML = namesForEach.toString();

// Functional / Map method:

// the function passed to map will be excuted for every member of names, so in this example
// it will be excecuted four times
var namesMapMethod = names.map(function(name){
    return name.toUpperCase();
});

document.getElementById("mapExample").innerHTML = namesMapMethod.toString();

var namesChained = names.map(function(name){
    return name.toUpperCase();
}).map(function(name){
    return name.replace('A', '@'); // note this map function run after the first, so search for A, not a
});

document.getElementById("chainedExample").innerHTML = namesChained.toString();

var filtered = names.filter(function(name){
    return (name.indexOf('a') > -1);
});

document.getElementById("filteredResults").innerHTML = filtered.toString();

var nameString = names.reduce(function(result, name){
    return result + name + "-";
}, ""); // the "" is the starting value of result

document.getElementById("reduceResult").innerHTML = nameString;

var reduceArray = names.reduce(function(array, name){
    array.push(name);
    array.push(name.toUpperCase());
    
    return array;
}, []); //notice the starting parameter is an initial array

document.getElementById("reduceArray").innerHTML = reduceArray.toString();

var chainingResult = names.filter(function(name){
    return (name.indexOf('a') > -1);
}).map(function(name){
    return name.toUpperCase();
}).reduce(function(result, name){
    return result + name + "-";
},"");

document.getElementById("chainingResult").innerHTML = chainingResult;