Ramda function explained: lens

Ramda is a practical functional library for JavaScript programmers. It follows functional programming paradigm, and official doc is here. One of the limitation of Ramda is that its documentation is too abstract and the learning curve is just too steep!

In this series of articles, Ramda functions are going to be explained in an intuitive way so that usage of Ramda can be a breeze.

The 1st article of this series is on lens or a family of functions related to lens.

First let’s ask a simple question, why is the function named “lens”? Understanding why is important, it makes one easily recall which function to use in Ramda, without referring to the doc again and look for a candidate function among hundreds of them.

Lens make it focus, full stop.

With lens, you do not see the whole picture, but parts of it, yet with much more details. That fully describes what lens is.

Analogous to this, if you have a very large amount of data, but your interest is not on the whole data set, but parts of it, and you want to manipulate it, read, write, delete …… That is where lens come into play.

With this understanding, you will never forget what lens is!

Example 1: Use lens to access/read data:

const input = ['a', 'b', 'c']
const o1 = view(lensIndex(0), input);            //=> 'a'

Here, lensIndex(0) tells us we are using lens to focus on the first element, that is it. But hold on, we know lens allow you to view the object, but lens is not the object it self! That is why we have a related function view, which returns the element itself.

Emmmm, I can easily do the same thing as below, why bother?

const input = ['a', 'b', 'c']
const o1 = input[0]                              //=> 'a'

Absolutely right! But consider the following example 2:

const input = {
  id: 'a1',
  features: [
    {
      id: 'f1',
      children: [
        { id: 'c1' }
      ]
    },
    {
      id: 'f2',
      children: [
        { id: 'c2' },
        { id: 'c3' }
      ]
    }
  ]
};

How do you get/focus ‘c2’ in this? There is no trivial solutions. That is where lensPath come into play:

const o1= view(lensPath(['features', 1, 'children', 0, 'id']), input) //c2

Wow! That is really powerful! It reads naturally like this:

const o1 = input ['features'][1][ 'children'][0].'id';

Equally, we can also set the value along that path in example 3:

const output = set(lensPath(['features', 1, 'children', 0, 'id']), 'x100', input)

and now output is:

{
    features: [
        {
            children: [
                {
                    id: "c1"
                }
            ],
            id: "f1"
        },
        {
            children: [
                {
                    id: "x100"   // <---- updated
                },
                {
                    id: "c3"
                }
            ],
            id: "f2"
        }
    ],
    id: "a1"
}

If your path to the location of interest is very simple, you can also use lensProp to replace lensPath:

const o2= view(lensProp('features'), input) ;

and now O2 is

[
    {
        id: "f1"
        children: [
            {
                id: "c1"
            }
        ],
},
    {
        id: "f2"
        children: [
            {
                id: "c2"
            },
            {
                id: "c3"
            }
        ],
}
]

That is it.

To recap, you can use lensIndex, lensProp and lensPath to locate the data of interest, this is analogous to use a lens to focus on specific fields. And then you can use view, set to read/write the values.

Happy coding.