zoukankan      html  css  js  c++  java
  • [JS Compose] 2. Enforce a null check with composable code branching using Either

    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.

  • 相关阅读:
    set命令_Linux
    AngularJS的date 过滤器
    JMeter环境介绍
    JMeter测试计划要素
    HTTP协议的压缩及URL Encode
    fiddler配置及使用教程
    Slenium常用方法
    Selenium八大定位
    CSS实现上下左右垂直居中
    SASS用法笔记
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6168431.html
Copyright © 2011-2022 走看看