{ "componentChunkName": "component---src-templates-blog-post-tsx", "path": "/blog/2018-07-03-functional-rephrasing-using-an-async-function-functor/", "result": {"data":{"blogPost":{"title":"Functional Rephrasing Using an Async Function Functor","slug":"/blog/2018-07-03-functional-rephrasing-using-an-async-function-functor/","authorNodes":[{"name":"Charles Lowell","slug":"/people/charles-lowell/"}],"markdown":{"html":"

One of my favorite things about the the math framework is that it\nhelps you look for (and also find) patterns of composability around\nyou in your programming world. At the time I wrote:

\n
\n

As you start to perceive the common nature in things like Promise, Array, and Observable, you begin to re-perceive all of the objects in your world through this new prism. You ask yourself “Is this a Functor?” and you’re shocked by how often the answer is yes. Plain JS Object? Yes. DOM Element? Yes. Express middleware? Yes. React Component? Also yes.

\n
\n

It turns out that Functors are everywhere, and armed with\nfuncadelic.js at your side, you stand ready to harness their power. In\nfact, just yesterday I found just such a one: The JavaScript\nAsyncFunction. And today, I'm going to show you how we can use the\nfine fact that async functions are Functors in order to refactor some\ncode to be more composable. In other words, we'll functionally\nrephrase it as a Functor.

\n

Let's say we have an async function that fetches a url for us:

\n
async function get(url) {\n  return await fetch(url);\n}
\n

And now we want to assemble a data transformation pipeline around\nit. For argument's sake, let's say our process will look like:

\n
-> get the data\n-> parse as JSON\n-> normalize the keys in the resulting json\n-> look up the canonical model in a local data store.\n
\n

As a first pass, we could write a transform function that takes the\nurl and applies each of these steps.

\n
async function transform(url) {\n  let response = await get(url);\n  let data = response.text();\n  let json = JSON.parse(data);\n  let normalizedKeys = normalizeKeys(json);\n  let model = lookup(normalizedKeys);\n  return model.\n}
\n

And if we wanted to stop there, life would go on. However, we could\nalso declare that AsyncFunction is a Functor and leverage the\nflexibility that it provides. Here is the definition of the Functor\ninstance for async functions.

\n
import { Functor } from 'funcadelic'\n\n// AsyncFunction is not currently a global object. :/\nconst AsyncFunction = Object.getPrototypeOf(async function(){}).constructor\n\nFunctor.instance(AsyncFunction, {\n  map(fn, asyncFn) {\n    return async function(...args) {\n      return fn(await asyncFn(...args));\n    }\n  }\n})
\n

What this says is: whenever you map a function fn over an async\nfunction, what you get is a new async function that just invokes the\nold async function, awaits its return value, and then applies fn to\nit before returning.

\n

Using the funcadelic chaining syntax this let's us define the\ntransform method, not as a monolithic function, but as the\ncombination of a bunch of smaller functions.

\n
import { chain as $ } from 'funcadelic';\n\nconst transform = $(get)\n  .map(response => response.text())\n  .map(data => JSON.parse(data))\n  .map(json => nomalizeKeys(json))\n  .map(normalized => lookup(normalized))\n  .valueOf();\n}
\n

We start with the first async function get, and then map a plain function\nover it that takes the response and returns its text. The result of\nthat is an async function over which we can then map a plain function\nthat just parses the JSON. The result of that is another async\nfunction over which we can map key normalization, and so on....

\n

Just as when we declared it explicitly, transform is an async\nfunction because the result of mapping an async function always\nreturns another async function. That's just how Functors work.

\n

Notice also that for our mapping functions that just invoke single argument\nfunctions, we can even leave out the arguments:

\n
const transform = $(get)\n  .map(response => response.text())\n  .map(JSON.parse)\n  .map(nomalizeKeys)\n  .map(lookup)\n  .valueOf();\n}
\n

Which ever style you choose, the neat thing is that we're building up\nan async function out of a bunch of regular plain-old JavaScript\nfunctions with nothing async about them. This gives us a lot of\nflexibility if, for example, we want to add a step to the\npipline.

\n

Let's say that we want to add a de-duping function in\nbetween the key normalization and the lookup from the data store. All\nwe have to do is insert it into our pipeline.

\n
const transform = $(get)\n  .map(response => response.text())\n  .map(JSON.parse)\n  .map(nomalizeKeys)\n  .map(dedupe)\n  .map(lookup)\n  .valueOf();\n}
\n

Pretty neat! But there's one more thing I have to show you, and I\nthink you're going to like it..

\n

We can use the Functor law which basically says that you can either\nmap each function individually, or you can compose them all together\nand map that function once. In other words:

\n
import { map } from 'funcadelic';\nimport { pipe } from 'ramda';\n\nlet pipline = pipe(\n  response => response.text(),\n  JSON.parse,\n  normalizeKeys,\n  dedupe,\n  lookup\n);\n\nconst transform = map(pipeline, get);\n
\n

This is all not to say that there's a single way to do it. Far from\nit! But with the AsyncFunction Functor in your pocket, you've got options on your side!

\n

Photo by Jason Blackeye on Unsplash

","frontmatter":{"date":"July 03, 2018","description":"Once you know that they're there, Functors pop up in all kinds of surprising places. Here we take a simple exploration of how the JavaScript async function construct is actually a Functor and how we can use that for great good.","tags":["functional-programming","functor","funcadelic","TIL","javascript","typeclasses"],"img":{"childImageSharp":{"fixed":{"src":"/static/5c83db51eae5499a9c56557f45581b9a/a7715/2018-07-03-functional-rephrasing-using-an-async-function-functor_starry-night.jpg"}}}}}}},"pageContext":{"id":"e678036d-50c0-5ba0-b78d-555bac45c861"}}, "staticQueryHashes": ["1241260443"]}