The function programming in JS

Before I saw an article on the Internet to teach you how to use JS to write the code of loading.

After learning some and expanding it's very rewarding to record here.

The original article could not be found. So I'm not here to attach the link.

Let's look at the following two sections of JS code.

The above two ends of the code effect is identical, all in a specified array, the specified number is located in the subscript. The first most people can understand. The second one is not necessarily.

This takes you from the first version of the step to the final functional version.

I hope you will encounter so difficult to read the code, know how to understand.

In order to change from above to below, we need to know the following knowledge.

Arrow functions

Ternary operator (not spoken)

Tail recursion optimization

anonymous function (not spoken)

Currying

Higher order functions

Among them, the tail recursion optimization, and the curry, the higher order function, all is the function programming inside the thing. So it is necessary to introduce briefly what is functional programming.

Here is a reference to the figure below.

The above figure is not to say, the bottom of the highest, but the more the lower the cost of the brain.

What is functional programming?

In fact, functional programming is developed from the category theory (category theory). In fact, the category theory and calculus, mathematical logic, and so on are a mathematical theory. Functional programming is only a reference to the idea of development, as the design pattern originally originated from architecture.

In order to understand the functional programming better, we also introduce the category theory briefly. I do not understand the advanced ...

It's so defined in Wikipedia.

In other words, as long as there is a relationship that can be transformed from one object to another, then the relationship between the object and them forms a category.

The following figure is a.

The red dots and the yellow arrows together form a category.

Arrows arrow, and there is a formal name called the state shot (morphism). Category theory holds that all members of the same category are "deformed" (transformation) of different states. With a "state shot", a member can become another member.

The above is very abstract, we give an example to illustrate the next.

Everyone has a better understanding of object-oriented thinking, in object-oriented thinking, everything is an object, and objects can be abstracted into classes. For example, the yellow man, the white man, the Negro. are objects that can be abstracted for this class. This is what they have in common. But there is no conversion relationship between them, black people can not be converted to white, even if he plastic surgery is very white, conceptually he is a black.

and the digital 1,2,3,4,5 ... There is a certain relationship between them, which can become 2,2+1 can become 3,2+2 and can become 4. We can assume that the number and the state shot between them are a category. Each number, through a situation can be changed to another number.

So the category consists of two parts

1. Members
2. Relationship

And over to the inside of the program is

1. Value
2. Function

In simple terms, a value can be changed to another value by one function. So functional programming requires that each function be clean, enter a value, and go out another value. Data outside of any method is not manipulated.

Functional programming has two of the most basic operations.

1. Synthesis

The concept of synthesis is that if a value needs to go through multiple functions to become a different value, you can synthesize two functions into a function. For example 1, need to go through add1 and add2 to become 4, then you can synthesize a add3 out.

Suppose Add1=f,add2=g

It looks like there's a lot of functions, so we're going to give add1 and add2 all anonymous.

The synthesis of functions also satisfies the binding law.

Suppose f,g,h are add1,add2,add3 respectively.

So (H g). F is add3 (Add1 (ADD2)) and H. (g f) is Add1 (ADD2 (ADD3))

Both of them should be equal.

2. currying

f (x) and g (x) are synthesized as f (g (X)), and there is a hidden premise that both F and G can accept only one parameter. If you can accept multiple parameters, such as f (x, Y) and G (A, B, c), the synthesis of the function is cumbersome.

This will require the function to curry. The so-called "curry" is to convert a multi-parameter function into a single-parameter function.

Here to explain, after the currying is the use of JS inside the chain call. ADDX (2) actually returns the function (x)

{return x+2;} This time with another (1), is to put 1 into the inside of the execution.

Of course, functional programming has a lot of other things, here is not introduced, interested in can check their own.

Next, tail recursion optimization

We know the harm of recursion, that is, if the recursion is deep, stack can not stand, and will cause a significant decline in performance. So, we use the tail recursive optimization technique, which reuses the stack every time it is recursive, which can improve performance, which, of course, requires language or compiler support. Java is not supported, but JavaScript is supported. The so-called support, that is, the compiler will automatically optimize, for the tail-recursive code will be automatically optimized.

Normal recursion.

The following is the process of entering the stack and the stack. Will save the previous step of the calculation state, too deep, the stack overflow.

FAC (5)

(5*FAC (4))

(5* (4*FAC (3)))

(5* (3*FAC (2)))

(5* (2*FAC (1)))

(5* (3*2))

(5* (6))

(5*24)

120

Tail recursion

When a recursive call is the last executed statement in the body of a function and its return value is not part of an expression, the recursive call is the tail recursion

Each time a separate function is executed, and the previous function is not associated.

FAC (5,1)

FAC (4,5)

FAC (3,20)

FAC (2,60)

FAC (1,120)

120

The normal recursive creation stack accumulates and then calculates the contraction, and the tail recursion consumes only the constant memory. Just save each computed value and pass it on to the same function.

higher-order functions.

The higher order function is the function when the argument, the incoming function is done in a package, and then return this encapsulation function. It's been used all the time.

Arrow functions

An arrow expression introduced by ECMAScript2015. The arrow functions are actually anonymous functions. The simple idea is to create a function from an arrow.

A parameter can omit the parentheses, the method body can omit the curly brace when there is only one sentence

Function (x) {return x+1}; Equivalent to (x) =>{return x+1} or X=>return x+1;

No arguments must have parentheses.

Function () {return =>{return} is equivalent to ()

If you want to add a name.

Var add = () =>{return +}; Call Add () will return 2

The introduction of all introduced, the following is a step-by-step transformation.

Original version

After tail recursion optimization

Replace ternary operator

function parameterization in function body

Convert to Arrow function

Anonymous

Introduce higher-order functions and curry.

To make it easier to call and add a name

The following breakpoint diagram helps to understand.

The function programming in JS