Table of Contents
Introduction 1.1
Everything is Reducible 1.2
Define Composition 1.3
Redefine Map 1.4
Redefine Filter 1.5
Composing Map & Filter 1.6
Transducers 1.7
1
Introduction
Advanced Functional JavaScript
Collection of code snippets to showcase functional aspects of JavaScript
Fun with Functions
1. Everything is Reducible
Reducer Function signature
length of an array
reverse an array
loop thru an array
2. Define Composition
3. Redefine map in different ways
classical map
map as a Reducing Function
map without dependency on input array
map without dependency on array behavior
4. Redefine filter in different ways
classical filter
filter as a Reducing Function
filter without dependency on input array
filter without dependency on array behavior
5. Compose Map & Filter
classical map ⋅ filter combo
map ⋅ filter as a Composable Reducing Function
6. Transducers
recap map & filter w/o dependencies
create mapping & filtering transducers
compose mapping & filtering transducers
use mapping & filtering transducers as Reducing Functions
2
Everything is Reducible
Reducer Function signature
A Reducer Function takes inputs as ( current state , action ) and computes
the next state to return back.
var genericReducerFn = (current_state, input) => next_state;
Example identity reducer shown below returns the same state.
function identity(current_state, action) {
var next_state = current_state;
return next_state;
};
/*---OR---*/
var identity = (current_state, action) => current_state;
Reducer Functions are powerful because they can be passed to a generic
reduce aggregator along with an initial state and a set of actions to
compute the final state
[actions].reduce(reducerFn, initial_state);
//-> final_state
Length of an array
var lengthReducer = (current_length, item) => current_length + 1
;
[4, 3, 2, 1, 0].reduce(lengthReducer, 0);
//-> 5
Reverse an array
3
Everything is Reducible
var arrayPrepender = (current_array, item) => {
var new_array = current_array.slice();
new_array.unshift(item);
return new_array;
};
[1, 2, 3, 4].reduce(arrayPrepender, [ ]);
//-> [4, 3, 2, 1]
Loop thru an array
var looper = (current_state, action) => console.log(action);
[2, 4, 6].reduce(looper, null);
/* 2
* 4
* 6
*/
4
Define Composition
compose(. . .)
compose(h,g,f)(x) = h(g(f(x)))
/**
* usage:
* let inc_one = (x) => x + 1;
* let inc_two = (x) => x + 2;
* let inc_three = compose(inc_one, inc_two);
* inc_three(5); //-> 8
*/
function compose() {
var argsOuter = arguments;
return function() {
var arg = arguments;
var out = undefined;
for(var i = argsOuter.length-1; i >= 0; i--) {
if (out === undefined) {
out = argsOuter[i].apply(null, arg)
} else {
out = argsOuter[i].call(null, out);
}
}
return out;
}
}
let div_by_three = (x) => x/3;
let div_by_five = (x) => x/5;
let div_by_fifteen = compose(div_by_three, div_by_five);
div_by_fifteen(2);
//-> 0.13333333333333333
5
Define Composition
6
Redefine Map
Classical map
[1, 2, 3].map(x => x+1);
//-> [2, 3, 4]
map as a Reducing Function
var map = (fn, arr) => {
return arr.reduce(function(accumulator, input) {
let a = accumulator.slice();
a.push(fn(input));
return a;
}, [ ]);
};
map(x => x+1, [1, 2, 3]);
//-> [2, 3, 4]
Remove map dependency on array input
var map = (fn) => {
return (accumulator, input) => {
let a = accumulator.slice();
a.push(fn(input));
return a;
};
};
[1, 2, 3].reduce(map(x => x+1), [ ]);
//-> [2, 3, 4]
Remove map dependency on accumulator
behavior
7
Redefine Map
var map = (fn) => {
return (reducer) => {
return (accumulator, input) => {
return reducer(accumulator, fn(input));
};
};
};
var arrayConcat = (arr, item) => {
let a = arr.slice();
a.push(item);
return a;
};
[1, 2, 3].reduce(map(x => x+1)(arrayConcat), [ ]);
//-> [2, 3, 4]
8
Redefine Filter
Classical filter
[1, 2, 3, 4].filter(x => x%2 === 0);
//-> [2, 4]
filter as a Reducing Function
var filter = (predicate, arr) => {
return arr.reduce(function(accumulator, input) {
let a = accumulator.slice();
if(predicate(input)) {
a.push(input);
}
return a;
}, [ ]);
};
filter(x => x%2 === 0, [1, 2, 3, 4]);
//-> [2, 4]
Remove filter dependency on array input
var filter = (predicate) => {
return (accumulator, input) => {
let a = accumulator.slice();
if(predicate(input)) {
a.push(input);
}
return a;
};
};
[1, 2, 3, 4].reduce(filter(x => x%2 === 0), [ ]);
//-> [2, 4]
9
Redefine Filter
Remove filter dependency on accumulator
behavior
var filter = (predicate) => {
return (reducer) => {
return (accumulator, input) => {
return predicate(input)?
reducer(accumulator, input):
accumulator;
};
};
};
var arrayConcat = (arr, item) => {
let a = arr.slice();
a.push(item);
return a;
};
[1, 2, 3, 4].reduce(filter(x => x%2 === 0)(arrayConcat), [ ]);
//-> [2, 3, 4]
10
Composing Map & Filter
Classical map & filter
[1, 2, 3, 4].map(x => x+1).filter(x => x<4);
//-> [2, 3]
Compose map & filter using new definitions
var mapFilter = compose(
map(x => x+1),
filter(x => x<4)
);
function arrayConcat(arr, item) {
arr.push(item);
return arr;
};
[1, 2, 3, 4].reduce(mapFilter(arrayConcat), [ ]);
//-> [2, 3]
11
Transducers
Transducers
Mapping & Filtering functions defined with no array behavior dependencies
can be called transducers.
We can easily compose mapping & filtering transducers and use them as
Reducing Functions
Recap map & filter without dependencies
var map = (fn) => {
return (reducer) => {
return (accumulator, input) => {
return reducer(accumulator, fn(input));
};
};
};
var filter = (predicate) => {
return (reducer) => {
return (accumulator, input) => {
return predicate(input)?
reducer(accumulator, input):
accumulator;
};
};
};
Create mapping & filtering transducers
var mappingTransducer = map(x => x+1);
var filteringTransducer = filter(x => x<4);
12
Transducers
Compose mapping & filtering transducers
var mapFilterTransducer = compose(
mappingTransducer,
filteringTransducer
);
Use mapping & filtering transducers
function arrayConcat(arr, item) {
arr.push(item);
return arr;
};
[1, 2, 3, 4].reduce(mapFilterTransducer(arrayConcat), [ ]);
//-> [2, 3]
References
Transducers are coming
CSP and transducers in JavaScript
Transducers.js: A JavaScript Library for Transformation of Data
13
