In this lesson you will create a utility function that allows you to quickly compose behavior of multiple functions to create new behavior. By the end, you will have successfully created a tremendously popular helper function that is used in JavaScript libraries ranging from Redux to Ramda.

const startVal = 4;

const squared = x => x * x;
const doubled = x => x * 2;
const addTen = x => x + 10;
const halfNum = x => x / 2; const result = halfNum(addTen(doubled(squared(startVal))));

The code above is not good enough. We can use 'compose' function instead of nested functions call together.

Write 'compose' function:

const compose = (...fns) => initialVal => fns.reduceRight((val, fn) => fn(val), initialVal)

Now we can optimizte the code:

const result = compose(
  halfNum,
  addTen,
  doubled,
  squared
)(startVal);

const compose = (...fns) => (...args) => fns.reduceRight((res, fn) => [fn.call(null, ...res)], args)[];

[Javascript] Compose multiple functions for new behavior in JavaScript的更多相关文章

  1. 45 Useful JavaScript Tips, Tricks and Best Practices(有用的JavaScript技巧,技巧和最佳实践)

    As you know, JavaScript is the number one programming language in the world, the language of the web ...

  2. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  3. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  4. asp.net中调用javascript自定义函数的方法(包括引入JavaScript文件)总结

    通常javascript代码可以与HTML标签一起直接放在前 端页面中,但如果JS代码多的话一方面不利于维护,另一方面也对搜索引擎不友好,因为页面因此而变得臃肿:所以一般有良好开发习惯的程序员都会把 ...

  5. 常用脚本语言Perl,Python,Ruby,Javascript一 Perl,Python,Ruby,Javascript

    常用脚本语言Perl,Python,Ruby,Javascript一 Perl,Python,Ruby,Javascript Javascript现阶段还不适合用来做独立开发,它的天下还是在web应用 ...

  6. 实践javascript美术馆的小案例,学习到的东西还是蛮多的,包括javascript编程中的预留退路、分离javascript、以及实现向后兼容等

    javascript美术馆(改进2) 一.javascript编程过程中的好习惯 1.实现预留退路 js被禁掉,图片也可以显示出来,href属性带有图片路径 <script src=" ...

  7. 面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统

    面向对象的JavaScript --- 原型模式和基于原型继承的JavaScript对象系统 原型模式和基于原型继承的JavaScript对象系统 在 Brendan Eich 为 JavaScrip ...

  8. JavaScript学习笔记 - 进阶篇(6)- JavaScript内置对象

    什么是对象 JavaScript 中的所有事物都是对象,如:字符串.数值.数组.函数等,每个对象带有属性和方法. 对象的属性:反映该对象某些特定的性质的,如:字符串的长度.图像的长宽等: 对象的方法: ...

  9. JavaScript ES6 Arrow Functions(箭头函数)

    1. 介绍 第一眼看到ES6新增加的 arrow function 时,感觉非常像 lambda 表达式. 那么arrow function是干什么的呢?可以看作为匿名函数的简写方式. 如: var ...

随机推荐

  1. less14 颜色函数2

    less div{ // hue()色相值 z-index: hue(hsl(90,100%,50%)); //90 ////saturation()饱和度 z-index: saturation(h ...

  2. nyoj--1233--差值(贪心模拟+大数)

    差值 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 输入一个整数数组,将它们连接起来排成一个数,找出能排出的所有数字中最大,最小的两个,输出两个数的差值.例如输入数组{ ...

  3. [POJ2728] Desert King 解题报告(最优比率生成树)

    题目描述: David the Great has just become the king of a desert country. To win the respect of his people ...

  4. MetaSploit攻击实例讲解------工具Meterpreter常用功能介绍(kali linux 2016.2(rolling))(详细)

    不多说,直接上干货! 说在前面的话 注意啦:Meterpreter的命令非常之多,本篇博客下面给出了所有,大家可以去看看.给出了详细的中文 由于篇幅原因,我只使用如下较常用的命令. 这篇博客,利用下面 ...

  5. MPP的进化 - 深入理解Batch和MPP优缺点

    https://mp.weixin.qq.com/s/scXNfkpjktCZxBg3pYEUUA?utm_medium=hao.caibaojian.com&utm_source=hao.c ...

  6. WLAN HAL

      WLAN HAL WLAN 框架具有三个 WLAN HAL 表面,分别由三个不同的 HIDL 软件包表示: 供应商 HAL:Android 专用命令的 HAL 表面.HIDL 文件位于 hardw ...

  7. 使用 AutoHotKey 配合Win10分屏功能

    Win+tab键 建立新的虚拟桌面 使用笔记本电脑的触摸板,用四个手指滑的话就可以在虚拟桌面间切换 那么就映射一下, 要是能一键切换的话就相当于是个"老板键"了 1.安装AutoH ...

  8. echarts如何修改数据视图dataView中的样式

    原文链接:点我 做了一个现实折线图的图表,通过右上角icon可以自由切换成柱状图,表格.在表格中遇到的一点小问题,解决方案如下: 1.场景重现 这是一个显示两个折线图的图表,一切看起来都很顺利.但是点 ...

  9. js实现简易打点计时器

    很简单的实现一个打点计时器,规定从start至end,每次加1,每次打印间隔100ms,并且返回取消方法. 代码如下: //打点计时器,每间隔100毫秒+1 function count(start, ...

  10. springMVC+request.session实现用户登录和访问权限控制

    用springmvc mybatis实现用户登录登出功能,使用session保持登录状态,并实现禁止未登录的用户访问.感谢谷歌资源,在这里做个学习记录加深自己的印象. 原文在我的https://my. ...