Map and filter vs. reduce

by jcreamer898

HTML

<pre id="resultOne"></pre>
<pre id="resultTwo"></pre>

JavaScript

var things = [{
    first: 'jonathan',
    last: 'creamer'
}, {
    first: 'todd',
    last: 'motto'
}, {
    first: 'elijah',
    last: 'manor'
}];

var mappedAndFiltered = things.map(function(val) {
    return val.first;
}).filter(function(val) {
    return ~val.indexOf('j');  
});

var reduced = things.reduce(function(last, val) {
    if (~val.first.indexOf('j')) {
        last.push(val.first)        
    }
    return last;
}, []);

document.getElementById("resultOne").innerHTML = JSON.stringify(mappedAndFiltered, null, 4);
document.getElementById("resultTwo").innerHTML = JSON.stringify(reduced, null, 4);