JSFiddle - React, Tailwind, and code Playground
HTML
<div id="output"></div>
JavaScript
var outputArea = document.getElementById('output');
var output = function(text) {
outputArea.innerHTML += '<div>' + text + '</div>';
};
var map = function(cb, seq) {
var ret = [];
for(var i = 0, len = seq.length; i < len; i++) {
ret.push(cb(seq[i], i));
}
return ret;
};
var filter = function(cb, seq) {
var ret = [];
for(var i = 0, len = seq.length; i < len; i++) {
var item = seq[i];
if(cb(item, i)) {
ret.push(item);
}
}
return ret;
};
var reduce = function(cb, seq) {
var ret = seq[0];
for(var i = 1, len = seq.length; i < len; i++) {
ret = cb(ret, seq[i]);
}
return ret;
};
var _ = function(seq) {
var value = seq;
var funcs = {
map: map,
filter: filter,
reduce: reduce
};
var wrappedFuncs;
var wrapFunctions = function() {
var ret = {};
var addFunction = function(name, func) {
ret[name] = function() {
value = func.call(this, arguments[0], value);
return wrappedFuncs;
};
};
for(var name in funcs) {
var func = funcs[name];
addFunction(name, func);
}
ret.val = function() {
return value;
};
return ret;
};
wrappedFuncs = wrapFunctions();
return wrappedFuncs;
};
var input = [2, 4, 23];
output('"chaining" demo');
output('<br\>Input: ' + input);
var mulBy = function(i) {
return function(v) {
return v * i;
};
};
var lessThan = function(i) {
return function(v) {
return v < i;
};
};
output('<br\>Mul by two and filter items less than ten');
var result = _(input).map(mulBy(2)).filter(lessThan(10)).val();
output('<br\>Result: ' + result);