Why does JavaScript use functional programming?

Reasons: 1. The syntax of js is borrowed from the functional programming language Scheme. 2. As far as the browser is concerned, with the development of various single-page frameworks, the processing capabilities of the client continue to improve, and more and more business logic is placed on the client, resulting in more and more states to be maintained by the client. ;The ensuing problem is that if you are not careful, you will use a large number of functions that depend on external variables. These functions continue to increase with the business logic, resulting in a sharp increase in logical branches, making the status difficult to track, poor code readability, and difficult to maintain. , and functional programming has a good solution.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

1. What is functional programming?

Functional programming (FP), referred to as FP, is not a library or framework, as opposed to procedural programming (Procedural programming), but a programming paradigm. FP avoids or minimizes the side effects of function calls on external states and systems by declaring pure function abstract data processing.

The so-called side effects generally include changing the system state outside the function, throwing exceptions, processing user operations, modifying input parameters, database query operations, DOM operations, etc., which may cause system errors.

2. Why use functional programming ideas in JavaScript

##2.1 From the perspective of language characteristics

const multiply = x => x * x multiply(6) // 36

const add = x => y => x + y const add10 = add(10) add10(5) // 15 const compose = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x) const a = x => x + 1 const b = x => x + 2 const composedFn = compose(a, b) composedFn(1) // 1 + 1 + 2 = 4

const flatten = (arr = []) => arr.reduce( (acc, val)=> accconcat(Array.isArray(val) ? flatten(val) : val), [] ) let arr = [1,[ 4, 5 ], 2, 3]; flatten(arr) // [1, 4, 5, 2, 3]

2.2 From the perspective of actual needs

3. Advantages of using functional programming

• Separate data and processing logic, the code is more concise, modular and readable

• Easy to test, the test environment is easy to simulate

• Strong reusability of logic code

4. Concepts related to functional programming

• Declarative programming

• Pure function

• Immutable data

4.1 Declarative programming

Declarative programmingonly describes the nature of the target, thereby abstracting the formal logic, Tell the computer what to calculate rather than how to calculate it step by step. For example, regular, SQL, FP, etc.

Imperative Programming Imperative ProgrammingTell the computer the calculation operation of each step

4.2 Pure function

• The output of the function is only related to the input, The output produced by the same input is consistent and does not depend on external conditions

• Function calls will not change the status or variables outside the function domain and will not have side effects on the system

看个简单的例子：

let counter = 0 const increment = () => ++counter const increment = counter => ++counter

前一个函数每次调用都会修改外部变量的值，返回值也依赖于外部变量；后一个函数对于同一输入值每次返回的结果都相同，并且不会对外部状态造成影响。所以后一个是纯函数。

为什么要追求函数的纯度，这就涉及到一个称为引用透明性的概念。

4.2.1 引用透明性

纯函数的这种函数的返回值只依赖于其输入值的特性，被称为引用透明性（referential transparency)，纯函数都是可以进行缓存的。

const memorize(pureFn) { const _cache = {} return (...args) => { const key = JSON.stringify(args) return _cache[key] || (_cache[key] = purFu.apply(null, args)) } }

4.3 Immutable Data

「可变的全局状态是万恶之源」（其实从功能代码的角度看，局部和全局是相对而言的）,简而言之可变状态会让程序的运行变得不可预测，代码可读性差，难以维护。

在 JS 中，当函数入参是对象类型的数据时，我们拿到的其实是个引用，所以即使在函数内部我们也是可以修改对象内部的属性，这种情景依然会产生副作用。

所以这个时候就需要引入 Immutable 的概念。 Immutable 即 unchangeable， Immutable data在初始化创建后就不能被修改了，每次对于 Immutable data 的操作都会返回一个新的 Immutable data。 所以并不会对原来的状态形成改变（当然不是简单的深拷贝再修改）。

Immutable 比较流行的 JS 实现有 immutable-js 和 seamless-immutable; 对于 React 党来说， immutable-js 一点都不陌生， immutable-js 配合 Redux 就是一种很好的 FP 实践。

const map1 = Immutable.Map({a:1, b: {d:2}, c:3}); const map2 = map1.set('a', 50); map1 === map2 // false const mapb1 = map1.get('b') const mapb2 = map2.get('b') mapb1===mapb2 // true

【相关推荐：javascript视频教程、编程视频】

The above is the detailed content of Why does JavaScript use functional programming?. For more information, please follow other related articles on the PHP Chinese website!