Forem: Johnny Reina

What [I think] I know about van Laarhoven lenses

Johnny Reina — Mon, 20 Aug 2018 15:26:25 +0000

this post was originally published on my Github Pages site on August 19th, 2018

Mo' functions, mo' problems

We are always told to avoid mutation in functional programming. This is primarily achieved by using constant variables and in the case of reference types (objects, arrays, etc.), using methods and functions which avoid mutation. While there are a plethora of functions that are well-suited to this idea with arrays, such as map, filter, and reduce, such functions are much more cumbersome to use with objects and are not widely used. We have object spread and static methods like Object.assign, which can help tremendously but can also lead to messy syntax for all but the simplest of object structures. Most examples that I have seen in JavaScript look something like this:

While this is generally fine for very shallow objects, the story gets much more complicated when trying to enforce immutability in complex objects while changing deeply-nested values...

This is obviously not very idiomatic. The problem is made worse when a library like React enforces the idea of immutability (this isn't React's fault, though). So how do we deal with this in a way that feels a bit more natural? For this, I have turned to lenses. Lenses are a special type of object that combines a setter and getter such that you can perform standard operations, most commonly setting, getting, and mapping, on values of an object in a way that the original object is not modified. Not only do lenses allow you to operate on objects while enforcing immutability, they also compose together such that each lens digs deeper into your complex objects and exposes a set of immutable operations for the entire object.

So how do we make a lens?

Generally speaking, there should exist a lens package in your language of choice. For JavaScript, I use the lenses built into Ramda since Ramda also comes with functions that I tend to use including getters and immutable setters. The following example shows a lens being created for a name property.

While this is neat, lenses are not very useful on their own (just like any other structure). There is not a whole lot we can do with nameLens on its own. This is where lens operators come in. The three operators provided by Ramda are view, set, and over, which allow you to get, set, and map the focused property, respectively.

The examples below will use the following object:

`view`

This function accepts a lens, then an object, and returns the value of the focused property of the lens. This essentially just calls the getter of the lens and is fairly straightforward. Here, we can use nameLens to view the value of the focused property:

`set`

This function accepts a lens, a value, and then an object, and returns a copy of the object with the focused property set to the provided value. Again set essentially just calls the setter of the lens and is fairly straightforward. Here, we use the set operator along with nameLens to set the value of the focused property. Note that the original object remains unchanged.

`over`

This function accepts a lens, a transform function, and then an object, and returns a copy of the object with the focused property set to the original value of the focused property *after* passing it through the provided transform function. This operator is a little harder to understand. This function is just like the map function since it runs a function *over* the focused value. Here we use the over operator to call the toUpperCase method of the string. Just like before, the original object remains unchanged.

What if we need to change a value in the `parking` object?

Suppose we need to update the value in person.parking.row while maintaining immutability. This is where the compositional nature of lenses come in handy since lenses compose using the standard compose operator! This is how we could create a lens for this scenario:

Now, our parkingRowLens can be used with the lens operators to do the same setting, getting, and mapping operations. Best of all, the original object will still remain unchanged due to the nature of lenses.

Is there an easier way to create lenses?

If you are using Ramda, then definitely yes. Otherwise, be sure to check the owner's manual for your lens package. Ramda provides a few convenience functions to help us create lenses:

Function	Description	Example
R.lensProp	Creates a lens which focuses on the provided property.	`R.lensProp('name')`
R.lensPath	Creates a composition of lenses to focus on the provided path.	`R.lensPath(['parking', 'row'])`
R.lensIndex	Create a lens to focus on the provided array index.	`R.lensIndex(0)`

Additional reading

What's up with currying?

Johnny Reina — Thu, 21 Sep 2017 10:22:40 +0000

this post was originally published on my Github Pages site on September 21st, 2017

If you've been exposed to functional programming, you have almost certainly come across the concept of curried functions. Named after the man himself, Haskell B. Curry, a curried function is one that requires multiple arguments but cannot accept all of them in a single call. Consider the following example:

What is happening here? magnitude is rather straightforward in that we take three values and calculate the root of the sum of their squares. magnitude_curried, however, is quite a bit different and the syntax used to declare it is perhaps a bit offputting. Here is the same function as full function expressions:

If we walk through what occurs with magnitude_curried, we'll find that it, too, is straightforward, albeit somewhat strange (at first). When we apply the first argument x, as 1, we get back a function. Same thing when we apply the second argument, y as 28. Finally, when we apply the final argument, z, as 76, the magnitude function is called and its result is returned.

Where does currying come from?

Currying is a concept pulled out of the mathematical basis of functional programming, the lambda calculus. In mathematics, you cannot just go out and grab some value from the world at large and drop it in the middle of your functions. You must specify these outside values as parameters and pass them into your functions. The lambda calculus, as a formal system of arranging functions and how they are used, places additional restrictions on how your function can interact with outside information. In the lambda calculus, functions can have only a single input. In pure-functional programming languages like Haskell, every function is understood to be a curried function.

Why would we ever need currying?

You need currying when you need a function to be:

Reusable
Minimally dependent on context
Callable after specifying some arguments

What do I mean by this? Consider how these three points apply to the following example:

Here we see the values function being declared as a curried function. It takes an array of strings which represent keys of an object, and an actual object, and returns the values corresponding to the given keys from the provided object. In its most simple form, values could be called like so: values(['a'])({ a: 'hello' }) and it would return ['hello']. So how is this useful to us? On line number 8, we apply an array of strings to values and assign the resulting function to a variable called getNameAndDepartment. As we see on line number 9, this new variable is a fully-callable function. We pass in the first value in the courses array and as expected, we get back the name and department values from this object. Here comes the cool part. Since getNameAndDepartment is a callable function and has some of the body pre-filled, we can map over the entire courses array and use the getNameAndDepartment function as seen on line 12.

Big deal. This still seems like a complicated way to get the values of some objects, right? Consider the fact that the values function doesn't know about any particular array or object. It doesn't describe the context, it only describes functionality. This satisfies requirement number 2 for me. Additionally, since it remained a callable function after applying the keys which we eventually map over, it satisfies number 3 as well.

This all seems fine, but what about requirement number 1: reusability? Since the values function doesn't describe the context, it is automatically reusable for another set of arguments. That is, we can pass in another set of values for keys and obj and it will work there, too! We see this on line number 26 where we apply the carKeys array and on line number 27 where we pass in a cars object and get back the make, style, and id values as expected. Just as before, we can use getMakeStyleAndId, a partially-applied function, to map over an array of car objects and get these values for each object in the cars array.

Currying vs partial application

There seems to be some confusion regarding the difference between currying and another similar concept called partial application. This confusion is further compounded by the fact that sometimes they are the same thing. Currying takes a function which requires n arguments and reduces it to a series of functions which accept 1 argument, whereas partial application takes a function which requires n arguments and reduces it to a function which accepts n - 1 arguments. Semantically speaking, currying is a form of partial application. In fact, in the case of a function which only needs two arguments, to begin with, these definitions are the same. This is the case for our values function above. We are partially applying the required arguments, but since the function only ever accepts one argument at a time, it is also a curried function.

Is there more insidious terminology hidden in functional programming that I should be aware of?

I recommend taking a look at the functional programming jargon repo from hemanth for a huge list of well-defined FP terms. If you're feeling daring, the fantasy-land spec provides the formal definitions of algebraic JavaScript and is what I consider to be reference material for FP in JavaScript.

Parting notes

I want to stress that the three requirements I listed are sort of the rule of thumb that I use to determine if a function needs to be curried or if I should just leave it alone. Since currying is a concept that many people are unfamiliar with, using curried functions where it doesn't make any sense to do so is a sure-fire way to increase the probability of bugs down the road and stands to alienate newer devs and people who just don't care for FP. If you're just currying because it kinda looks cool, you are obfuscating the meaning of your code.

What do you think? Are these sound guidelines? Does this help you understand the concept?

Intro to the zip function

Johnny Reina — Tue, 19 Sep 2017 12:10:02 +0000

this post was originally published on my Github Pages site on September 19th, 2017

Now that we have covered the fundamental iterative functions, I want to take some time to look at some more functions that you will typically find lurking in functional-first programming languages or functional utility libraries. While not as prevalent as map, filter, and fold, these functions have their use cases and though they can be easily implemented by way of fold, they are more purpose built so you will find the syntax to be tidier.

The first of these functions I want to talk about is the convolution function, more widely known as zip. In Haskell, the zip function has a type signature of zip :: [a] -> [b] -> [(a, b)]. What this means is that the zip function accepts two lists, and combines them into a single list by merging each value of each list. Traditionally, zip outputs a tuple (the (a, b) part of the type signature), however, since JavaScript doesn't have tuples (nor a zip function) we will use a two-value array to represent pairs and we will define the zip function ourselves.

We'll start off by defining zip as a function of map.

Note that this is not a battle-proven production-ready solution. This is just to get us going without worrying about external libraries. I would recommend looking into Underscore.js, Lodash, or Ramda for tested and well-designed implementations of zip. In the wild, zip will usually only map over the shortest length array so that your output array isn't longer than the shortest input array.

So what can we do with this? As usual, we'll start off with a very basic example.

And just like that, we've constructed the discrete sequence of values for f(x) = x² where { 0 <= x <= 10 }. Pretty cool, eh? Now we can send that off to Chart.js or the like and get back a nice chart.

Because of the flexible type signature (read: non-existent) of our zip implementation, the return value can be an array of anything. It's an array by default, but in the second zip above we constructed some objects from our pairs. If you made it through map and fold, this should make sense to you right away (because you are a higher-order programmer now!), but I will show this same example done in an imperative style just in case.

As long as you know your two arrays match up one-to-one, you can use zip to compose objects of sublists into incrementally larger objects. Though there are varying opinions on the subject, I tend to prefer composing objects rather than inheriting and I think MPJ at Fun Fun Function makes a solid case for this idea as well. So how would we do this with zip? Well lets take our previous example where we took our x-values and y-values and combined them into an object, and lets take these boring 2-dimensional points and turn them into boring 3-dimensional points. We'll then consider these points to represent the directed endpoints of 3-dimensional vectors from the origin and calculate their magnitude.

Zip gives us a concise syntax for doing a good chunk of work. What if we want to take a list of two vectors and calculate their dot product and resultant vector?

Very easy. Note that since I'm such a smart guy I accidentally made the original arrays have more even-indexed members than odd, that's why I passed in the odds first. This is an example of something a good implementation of zip would do automatically. If I were to have passed the evens in as the first argument, we would have gotten an error since we are accessing the items in the second array by index.

Where should I use zip?

When you want to combine two or more lists with a one-to-one correspondence. Note that since zip combines things in some way, the result of consecutive zips usually ends in progressively larger, more complex items. Also, like all of the iterative functions I've covered so far, zip does not mutate the original arrays. This means that you can put some stuff in an array, zip it, and the original stuff will still be there untouched.

Which languages have zip?

The language you use probably has it so by sure to check the owner's manual. As far as I know, the following languages and libraries have zip:

Language	Function	Note
C#	Enumerable.Zip
Haskell	zip
JavaScript (Underscore.js)	_.zip	Be sure to check the docs on this. This implementation doesn't appear to accept a "zipping" function
JavaScript (lodash)	_.zip	Be sure to check the docs on this. This implementation doesn't appear to accept a "zipping" function
JavaScript (lodash)	_.zipWith
JavaScript (Ramda)	R.zip	Be sure to check the docs on this. This implementation doesn't appear to accept a "zipping" function
JavaScript (Ramda)	R.zipWith
JavaScript (Immutable)	zip	Be sure to check the docs on this. This implementation doesn't appear to accept a "zipping" function
JavaScript (Immutable)	zipWith
Python	zip	Be sure to check the docs on this. This implementation doesn't appear to accept a "zipping" function

Intro to the fold function (aka reduce or aggregate)

Johnny Reina — Sun, 17 Sep 2017 00:25:44 +0000

this post was originally published on my Github Pages site on September 16th, 2017

This might sound a bit outlandish or ridiculous, but I seldom write loops nowadays. What I have found is that just about every programming language includes a set of methods or applicable functions that can replace just about every loop that I was previously writing. These higher-order functions are called map, filter, and fold.

In the previous two articles, we got a glimpse of the power of the map and filter functions. In this article, I want to discuss the Ma Dukes of iterative functions: the fold function, and hopefully, convey the importance of this function.

Keep in mind that fold is generally not called fold in programming languages. This is true for JavaScript, where fold is actually called reduce. In this article, I will refer to the fold function, but the examples will show Array.prototype.reduce. The array type in JavaScript is said to be foldable because it implements fold as Array.prototype.reduce.

Fold

Fold accepts an accumulator function which it applies to the each item in the array and passes the result on to the next execution of the accumulator. Fold accepts an optional seed value to use as the starting point for your folding. This is rather difficult for me to express in words, so here's a diagram:

Here, f is the accumulator function. Notice that each instance of f has two arrows pointing to it. That means the accumulator function you provide must accept two parameters: the value from the last execution, and the current value from the array. As a convention, I tend to use (memo, value) as my parameter names.

Starting off slow

I'll show some basic examples and try to work our way up to some heavier folding.

What is happening here? The first example describes the sum of all of the elements of the nums array. If you follow the diagram, 0 is our seed value. So we start at 0, add 1, pass that on to the next execution where we add 2, pass that on to the next execution where we add 3, and so on. The second example is functionally equivalent to f(5) => 5!. In the third example, we are simply taking each letter and appending it onto memo. Notice that since a seed value wasn't specified, we just got back the first item in the array.

This is pretty cool, eh? It may take some staring at for the concept to fall into place, but once you figure it out you will want to fold everything!

We added some numbers. Big whoop. Why are you so excited about fold?

I consider fold to be the end-all-be-all iterative function. The bee's knees, if you will. The reason I say that is because the seed value can be of any type. That means we can fold over an array and kick out an object, array, number, string, boolean, or whatever your heart desires! Say we have an array of pairs that we want to transpose onto an object, this is easily done with fold:

The first fold transposes the pairs onto a new object. The second fold, which acts on the new person object, pulls those pairs back out. This proves that we did not lose any information during the process.

The other two iterative functions that I've covered, map and filter, can easily be implemented as a function of fold! Consider the following:

Implementing map and filter as a function of fold are a little bit verbose, due to the fact that map and filter are purpose-built. But, this example clearly shows the relationship between all three functions and thus why I lump these functions into the same bag.

Here's an example of fold being used to flatten an array of objects into a big chunk of CSV text:

Holy shit! This is amazing!

I know, right!? I cannot stress enough how powerful this array transform is.

Where should fold be used?

Due to the flexible nature of fold, it's rather difficult and limiting to say "definitely use it in scenario a or scenario b." Basically, when you want to accumulate the items of a collection in some way, fold is a great tool for doing so.

Just as map and filter avoid mutating the original array, so does fold. This is important because we want to transform the list with fold, but we might also want to map and filter afterward. This idea of avoiding mutating data goes a bit beyond the scope of this article but I think Eric Normand did a great job of explaining why you might want to treat data as unchangeable.

Which languages have fold?

The ones I use day-to-day have fold. Here's a table of the ones I know about:

Language	Function/Method
JavaScript	Array.prototype.reduce
C#	Enumerable.Aggregate (as part of System.Linq)
Haskell	foldl, foldl1
PHP	array_reduce
MongoDB	$reduce (as part of an aggregation pipeline)

There are definitely more languages with the fold function baked in, so be sure to check your local listings.

Intro to the filter function

Johnny Reina — Sat, 16 Sep 2017 02:25:16 +0000

this post was originally published on my Github Pages site on September 15th, 2017

Filter

The filter function takes a predicate, a function which accepts an item from your array and returns a boolean result, and returns a new array containing the elements that return true when passed through the predicate.

Baby steps

We'll start off with some easy examples:

Unlike its counterparts map and fold, filter's name immediately and obviously expresses what it does. Though it's a rather simple function, it is very powerful nonetheless.

Learning to crawl

Here's an example of filtering an array of objects:

In the first filter, we are looking for people in the list whose name is Mary. Since there is only one person in the list with this name, we only get one result. Note that since filter always returns an array, we just got back an empty array when we looked for someone named Fred in the second filter. In the third example, we look for people whose age is greater than 40. Finally, in the last example, we look for people who have two hobbies.

If this is taking a bit to click, I'll show an example of filter done in an imperative style. This is a pattern I used to write quite often before I knew how to use filter.

While these loops have the same result as the previous examples, they are much more explicit and there is much more typing involved.

Up and running!

These examples are pretty easy, right? Well, there really isn't a whole lot to it.

Out of the map-filter-fold family of functions, filter is the function I use the least in JavaScript. However, C#'s counterpart, Where, is definitely my workhorse when working in C#.

When I am filtering data based on multiple conditions, I like to define the predicates as named variables ahead of time. I've found that this improves the readability of the code tremendously, in addition to providing opportunities to reusing the pre-defined functions. Consider the following example:

Since filter always returns an array, you can chain together your calls to filter and drill down to the data you want incrementally. You must be careful with your logic, though, especially when the filtering logic you are trying to apply requires mixing AND and OR logic.

When should I use `filter`?

This might not need to be said, but you should use filter when you want to reduce the items in a collection to only those items which meet specific criteria.

JavaScript is the worst! What other languages have `filter`?

Pretty much all the good ones. Though the names might be a bit different. In an effort to avoid plagiarism and only write what I really know about, I'll list out a few equivalent methods/functions that I know and have used here.

Language	Function/Method
JavaScript	Array.prototype.filter
C#	IEnumerable.Where (as part of System.Linq)
Haskell	filter
PHP	array_filter
MongoDB	db.collection.find

Alright, I'm convinced. When do I start?

Right now! Go!

The best way to get familiar with filter is to just start using it.

Intro to the map function

Johnny Reina — Thu, 14 Sep 2017 06:50:00 +0000

this post was originally published on my Github Pages site on September 13th, 2017

Map

The map function takes a function you provide and iterates over each item in your list, applying the function you provide and putting the result in the same spot in the new array. Since map takes an array and returns an array, you can chain together your map calls and transform your data incrementally.

Baby steps

We'll start off with some easy examples:

That didn't hurt too much, did it? In the first map, we essentially applied f(x) = 2x to each element in the sequence. Likewise, the second map applied f(x) = xÂ² to each element. Easy cheesy.

Learning to crawl

Here's an example of mapping over an array of objects:

In the first map we are pulling out each person's name, their age in the second map, and their second hobby in the third map. If what is happening here isn't immediately apparent to you, here is the same thing in an imperative style:

Crazy, right? What we can do with a single expression with map, takes FOUR lines with imperative code. Oh, and did you notice the fact that we did not mutate the value of the original array in the imperative example? This is also true for map, which is important since we might need to do other things to that original array.

Up and running!

Alright, "this is child's play", you say. Where are we REALLY gonna use map? Well, buckle up! Check out this real world example:

This example is straight outta polysvg, albeit cut down a bit for brevity. This map chain takes an array of six zeroes and performs the following steps:

Numbers each spot according to its index
Multiplies each position by 60 to get the angles of each vertex from the centroid of a hexagon
Converts each angle to radians
Converts from polar to Cartesian coordinates
Rounds these nasty floats
Applies an offset to each point equal to the radius

Without annotations, this is about nineteen lines of code.. Most importantly, it works and you can try it out yourself.

When should I use `map`?

Since map has a 1:1 relationship between the number of things you put in and the number of things you get out, you should use map when you want to transform x amount of things into x amount of other things. If you need to turn x amount of things into x - 5 amount of things, map might not be the ideal solution right away. You may need to segregate your things into subsets, and then map each subset separately.

JavaScript is the worst! What other languages have `map`?

Like, all the good ones. Though the names might be a bit different. In an effort to avoid plagiarism and only write what I really know about, I'll list out a few equivalent methods/functions here.

Language	Function/Method
JavaScript	Array.prototype.map
C#	IEnumerable.Select<T> (as part of System.Linq)
Python	map
Haskell	map
PHP	array_map
MongoDB	$project (as part of an aggregation pipeline)

Alright, I'm convinced. When do I start?

Right now! Go! map all the things!

The best way to get familiar with map is to just start using it.

Forem: Johnny Reina

What [I think] I know about van Laarhoven lenses

Mo' functions, mo' problems

So how do we make a lens?

view

set

over

What if we need to change a value in the parking object?

Is there an easier way to create lenses?

Additional reading

What's up with currying?

Where does currying come from?

Why would we ever need currying?

Currying vs partial application

Is there more insidious terminology hidden in functional programming that I should be aware of?

Parting notes

Intro to the zip function

Where should I use zip?

Which languages have zip?

Intro to the fold function (aka reduce or aggregate)

Fold

Starting off slow

We added some numbers. Big whoop. Why are you so excited about fold?

Holy shit! This is amazing!

Where should fold be used?

Which languages have fold?

Intro to the filter function

Filter

Baby steps

Learning to crawl

Up and running!

When should I use filter?

JavaScript is the worst! What other languages have filter?

Alright, I'm convinced. When do I start?

Intro to the map function

Map

Baby steps

Learning to crawl

Up and running!

When should I use map?

JavaScript is the worst! What other languages have map?

Alright, I'm convinced. When do I start?

`view`

`set`

`over`

What if we need to change a value in the `parking` object?

When should I use `filter`?

JavaScript is the worst! What other languages have `filter`?

When should I use `map`?

JavaScript is the worst! What other languages have `map`?