Forem: John

Whose afraid of the that big bad wolf?

John — Thu, 18 Jul 2019 17:05:59 +0000

Welcome to fantasy land, this post is about that big bad wolf, the monad. More specifically, about a monad called Maybe. There are other types of monads; for instance, the Either and IO monads which have been developed to deal with different circumstances within computer programs.

Why big bad wolf? Well, monads can be a bit scary; it's not, how would you say, idiomatic in JavaScript.

So this word monad, if you search the internet, is connected with phrases such as:

"Once you finally understand monads, you lose the ability to explain monads to others."

and...

"A monad is just a monoid in the category of endofunctors, what's the problem?"

It turns out that these comments about monads are, of course, jokes to make fun about the difficulty people have with explaining monads to others. You kind of get the feeling your in for a hard time with the monad, even before you start!

So, if you are venturing down that "rabbit hole" into the fantasy land of abstract data types(ADT's) then I hope that I can give you some idea about the concept of a monad without needing to dive into category theory, or telling you that you must learn Haskell before you can understand a monad.

In this post I hope that, for the newcomer(and let's face it, we are all newcomers at something), I can show you a "bridge" between your present JavaScript knowledge and the use of the Maybe monad in your code. The only prerequisite is that you are familiar with JS Array methods, mainly .map() and the JS Promise object; additionally, I assume you have used functional composition and currying using es2016 function expressions.

So what is a monad

A monad is an object that wraps a value in a context. Let's explain that in terms that a JS programmer should be familiar with.

Here is an analogy; an Array, as we know, is a collection of elements, like this:
[0, 1, 2, 3, 4, 5]

Here is an Array of only one element.


const  M  = [2]

M is a wrapped value; it has a context. The context is the Array. Array has a large number of methods that it provides.


//  Stay with me I just need to set up some functions to work with...
const log = console.log
const sq = n => n * n

// add - a curried version of the add function.
const add = a => b => a + b

// a new function made by partially applying the add function.
const add10 = add(10)

log(typeof add10)
// => function

// OK let's continue...
// we can "map over" this wrapped value ie. apply a function to the value
// to transform it to another value.

const result = M
    .map(add10)
    .map(sq)

log(result)
// => [ 144 ]

// [144], this result may not be what you want, it is still wrapped.
// So in JS, the way to get at the value is .pop()

log(result.pop())
// => 144

So what has the ability to .map given us? It has given us a way to transform a value by applying functions to the value and then, repeatedly, doing the same thing again. This is not function composition as such, but value transformation.

Incidentally, an object with a .map method is referred to as a functor. So an Array is a functor. Also, a monad is a functor; and more. At this stage if you are still not quite sure what I am going on about then this might help by giving a pictorial view of what is happening.

So what exactly did happened in the code above? These are the steps:

a wrapped value([2]) was mapped over by taking the value 2 out of the Array context and applying the function(add10) to the value
the result of the function application(12) was then wrapped back into the Array context
the next .map was treated in the same way unwrap 12, apply function sq, value is now 144, wrap it back into the Array.

Let's make a function, using a similar approach to the above, but operating on a String value.


const  exclaim  =  s  =>  s  +  '!'
const  exclaimWorld  =  val  =>
    // .of lifts the value into the Array
    Array.of(val)
      .map(s  =>  s.concat(' World'))
      .map(exclaim)
      .pop()



// ...and call it.

log(exclaimWorld('Dave\'s'))

// => Dave's World!

Well, this is all very fine and dandy, but what if that value is'nt there. Then what?


const  o  = {
  val:  "Hello",
  nil:  null,
  udef:  undefined
}

log(exclaimWorld(o.val))
// => Hello World!

// - OK, good it worked because the value passed in is a value.

// Now watch carefully...

log(exclaimWorld(o.udef))
// => TypeError: Cannot read property 'concat' of undefined.

BOOM! our program is dead, now we need that Maybe! We cannot do undefined.concat(value); this is the problem.

Yes, we need that Maybe, but first, let's look at one more analogy; this time using an object JS programmers should know about, the Promise object.

I will call this pMaybe to distinguish it as being derived using a Promise. Please note that this is just for training purposes to show the similarity of a Maybe to another common object in JS. We have seen that Array gives us one property of a Maybe; the ability to .map over a value applying whatever function to the value as required ie. Maybe is a functor. But fails to provide protection against undefined/null situations. The Promise, however, allows us to follow one of two paths that is normally called resolve and reject, but here I rename them Just and Nothing. Yes, I am slightly abusing the normal use case for the Promise, but it will hopefully aid our understanding.


const  pMaybe  =  val  =>
  new  Promise(
    (Just, Nothing) => {
      if (val  ===  undefined  ||  val  ===  null) Nothing(val)
      Just(val)
})

const pExclaimWorld = s =>
  pMaybe(s)
    .then(s  =>  s.concat(' World'))
    .then(exclaim)
    .then(s  =>  console.log(s))
    .catch((e) =>  console.log(`You passed in ${e} this is a likely cause of error!`))

pExclaimWorld(o.val)
// => Hello World!

pExclaimWorld('Brian\'s')
// => Brian's World!

pExclaimWorld(o.udef)
// => You passed in undefined this is a likely cause of error!


// to make our code more composable we need some curry! Here's a curry function

const  curry  =  f  => (...args) =>
  args.length >=  f.length
    ?  f(...args)
    :  curry(f.bind(undefined, ...args))


// a prop function
const  prop  =  curry((k, o) =>  o[k])

// Another example

const  add10ToAge  =  personO  =>
  pMaybe(personO)
    .then(prop('age'))
    .then(add(10))
    .then(result  =>  console.log(result))
    .catch(e  =>  console.log(`Nothing , check your input`))

add10ToAge({ name:  'Dinah', age:  14 })

// => 24


// Note: The results from the above will appear later in the output
// because of the effect of the Promise.

Now you see this time our code does not err. The potential threat of undefined on our code is mitigated by the .catch() and a undefined or null is handled with a friendly response. This has a severe limitation though and that is the undefined/null checking only happens on the initial lifting of the value into pMaybe. If a null or undefined is generated as a result of any of the following .then calls it will not produce a Nothing ...and that's not good. To see this in action change the 'age' prop to 'ag', which is not a property on the passed in object. It now will return Just(NaN). What we really wanted is Nothing, indicating the code failed due to undefined.

By now I am hoping that you are getting the idea about the Maybe monad. I have tried to relate it to something that a JS coder should already know. But, fear not if you are still not comfortable with it, there are still more examples to come.

Now we know what problem the Maybe is designed to solve; the absence of a value(ie. undefined or null which is a common cause of bugs in JS code). We have also discovered that a Maybe has the properties of an Array(the ability to map) and the branching ability of a Promise, but they both fall short. So, let's go for it. Let's do an actual Maybe in JavaScript and here it is...

Maybe for safer code in JavaScript


const  Maybe = (function () {
  const  Just  =  function (x) { this.x =  x; };
  Just.prototype.map  =  function (fn) { return  Maybe.of(fn(this.x)) };
  Just.prototype.chain  =  function (fn) { return  fn(this.x) };
  Just.prototype.toString  =  function () { return  `Just(${this.x})` };

  const  Nothing  =  function () {};
  Nothing.map  = () =>  Nothing;
  Nothing.chain  = () =>  Nothing;
  Nothing.toString  = () =>  'Nothing';

  return {
    of: (x) =>  x  ===  null || x  ===  undefined  ? Nothing : new Just(x),
    lift: (fn) => (...args) =>  Maybe.of(fn(...args)),
    Just,
    Nothing
  };
})();

// Thanks to Edd Mann
// https://eddmann.com/posts/maybe-in-javascript/

So, in less than twenty lines of code a Maybe is laid bare here in vanilla JS. Study it carefully; it is a thing of beauty! This is still not a fantasy-land compliant Maybe, however, it is a step towards making our code more robust and still composable. Later, (perhaps in another post), we will swap to using the folktale Maybe, if you think that might help you further.

Right, how does it work?

You can see that it has a Just function for handling the happy path(the presence of a value) and a Nothing function to handle the case when a value is absent. Mapping when the Maybe is routed down the happy path causes a provided function to be applied to the value passed into the Maybe; whereas no such function application occurs when mapping on the Nothing path. This is where the protection from errors due to undefined/null happens. Finally, the Maybe returns an object so that the user can interact with it.

Also, please note, that each time we .map we rewrap the result by doing Maybe.of which ensures undefined/null checking continues to happen.

.of() is usd to lift a value into the Maybe and initiates a null/undefined check.
.lift() is used to lift a fuction and its arguments into the Maybe.

Better than explaining it line by line, let's see how we can use it to solve the problem of the exclaim function above. Let's make a safeExclaim function.


const  safeExclaimWorld  = val =>
  Maybe.of(val)
    .map(s  =>  s.concat(' World'))
    .map(exclaim)
    .chain(x  =>  x)
    .toString()

log(safeExclaimWorld('Bob\'s')
// => Bob World!

log(safeExclaimWorld(o.udef)
// => Nothing

Note: that this time we don't get a TypeError. That's good! The Maybe justifies its existence.

Notice how similar the exclaim and the safeExclaim functions are. In particular you should note the following points:

As you know, a value is lifted into the Maybe using .of(); you can liken this to Array.of()
Value transformation is provided using .map(); in a similar fashion to Array .map()
Now we come to the line .chain(x => x); this gets our value out of the Maybe, similar to .pop() with the Array version.

Incidentally, the anonymous function x => x is commonly referred to as the identity function(const identity = x => x).

.chain flattens the Maybe and out pops the value.

.chain() needs to be passed a function to work. In the above situation we don't want to transform the value, so hence identity is used.

More examples

Here's an example to show another way Maybe can be used

The Array method .find() will find the first occurence of an element in an array or return undefined. Let's imagine we have an array of bears and want to find a specific bear in a safe manner.


const bears = ['Black', 'Grizzly', 'Kodiac', 'Polar', 'Spectacled', 'Sloth']
const find = curry((f, xs) =>  Array.prototype.find.call(xs, f))

// .lift() - lifts a function and its arguments into a Maybe

// safeFind : Array -> Any -> Any|Object

const safeFind = curry((xs, val) =>
  Maybe.lift(find)(el => el === val, xs)
    .chain(x  =>  x))

console.log(safeFind(bears, 'Kodiac'))
// => Kodiac

console.log(safeFind(bears)('Polar'))
// => Polar

console.log(safeFind(bears)('Big') )
// => a Nothing object

Another example demonstrates that safeFind will work for other types of values.

const  integers  = [34, 72, 56, 82, 94, 27, 11, 45, 42, 77, 90, 55]

const  finder  =  curry((coll, x) =>  safeFind(coll, x))
const  intFinder = finder(integers)

console.log(intFinder(42)
// => 42

console.log(intFinder(94))
// => 94

console.log(intFinder(423))
// => a nothing object

At this point I encourage you to copy this code, play around with it and make up your own examples. Doing this will help your understanding far more than just reading this article.

Here is the code for this article runkit

Thanks, maybe I'll be back with more!

If this has helped your understanding of the Maybe then please leave a comment. Likewise, if I've caused you confussion then your feedback will also be valuable for further edits.

It's allTrue... firststeps in functional JavaScript

John — Sun, 23 Jun 2019 16:54:35 +0000

Who is this for?

Anyone who is interested in functional programming at a beginner/intermediate level(whatever that means!) and will "listen" to my musings.

Kicking of with allTrue

Why allTrue? Well, allTrue is a function that combines predicate functions for logical conjunction. Also, by beginning with a function that starts with the letter 'a', this might be the start of a series of posts, and then again, maybe not, it kind of depends on you!

The function allTrue is my version of the Ramda function allPass. It uses the Array.prototype.every method, but that array does not contain primative values, but functions! I keep this function to hand in a file in my node_modules directory, I just call this file func.js. Yes, I know I could use Ramda, but at my stage in JS fp I just find it more helpful to either collect snippets from the web or write the functions myself. It just seems to make more impression on me and helps my learning process. As, does writing this post.

You should, of course, use Ramda in your production code as it has been "battle tested".

Here is the definition of allTrue.


 const  allTrue  =  curry((preds, x) =>  every(pred  =>  pred(x), preds))

Usage

An example is the best way to explain how to use allTrue.

Let's imagine we have an array of integers 1 thru 20 and we want only those integers between 5 and 15 that are even and just to make it slightly more interesting, we want to double those integers. I have in my func.js file the functions gt, lt and isEven and these function are curried by default, so I can write...


const { allTrue, compose, filter, gt, isEven, lt, map } = require('func')
const  integers  = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

const double = n => 2 * n
const  doubleEvensBetween5And15  =  compose(
  map(double),
  filter(allTrue([ isEven, gt(5), lt(15) ]))
)

So, you can see that allTrue takes a list(... a JS Array) of predicate functions that returns a predicate function which is then applied to the filter function. Finally, the result of this filter, which is the list of integers [6, 8, 10, 12, 14] is applied to map(double) to return [ 12, 16, 20, 24, 28 ].

Here is the function call.


  console.log(doubleEvensBetween5And15(integers))
  // => [ 12, 16, 20, 24, 28 ]

Visit working example at Runkit

It's all thanks to Curry

Yes, the programming world is indebted to Haskell Curry for his work in Combinatory logic and this important concept in fp takes his name.

I encourage you to read this post by Eric Elliott if you are not familiar with this fp practice.

If this post has been of interest to you please give it a like.

Cheers!

Also, I would like to hear any constructive criticism you may have with this post. Thanks.

Function composition and the making of compose

John — Thu, 09 May 2019 10:04:03 +0000

Image by StockSnap from Pixabay

Who is this for?

Any one who is interested in functional programming in JavaScript and would like to understand how a compose function may be derived and all for the sake of greater understanding. It is not intended for the experienced fp programmer. The compose function that we will make here is not even intended for production use.

Intro

In this post I will take the following steps

show the normal use case for Array.prototype.reduce
show how we can .reduce an array of functions
make a generic compose function from a decoupled reduce function
test this compose on a simple mathematical problem
finally, use it to solve the shopping cart example in TK's post, see below

As I would like to keep this post as short as possible, I would recommend that if you are unfamiliar with any of the following terms: first class functions, higher order functions, pure functions, currying, partial application, immutability and folding, then please read these excellent posts here on DEV...

Additionally, please read this post by Joel Thoms on method decoupling on hackernoon.com.

Functional JavaScript: Decoupling methods from their objects by Joel Thoms

So now you know what is to come, the rest is in the detail.

A simple start

Here is the normal use case for reduce in JS


const  sum = (a, b) => a + b

const  sumIntegers = [1,2,3,4,5].reduce(sum, 0)
// => 15

Here we are summing the list of integers. In code order we assign to sumIntegers the result of an array of integers applied to the reduce method with the callback function, or "reducer", sum; finally we must supply an empty or identity value as the last argument to reduce. It is important to understand that the identity value has a relationship with respect to the reducer it serves. For the sum reducer, identity is 0:

0 + (a number) = that number
ie.  0 + 1 = 1,
and 0 + 2 = 2

for multiplication the identity value is 1:

1 x (a number) = that number
ie. 1 x 2 = 2
and 1 x 4 = 4

This means that the identity value has no effect on the first iteration of the reduction.

Let's ramp it up a notch

In JS, functions are first class. They can be essentially treated like any other data type and can be reduced or folded, just like the list of integers above; this in fp, when applied to functions, is what is termed function composition.

But, if we are going to use reduce on an array of functions then what will be our reducer and what will be it's associated identity value? Well, it turns out that, they both must be functions, because we are reducing functions. This reducer is commonly referred to as composeB, while the empty value is called Identity. Incidentally, these as part of a group of functions are called combinators. Take a look at this github page of common combinators, the B or composeB combinator is what we will be using in this next step (along with Identity). The B stands for Bluebird and originates from a book by Raymond Smullyan, a mathematician who wrote a book called To Mock a Mockingbird; a book about combinatory logic.

It should be noted that composeB is limited to accepting only two functions, whereas the compose function we will be building here will accept a list of more than two functions.

So what does composeB and Identity look like in JS? Here they are...

const  Identity  =  x  =>  x
// pass in a value and you get the same value back.

const  composeB  = (f, g) =>  x  =>  f(g(x))
// composes two functions together. Pass in a function f and a function g then apply g to data x and then run the result of that through f to get a final result.

So now we can apply these two functions to Array.prototype.reduce and just so that it can be demonstrated, let's add 5 to what ever number is passed in and then double the result.

For this we need...

const  add = a => b => a  +  b
// add is a curried function

const  add5 = add(5)
// make a new function add5

const  double = a => a * 2
// it speaks for itself

Now the thing with compose is that it reads from right to left, so ...

const add5ThenDouble  = [double, add5].reduce(composeB, Identity)

console.log(typeof  add5ThenDouble)
// => function

So, now we have a add5ThenDouble function let's apply it...

console.log(add5ThenDouble(6))

// => (6 + 5) * 2 => 22

Well it works, but wait a minute, what we actually want is a generic function called compose that will take a list of functions. For this we will need to decouple .reduce from Array.prototype like this...

const reduce = (f, i) => coll => Array.prototype.reduce.call(coll, f, i)

You can see that this is a curried function: the double =>'s tells us that. We take the reducer function and it's empty value and then the collection(an Array in JS)

Note: Notice how our functions take as their last argument the data. This is important.

So, applying this to make a generalized compose function we do...

const compose = reduce(composeB, Identity)

And there we have it, so let's do the above again using compose... remembering that this compose has been derived from reduce so it expects an array of pure functions.

const  add5_ThenDouble = compose( [double, add5] )
// Remember, it reads right to left

console.log(add5_ThenDouble(6))
// => 22

More than a Bluebird in the hand...

Now we have got our compose function let's use it to solve the last example in TK's post

Functional Programming Principles in Javascript by TK

To do this we will need, first the shoppingCart data

 let  shoppingCart  = [
  { productTitle: "Functional Programming", type: "books", amount: 10 },
  { productTitle: "Kindle", type: "eletronics", amount: 30 },
  { productTitle: "Shoes", type: "fashion", amount: 20 },
  { productTitle: "Clean Code", type: "books", amount: 60 }
]

a curry function would be nice...

const  curry = f => (...args) =>
  args.length >=  f.length
  ? f(...args)
  : curry(f.bind(undefined, ...args))

A couple of other decoupled functions, wrapped by curry.

const map = curry((fn, xs) => Array.prototype.map.call(xs, fn))
const filter = curry((fn, xs) => Array.prototype.filter.call(xs, fn))

and finally, TK's helper functions.

const sumAmount = (acc, amount) => acc + amount
const byBooks = (order) => order.type === "books"
const getAmount = (order) => order.amount

The objective of this problem is to find the sum of the amounts that has the type of 'books'.

Note: that this version of compose expects an array of functions. This is different to what you might find in a functional library like Ramda. In Ramda's compose, the functions that you want to compose are just directly used as arguments to the compose function.

const sumAmountsForBooks = compose([
  reduce(sumAmount,0),
  map(getAmount),
  filter(byBooks)
])
// reads bottom to top

console.log(sumAmountsForBooks(shoppingCart))
// => 70

So, we get the correct result, but let's see how it does with a larger dataset.

Testing, testing, testing...

// generate a test array, quick and dirty
function genTestAry(numElements) {
  let A = [], i=0, prod = ["books", "eletronics", "fashion", "diy", "health"]
  while (i < numElements) {
    A.push({productTitle:'', ['type']: prod[~~(i%5)], amount: 10})
    i++
  }
  return  A
}

// sCart with 100,000 objects.
const sCart = genTestAry(100000)

console.time('sumAmountsForBooks')
console.log("Sum for ", sCart.length, "objects:", sumAmountsForBooks(sCart))
// => Sum for 100000 objects: 200000
console.timeEnd('sumAmountsForBooks')
// reports approx 15 .. 10ms. Not bad for 100,000 items!
// As a bit of perspective; the blink of an eye is approx. 300 .. 400ms.

In summary

As an academic exercise this post has shown that the compose function can be looked at as just a reduction of a list of pure functions. The process of function composition is often likened to joining a set of Lego bricks to build a sum which is greater than its individual parts.

Of course, there is usually "more than one way to skin a cat". The shopping cart code above could be achieved in one pass, like this...

const  getTotalAmount = (shoppingCart) =>
  shoppingCart.reduce((acc, obj) =>
  obj.type === 'books'
    ? acc + obj.amount
    : acc
  ,0)

console.time('getTotalAmount')
console.log("Sum for ", sCart.length, "objects", getTotalAmount(sCart))
console.timeEnd('getTotalAmount')
// Yes, reports much faster approx. < 5ms.

Yes, this code is shorter and it uses .chaining and there is nothing wrong with that; I love dot chaining, but that would not have given me an opportunity to show how compose can do the job and how JavaScript methods can be decoupled from their parent objects. A big shout out to Joel Thoms for that. But, the upshot is, however you decide what method to use, that's fine. But function composition is another tool in your programmers' toolbox ... and that's a positive note to end on.

I hope that this post will help you to a greater understanding of function composition and that you will be tempted to explore a functional library such as Ramda or Lodash; "battle tested" functions for functional programmers. However, you may just need to compose without pulling in a library, so in vanilla JavaScript, you could just use the following.

 const compose = (...fns) => xs => fns.reduceRight((v, f) => f(v), xs)

If you are inspired to learn more, then take a peek at TK's Learning Functional Programming repository

Good luck on your fp journey!