JavaScript functional programming basics

1. Introduction

Functional programming has a long history, but it has frequently appeared in the public eye in recent years. Many languages ​​that do not support functional programming are also actively adding very typical functional programming features such as closures and anonymous functions. A large number of front-end frameworks also boast that they use the features of functional programming, as if they are very advanced once they are related to functional programming. In addition, there are some frameworks and libraries specifically for functional programming, such as: RxJS, cycleJS, ramdaJS, lodashJS, underscoreJS, etc. Functional programming is becoming more and more popular. Mastering this programming paradigm is beneficial to writing high-quality and maintainable code, so it is necessary for us to master it.

2. What is functional programming?

Wikipedia definition: Functional programming (English: functional programming), also known as functional programming, is a programming paradigm that regards computer operations as mathematical function calculations and avoids the use of program states and mutable objects.

3. Pure functions (the cornerstone of functional programming, functions without side effects)

In junior high school mathematics, the definition of function f is: for input x, it produces a unique output y=f(x). This is a pure function. It meets two conditions: 1. This function always produces the same output when the input value is the same. The output of a function is independent of the context of the current execution environment. 2. The running process of this function does not affect the running environment, that is, there is no side effect (such as triggering events, initiating http requests, printing/logging, etc.). Simply put, when the output of a function is not affected by the external environment and does not affect the external environment, the function is a pure function, that is, it only focuses on logical operations and mathematical operations, and the same input always gets the same output. JavaScript built-in functions include many pure functions and many impure functions.

Pure functions: Array.prototype.sliceArray.prototype.mapString.prototype.toUpperCase

Impure functions: Math.randomDate.nowArray.propertytype.splice

Here we take the slice and splice methods as examples:

var xs = [1,2,3,4,5];
// Pure xs.slice(0,3);
//=> [1,2,3]
xs.slice(0,3);
//=> [1,2,3]
xs.slice(0,3);
//=> [1,2,3]

// Impure xs.splice(0,3);
//=> [1,2,3]
xs.splice(0,3);
//=> [4,5]
xs.splice(0,3);
//=> []

We can see that calling the slice method of an array returns exactly the same result each time, and xs does not change, while calling the splice method returns a different value each time, and xs becomes unrecognizable. This is why we emphasize the use of pure functions, because pure functions have huge advantages over impure functions in terms of cacheability, portability, testability, and parallel computing. Here we take cacheability as an example:

var squareNumber = memoize(function(x){ return x*x; });
squareNumber(4);
//=> 16
squareNumber(4); // Read the result of input value 4 from the cache //=> 16

So how do we make an impure function pure? For example, the following function:

var minimum = 21;
var checkAge = function(age) {
  return age >= minimum;
};

The return value of this function depends on the value of the mutable variable minimum, which depends on the system state. In large systems, this reliance on external state is a major source of system complexity.

var checkAge = function(age) {
  var minimum = 21;
  return age >= minimum;
};

Through the transformation, we turned checkAge into a pure function that does not depend on the system status. However, the minimum is defined in a hard-coded way, which limits the scalability of the function. We can see how to use functional methods to solve this problem elegantly in the following currying. Therefore, the basic way to make a function pure is not to rely on the system state.

4. Function Currying

The concept of currying is simple: the process of converting a low-order function into a higher-order function is called currying.

To use a vivid metaphor:

For example, for the addition operation: var add = (x, y) => x + y, we can curry it like this:

//es5 writing var add = function(x) {
  return function(y) {
    return x + y;
  };
};

//es6 writing var add = x => (y => x + y);

//Try it out var increment = add(1);
var addTen = add(10);

increment(2); // 3

addTen(2); // 12

For a very simple function like addition, currying doesn't help. Remember the checkAge function above? We can curry it like this:

var checkage = min => (age => age > min);
var checkage18 = checkage(18);
checkage18(20);
// =>true

This shows that function currying is the ability to "preload" a function, passing one or two arguments to it, and getting a new function that remembers those arguments. In a sense, this is a kind of caching of parameters, which is a very efficient way to write functions:

var curry = require('lodash').curry;

//Currying two pure functions var match = curry((what, str) => str.match(what));
var filter = curry((f, ary) => ary.filter(f));

// Check if there are spaces in the string var hasSpaces = match(/\s+/g);

hasSpaces("hello world"); // [ ' ' ]
hasSpaces("spaceless"); // null

var findSpaces = filter(hasSpaces);

findSpaces(["tori_spelling", "tori amos"]); // ["tori amos"]

5. Function Composition

Suppose we need to do some column operations on a string, as shown below. For the sake of example, we only do two operations on a string. We define a new function shout, first call toUpperCase, and then pass the return value to the exclaim function. What's wrong with this? It is not elegant. If there are many things to do, the nested functions will be very deep, and the code is executed from the inside to the outside, which is not intuitive. We hope that the code will be executed from right to left. At this time, we have to use combination.

var toUpperCase = function(x) { return x.toUpperCase(); };
var exclaim = function(x) { return x + '!'; };

var shout = function(x){
  return exclaim(toUpperCase(x));
};

shout("send in the clowns");
//=> "SEND IN THE CLOWNS!"

Using composition, we can define our shout function like this:

//Define compose
var compose = (...args) => x => args.reduceRight((value, item) => item(value), x);

var toUpperCase = function(x) { return x.toUpperCase(); };
var exclaim = function(x) { return x + '!'; };

var shout = compose(exclaim, toUpperCase);

shout("send in the clowns");
//=> "SEND IN THE CLOWNS!"

The code is executed from right to left, which is very clear and easy to understand. The compose we defined is like N-sided glue, which can combine any number of pure functions together. This flexible combination allows us to combine functional code like building blocks:

var head = function(x) { return x[0]; };
var reverse = reduce(function(acc, x){ return [x].concat(acc); }, []);
var last = compose(head, reverse);

last(['jumpkick', 'roundhouse', 'uppercut']);
//=> 'uppercut'

6. Declarative and Imperative Code

Imperative code: tells the machine how to do things (how), so that no matter what you want (what), it will do it according to your command. Declarative code: Tell the "machine" what you want (what) and let the machine figure out how to do it (how). Unlike imperative, declarative means we write expressions rather than step-by-step instructions. Take SQL as an example. It does not have a "do this first, then do that" command. Instead, it only has an expression that specifies what data we want to get from the database. As for how to retrieve data, it is decided by itself. Whether it is database upgrade or SQL engine optimization in the future, there is no need to change the query statement at all. This is because there are multiple ways to parse an expression and get the same result. Here, for easier understanding, let's look at an example:

// Imperative var makes = [];
for (var i = 0; i < cars.length; i++) {
  makes.push(cars[i].make);
}

// Declarative var makes = cars.map(function(car){ return car.make; });

The imperative loop requires that you must first instantiate an array, and the interpreter will continue to execute the subsequent code only after executing the instantiation statement. Then you just iterate over the cars list, manually incrementing the counter, just like you were driving a car with all its parts exposed. This is not what a good programmer does. The declarative writing is an expression, and the details of how to iterate the counter and how to collect the returned array are hidden. It specifies what to do, not how to do it. In addition to being clearer and more concise, the map function can be further optimized independently, and even use the extremely fast map function built into the interpreter, so that our main business code does not need to be changed. An obvious benefit of functional programming is this declarative code. For pure functions without side effects, we don’t need to consider how the function is implemented internally and can focus on writing business code. When optimizing code, you only need to focus on these stable and solid functions. On the contrary, impure non-functional code will produce side effects or rely on external system environment, and you should always consider these unclean side effects when using them. In complex systems, this can be extremely taxing on the programmer's mind.

7. Point Free

Pointfree mode means that you never have to tell your data. What this means is that the function does not need to mention what kind of data it will operate on. First-class functions, currying, and composition help greatly in achieving this pattern.

// Not pointfree, because data is mentioned: word
var snakeCase = function (word) {
  return word.toLowerCase().replace(/\s+/ig, '_');
};

// pointfree
var snakeCase = compose(replace(/\s+/ig, '_'), toLowerCase);

This style can help us reduce unnecessary naming and keep the code concise and universal. Of course, in order to write in a Point Free style in some functions, other places in the code must be less Point Free, and you need to make your own choices here.

8. Sample Application

With the above knowledge, it's time to write a sample application. Here we use ramda instead of lodash or other libraries. Ramda provides many functions such as compose and curry. Our application will do four things:

1. Construct URL based on specific search keywords

2. Send an API request to flickr

3. Convert the returned json to html image

4. Put the picture on the screen Two impure actions are mentioned above, namely getting data from flickr's api and placing the picture on the screen. Let's define these two actions first so we can isolate them. Here we simply wrap jQuery's getJSON function, turn it into a curry function, and also swap the parameters. We put them in the Impure namespace to isolate them so that we know they are dangerous functions. Using the techniques of function currying and function composition, we can create a functional application:

Preview address: https://code.h5jun.com/vixe/1/edit?html,js,output Look, what a wonderful declarative specification, it only tells what to do, not how to do it. Now we can think of each line of code as an equation, and the properties represented by the variable names are the meaning of the equation.

IX. Conclusion

We've seen how to apply our new skills in a small yet realistic application, but what about exception handling and code branching? How can we make the entire application functional, rather than just putting destructive functions in a namespace? How to make applications more secure and expressive? In the next article, I will introduce more advanced knowledge of functional programming, such as Functor, Monad, Applicative and other concepts.

The above is the detailed content of the basics of javascript functional programming. For more information about javascript functional programming, please pay attention to other related articles on 123WORDPRESS.COM!