[JS Compose] Understand 'Box' or 'Container', they are just like Array!

Posted 2020-08-22 Answer1215

We‘ll examine how to unnest function calls, capture assignment, and create a linear data flow with a type we call Box. This is our introduction to working with the various container-style types.

 

At first, might not be comforable with ‘Box‘ or ‘Container‘ idea. It bit similar to ‘Array‘.

Lets see an example first:

const nextCharForNumberString = str =>
  [str]  // [‘ 64 ‘]
  .map(s => s.trim()) // [‘64‘]
  .map(r => parseInt(r)) // [64]
  .map(i => i + 1) // [65]
  .map(i => String.fromCharCode(i)) // ["A"]
  .map(c => c.toLowerCase()) // ["a"]

const result = nextCharForNumberString(‘  64 ‘)

console.log(result) // ["a"]

Notice that, the function take one param ‘str‘, inside the function body, the first thing we do is put ‘str‘ into Array. Well, we know [] this is Array because we know javascript, we know programming. Lets assume we don‘t know programming, ‘[]‘ this is just something looks like a ‘BOX‘!

So what we do is, put ‘str‘ into ‘BOX‘, and every single step, we use ‘map‘ to do transform.  Wait a second here... Because we know programming, we know what ‘map‘ acutally does. So we think ok, this is how it should be. 

Assume again, we don‘t know programming... what will you describe what happen then? 

Well, I saw ‘ 64 ‘ inside a ‘BOX‘; then ‘64‘ inside the BOX; then 64 inside the BOX; then 65....

One thing we have to notice here now is that, ‘BOX‘ is always there! So what actually ‘map‘ does? Try to describe it again...

Well.. Uhm... what map actually does is that it goes into a BOX, according to the logic passed to the map and its value, doing transform to the value, then update value and set to a new BOX. So next opreation get this new BOX and new value.

 

So now you can see, Array just like a Box, so we can replace to:

const nextCharForNumberString = str =>
  Box(str)  // Box(‘ 64 ‘)
  .map(s => s.trim()) // Box(‘64‘)
  .map(r => parseInt(r)) // Box(64)
  .map(i => i + 1) // Box(65)
  .map(i => String.fromCharCode(i)) // Box("A")
  .map(c => c.toLowerCase()) // Box("a")

const result = nextCharForNumberString(‘  64 ‘)

console.log(result) // Box("a")

 

Of course, this code won‘t work in Javascript. 

So we need to define ‘Box‘: it should be a function return an object, which has ‘map‘ function, ‘map‘ function accpect an function as param and take the value pass from the Box. The return value from ‘map‘ should still put back into the Box, so that, the next map function can use it.

const Box = (x) => ({
   map: f => Box(f(x)) 
})

 

So far is good, but we don‘t want the result as ‘Box("a")‘, we just want the value "a", so we can add another function into map, which call ‘fold‘, the function will just return the updated value.

const Box = (x) => ({
  map: f => Box(f(x)),
  fold: f => f(x)
})

const nextCharForNumberString = str =>
  Box(str)  // Box(‘ 64 ‘)
  .map(s => s.trim()) // Box(‘64‘)
  .map(r => parseInt(r)) // Box(64)
  .map(i => i + 1) // Box(65)
  .map(i => String.fromCharCode(i)) // Box("A")
  .fold(c => c.toLowerCase()) // "a"

const result = nextCharForNumberString(‘  64 ‘)

console.log(result) // "a"

Now we got "a". 

 

The important thing to take away from here is: ‘Box‘ and ‘Container‘ are nothing but like ‘Array‘ which we already know. 

‘map‘ function is not just loop over Array, it is actually goes into the Box and update the value, and return a new Box with the updated value.