Understanding code composition (compose) in JavaScript functional programming

The content of this article is about the understanding of code composition (compose) in JavaScript functional programming. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

How to understand code composition (compose) in functional programming?

Definition: As the name suggests, in functional programming, Compose is to piece together several distinctive functions and combine them. , generate a brand new function

Code understanding:

// 一个将小写转大写的函数
let toUpperCase = (x) => x.toUpperCase();

// 一个在字符后加！的函数
let exclaim = (x) => x + '!';

// 将两个函数组合起来, 这里假设我们实现了compose
let shout = compose(toUpperCase,exclaim);

shout('js每日一题') // JS每日一题 !, 显示结果里上面两个函数的特点都应用上了

pointfree

There is an important concept in code combination: pointfree (never tell your data), its It means that the function does not need to mention what kind of data it will operate on.

It’s a bit obscure, let’s go to the code to understand it

// 我们有一个将字符转换成大写并且将其空格转换为'-'的函数
// 细节的同学应该发现这个函数暴露了一个word形参
// 根据pointfree定义，此函数非pointfree模式
let snakeCase = (word) => word.toUpperCase().replace(/\s+/ig,'-');

// 下面这个函数与上面的功能一致，但我们可以观察到其没有数据暴露,所以其为pointfree模式
let snakeCase = compose(replace(/\s+/ig,'-'),toUpperCase)

Having said so much, what can it do? It can help We reduce unnecessary naming and keep the code simple and generic

compose implementation

Above we all assume that the compose method already exists, next we will implement it

First analyze its characteristics

• Both functions have a common parameter
• The execution order of the functions is from right to left
• The results of the execution of the previous function are handed over to the latter Function processing

According to the above example and the characteristics we analyzed, implement a simplest version

// 这样子其实就能满足我们上面示例的要求了
const compose = function(f, g) {
  return function(x) {
    return f(g(x));
  };
};

Is it over? No, we can see the compose example above Only two functions are passed in, because our simplified compose implementation only supports two functions, so if we want to support a very long pipeline, obviously the above compose is not enough, and then we Let’s take a look at the compose implementation of the excellent open source library redux

// 摘自 https://github.com/reactjs/redux/blob/master/src/compose.js
export default function compose(...funcs) {
  // 没有传入函数运行直接返回参数
  if (funcs.length === 0) {
    return arg => arg
  }
  // 只传入一个函数，就返回其本身
  if (funcs.length === 1) {
    return funcs[0]
  }
  
  // 核心代码其实就是一句reduce, reduce特性就是按顺序执行，并且将结果传递给下一次执行, 这里多说一句, reduce顺序执行多个相依赖的promise也很好用
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

Summary

Function that combines multiple single-feature functions

Multiple The function serves a set of data (common parameters)

No need to state the data (pointfree)

The functions are executed sequentially from right to left, and the result is used as the parameter of the next function

This article has ended here. For more exciting content, you can pay attention to the JavaScript Tutorial Video column on the PHP Chinese website!

The above is the detailed content of Understanding code composition (compose) in JavaScript functional programming. For more information, please follow other related articles on the PHP Chinese website!