About a year ago, some colleagues and I paired up on creating our own functions instead of using a library to keep the bundle size down. While one option is to use , we figured we could reduce it even further by doing away with some of the scaffolding and boilerplate that comes along with it, and I had an idea I really wanted to try out. This is the story of how I experimented with native Javascript and flipped it inside out to a more functional paradigm, and had a functional mini-library of around 500 bytes. tree-shaking Its starts with a scenario in which I dream up many of my ideas, while I was driving home. As I traveled down the interstate the thought occurred to me, “What if we created an Object that just intrinsically used the already existing Array methods, but it had currying and could use pipe and compose!” I mean, all of the common functions are widely available — like , , , and so on. The only thing I really wanted to do is to somehow “borrow” their already optimized functionality, not rewrite them. map reduce filter I also figured that the only functions that we didn’t have that I really wanted and to make it all work would be and — which would be really the only “non-native” functions in our toolbox for this experiment. pipe compose Creating the “whitelist” Since Javascript’s object has all of the functions I needed, I figured I could pluck them out. To do that, I created a “whitelist” of functions I wanted from the Array Object: Array = ['concat', 'every', 'filter ', 'find ', 'includes', 'keys', 'map', 'reduce ', 'reduceRight', 'slice', 'some'] const whitelist Alright! So after perusing the MDN docs, and paying no mind at all to browser compatibility I sought to “invert” (maybe wrong term here) the functions so that they would be , so you could do stuff with them using a function like or (at least not YET anyway!) curry-able compose pipe The trick was to create a new Object, and plop the Array’s prototype methods directly onto it. The first name I came up with (which has been renamed a few times since) was which was inspired by Box Dr. Boolean’s series on egghead It would also use from , see if any of the methods are available on the that match the whitelist, and if they were there, make them part of the Object. getOwnPropertyNames Array.prototype prototype Box This would allow for methods to just be as they already are: — So if someone wanted to consume this Object, they were not getting anything really new, just a different way of using the same functions they already have. If you needed some additional browser support you could just add the and add the — which I just thought was a neat idea to go about it! unsupported undefined polyfill then Box const Box = {}Object.getOwnPropertyNames(Array.prototype).filter(s => whitelist.includes(s)).forEach(method => {Box[method] = fn => a => a[method](fn)}) So now the only thing left was to add pipe and compose: (special thanks to for writing these handy ones) Ronn Ross Box.compose = (...fns) => data => fns.reduce((value, fn) => fn(value), data)[0]Box.pipe = (...fns) => data => fns.reverse().reduce((value, fn) => fn(value), data) module.exports = Box Alrighty, so to put this entire functional powerpack together, at a very tiny size of something around 500 bytes you have: // Let's pluck these methods off of Array.prototypeconst whitelist = ['concat', 'every', 'filter ', 'find ', 'includes', 'keys', 'map', 'reduce ', 'reduceRight', 'slice', 'some'] // We'll put them on a container Objectconst Box = {} // So if any of the methods exist, we add them, if not, we just move on.Object.getOwnPropertyNames(Array.prototype).filter(s => whitelist.includes(s)).forEach(method => {Box[method] = fn => a => a[method](fn)}) // We'll create two functions that are our own for making things compositionalBox.compose = (...fns) => data => fns.reduce((value, fn) => fn(value), data)[0]Box.pipe = (...fns) => data => fns.reverse().reduce((value, fn) => fn(value), data) module.exports = Box Pretty cool! So how do you use the compose and pipe functions? here’s an example using compose compose(// 42reduce((acc, val) => val + acc),// [12, 14, 16]map(x => x * 2),// [6, 7, 8]filter(x => x > 5),// [0, 1, 2, 3, 4, 5, 6, 7, 8],concat([6, 7, 8])// [0, 1, 2, 3, 4, 5])([1, 2, 3, 4, 5]) So that contrived example creates a function that we pass an array of [1, 2, 3, 4, 5] into it. The function then passes the arguments along from right to left (as compose works) — resulting in 42 :) If we wanted to read it from left to right, we could use pipe: pipe(map(x => x + 1),// [1]map(x => x + 1),// [2]map(x => x + 1),// [3])([0]) Like the compose method, this pipe method creates a function that takes the paramater , which is then *piped* from left to right, incrementing it by one as it goes. [0] You could do some fancier things with this, and you dont necessarily need to use pipe and compose, you could make a function called which is basically a curried function that adds two to the parameter, again using our functionalized array methods: addTwo const arrayOne = [1, 2, 3];const addTwo = concat([4, 5])const result = (addTwo(arrayOne)) console.log(result)// [1, 2, 3, 4, 5] I’m hoping someone finds this useful, because you really can do functional programming with javascript without a library! That being said, a library gives you extra functionality, and backwards compatibile support. You can even use tree-shaking to reduce the bundlesize, so I can’t say it enough, if you want to use a library please do so. But, you just might find this interesting! and iterated over it quite a bit, fixing bugs/etc. We also added string support. The library we ended up with is called pico-lambda, check it out (especially its source code, its tiny!), it also has a ton of unit tests and they run in browserstack across the major browsers too. We did end up turning this experiment into a library, After it was all said and done, and we worked out edge cases and fixed bugs, added strings to the mix, we ended up with a slightly bigger “Box” Object.getOwnPropertyNames(Array.prototype).reduce((lambda, method) => {lambda[method] = (~['concat', 'every', 'filter', 'find', 'findIndex', 'includes', 'join', 'map', 'reduce', 'reduceRight', 'slice', 'some'].indexOf(method))? (fn, ...params) => arr => arr[method](fn, ...params): (~['sort', 'copyWithin', 'fill'].indexOf(method))? (...params) => arr => [...arr][method](...params): (~['toLocaleString', 'indexOf', 'lastIndexOf'].indexOf(method))? (...params) => arr => arr[method](...params): (~['push', 'splice'].indexOf(method))? (...params) => arr => { var t = [...arr]; t[method](...params); return t; }: (~['toString', 'entries', 'keys'].indexOf(method))? arr => arr[method](): lambda[method]; ...full source here Thanks for reading, if you like this please clap and follow me. Also leave a comment if you’d like to share your thoughts or have any questions! ❤
