Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Beginner-friendly example of refactoring JavaScript to functional programming style
// See this blog post for full explanation:
// https://rebootjeff.github.io/blog/2015/12/11/example-refactoring-to-functional-js-combine-keyed-lists/
// Dependencies
var _ = require('lodash');
var R = require('ramda');
// Example input
var usersBySocialNetwork = {
twitter: [
{ name: '@RebootJeff' },
{ name: '@doitwithalambda' },
null
],
facebook: [
null,
{ name: 'Kevin' },
{ name: 'Bianca' },
]
};
// Expected output
var users = [
{ name: '@RebootJeff' },
{ name: '@doitwithalambda' },
{ name: 'Kevin' },
{ name: 'Bianca' }
];
// Original Solution
function combineKeyedArrays_v1(keyedArrays){
var flattened = [];
// produce a flat Array from an Object with values that are arrays
_.each(keyedArrays, function(array){
flattened = flattened.concat(array);
});
// only return the truthy elements of flat Array
return _.filter(flattened, function(element) {
return Boolean(element);
});
}
// Refactored using Lodash's Chain
function combineKeyedArrays_v2(keyedArrays){
return _.chain(keyedArrays)
.reduce(concatArray, [])
.filter(Boolean)
.value();
}
function concatArray(arr, val) {
return arr.concat(val);
}
// Refactored using Lodash's function composition
var combineKeyedArrays_v3 = _.flow(
_.values,
_.flatten,
_.compact
);
// Refactored using Ramda's function composition and currying
var combineKeyedArrays_v4 = R.pipe(
R.values,
R.unnest,
R.filter(Boolean)
);
// Possible type signatures for documentation purposes:
// Object<Array> --> Array (more old-fashioned)
// ...or...maybe...
// {k: [v]} --> [v] (similar to Ramda docs)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.