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.

  • 相关阅读:
    基于.net mvc 的供应链管理系统(YB-SCM)开发随笔1-开篇
    基于.net mvc 的供应链管理系统(YB-SCM)开发随笔
    asp.net http to https
    html嵌入音频
    语义化练习分区域
    html文档引用css使用外部样式表
    字体样式 圆角边框
    HTML-标签
    前端基础—客户端
    html初识form表单
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6168431.html
Copyright © 2011-2022 走看看