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.

  • 相关阅读:
    pythonchallenge10
    线程同步
    查缺补漏
    查看QQ是否在线
    project euler10
    Toon Shading, step 2
    一种简易的卡通渲染方法(上)
    GLSL学习笔记 9.1 Transformation
    Gloss Mapping
    一种简易的卡通渲染方法(下)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6168431.html
Copyright © 2011-2022 走看看