[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.
相关文章
- 10个JS常见算法题目
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
- 【说站】js中如何自定义迭代行为
- 【说站】js函数声明的2种方式
- 【说站】js自定义事件的实现
- JS探究之call和apply到底哪个更快?
- JS设置定时器_js设置定时器
- 彻底弄懂JS原型与原型链
- 原生 JS 实现 HTML 转 Markdown,以及其实现逻辑(html2md.js 或 html2markdown.js)
- js将人民币金额转换为大写详解编程语言
- js中2个等号与3个等号的区别详解编程语言
- 深入浅出MySQL中的Code学习实用编程技巧(mysql中code)
- Redis中的订阅机制及其在JS中的应用(redis 订阅 js)
- Code:loadScript()加载js的功能函数
- 精通JS正则表达式(推荐)
- js事件处理函数间的Event物件是否全等
- js获取IP和PcName(IE)在vs中可用
- js中的referrer返回上一页使用介绍
- JS将所有对象s的属性复制给对象r(原生js+jquery)
- JS弹出层单纯的绝对定位居中示例代码
- js获取当前地址JS获取当前URL的示例代码
- js时间比较示例分享(日期比较)
- node.js中的http.response.end方法使用说明
- js键盘事件的keyCode