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. 1.Windows7下安装与破解IntelliJ IDEA2017

    转自:https://www.cnblogs.com/justuntil/p/7245170.html IDEA 全称 IntelliJ IDEA,是Java语言开发的集成环境,IntelliJ在业界 ...

  2. 阿里云安装mysql数据库出现2002错误解决办法

    在安装数据库的时候出现了如下错误: 解决办法如下: 1.在bin目录下 输入:kill -s 9 9907 再输入:ps -ef|grep mysql 显示如下: 2.回到lampp目录下,重启数据库 ...

  3. c#做对比软件

    一些 HTML内容比较/文本差异比较 开源代码 1. DiffPlex - a .NET Diff Generator    http://diffplex.codeplex.com/SourceCo ...

  4. 在Ubuntu上创建一个可以启动的U盘

    1.概观 使用可启动的Ubuntu USB盘,您可以: 安装或升级Ubuntu 在不触及PC配置的情况下测试Ubuntu桌面体验 在借来的机器或网吧上启动到Ubuntu 使用USB盘上默认安装的工具来 ...

  5. type与isinstance使用区别

    Python中,type与isinstance都可以用来判断变量的类型,但是type具有一定的适用性,用它来判断变量并不总是能够获取到正确的值. Python在定义变量的时候不用指明具体的的类型,解释 ...

  6. P3514 [POI2011]LIZ-Lollipop(规律+瞎搞)

    题意 给一个只有1和2的序列,每次询问有没有一个子串的和为x ( 1≤n,m≤1 000 000 )kkk ( 1≤k≤2 000 000 ) 题解 我觉得是道好题. 主要是证明一个性质:假如有一个字 ...

  7. request.getxxxxxx()的使用方法

    request.getSchema() 可以返回当前页面使用的协议,http 或是 https; request.getServerName() 可以返回当前页面所在的服务器的名字; request. ...

  8. django 在非空的字段里插入现象表述

    1.char 类型设置为非空 对于字段不赋值 默认储存为''(空字符串) 2.int 类型设置为非空 对于字段不赋值 单条插入 报错        多条数据同时插入 默认设置为0

  9. 去掉vs2010字符串下红色波浪线

    由于在vs集成了qt库,无法提升代码. 所以下载了visual assist,然后新的问题出现了,凡是在vs中输入的字符串,下面都有红色的波浪线,而且没有错误,只是看着不舒服. 解决方法: 在VAss ...

  10. HDU——T 2647 Reward

    http://acm.hdu.edu.cn/showproblem.php?pid=2647 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...