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. NUTCH2.3 hadoop2.7.1 hbase1.0.1.1 solr5.2.1部署(一)

     Precondition: hadoop 2.7.1 Nutch 2.3 hbase 1.0.1.1 / hbase 0.98.13 solr 4.8.1 Linux version 3.16. ...

  2. tp5实现多数据库查询

    引言: 有时候一个管理后台,需要涉及到多个数据库.比如,商城管理.直播管理.消息管理等等,它们都有自己的数据库.这个时候,就需要去连接多个数据库,进行处理了.thinkphp可以支持多个数据库连接. ...

  3. django笔记10 cookie整理

    感谢武沛齐老师 Alex老师 cookie 没有cookie所有的网站都登录不上 客户端浏览器上的一个文件 {'user':'ljc'} {"user":'zpt'} reques ...

  4. [Project Euler 429] Sum of squares of unitary divisors(数论)

    题目链接:https://projecteuler.net/problem=429 题目: 我们称 N 的约数 d 为特殊的当且仅当 gcd(d, n / d) = 1. 设 S(n) 为 n 所有特 ...

  5. OLTP 与 OLAP

    OLTP:On-Line Transaction Processing(联机事务处理过程).也称为面向交易的处理过程,其基本特征是前台接收的用户数据可以立即传送到计算中心进行处理,并在很短的时间内给出 ...

  6. codeforces 404 B Marathon【fmod对浮点数取余】

    题意:给出一个边长为a的正方形,给出d,给出n,输出走得距离为i个d的时候的坐标 学习的这一篇 http://blog.csdn.net/synapse7/article/details/215956 ...

  7. FlatternMap和Map的区别

    flattenMap使用步骤:     1.传入一个block,block类型是返回值RACStream,参数value     2.参数value就是源信号的内容,拿到源信号的内容做处理     3 ...

  8. <<大学>>原文

    大学之道,在明明德,在亲民,在止于至善.知止而后有定,定而后能静,静而后能安,安而后能虑,虑而后能得.物有本末,事有终始,知所先后,则近道矣. 古之欲明明德于天下者,先治其国,欲治其国者,先齐其家:欲 ...

  9. 事件处理:pull与push

    push:对应函数调用:属于发起方主动型 pull :对应消息循环:模型为信息池+事件循环+派发:属于接收者主动: 通常这种模式的角色对应于消息中心(事件派发中心). 观察者模式:变化+派发.

  10. 紫书 例题 10-24 UVa 1641(面积计算)

    遍历一遍,遇到边界为奇数次时,格子在多边形内 偶数次时,在多边形外 #include<cstdio> #define REP(i, a, b) for(int i = (a); i < ...