[JS Compose] Enforce a null check with composable code branching using Either

Posted 2020-08-23 Answer1215

We define the Either type and see how it works. Then try it out to enforce a null check and branch our code.

 

Now, we try to make Box more useful. We want to do a force null check by define "Right" and "Left" tow boxes.

 

What "Right" does is, apply the logic passed in to the value Box has.

What "Left" does is, ingore the logic and just return the value.

const Right = x => ({
  map: f => Right(f(x)),
  toString: () => `Right(${x})`
});

const Left = x => ({
  map: f => Left(x),
  toString: () => `Left(${x})`
});

 

Example:

const res1 = Right(3).map(x => x + 1).map(x => x / 2);
console.log(res1.toString()); // Right(2)

const res2 = Left(3).map(x => x + 1).map(x => x / 2);
console.log(res2.toString()); // Left(3)

 

The logic here we try to complete, is the function either call "Right" or "Left". To see a more useful case, we need to define our ‘fold‘ function.

const Right = x => ({
  map: f => Right(f(x)),
  fold: (f, g) => g(x), // If Right, run function g
  toString: () => `Right(${x})` 
});

const Left = x => ({
  map: f => Left(x),
  fold: (f, g) => f(x), // If Left, run function f
  toString: () => `Left(${x})`
});

Because in real case, we never know it is Right or Left get called, so in fold function, we defined two params, if it is Right get called, we will call second param g, if it is Left get called, we will call first param f.

 

How how about we build a function to find color, if the color is defined, we return its value, if not, we return "No color"!

const findNullable = x =>
  x != null ? Right(x) : Left(null);
  
const findColor = name => 
  findNullable({red: "#ff0000", green: "#00ff00", blue: "#0000ff"}[name]);

const res = findColor("blue")
  .map(s => s.slice(1))
  .fold(e => "no color found", s => s.toUpperCase());

console.log(res) //0000FF

const res = findColor("yellow")
  .map(s => s.slice(1))
  .fold(e => "no color found", s => s.toUpperCase());

console.log(res); // no color found

Now, if the color is found, then it log out the color value, if not found, then show the error message.

 

So let‘s think about it,  what if we doesn‘t wrap findColor function into Box? For example, it looks like this:

const findColor = name => 
  {red: "#ff0000", green: "#00ff00", blue: "#0000ff"}[name];

Then we do:

const findColor = name => 
  {red: "#ff0000", green: "#00ff00", blue: "#0000ff"}[name];

const res = findColor("yellow").slice(1).toUpperCase(); 
console.log(res); // Error: cannot call .slice() on Undefined!

 

So the benefits we get from Right and Left is it help us do null checking. If it is Left, then it will skip all the map chain. Therefore we can keep our program safe.