A good guide to functional JavaScript programming

Do you know that JavaScript is actually a functional programming language? This guide will teach you how to use the functional features of JavaScript.

Requirements:You should have a basic understanding of JavaScript and DOM.

The purpose of writing this guide is because there is too much information about JavaScript programming, but very few documents mention the functional features of JavaScript. In this guide, I will only explain this basic knowledge without going deep into other functional languages or Lambda operators.

You can click all the examples and the code you see will be executed, so that the Guide will become interactive. You can also try this sandbox.

Lesson 1: anonymous Functions

We will first introduceAnonymous Functions. An anonymous function is a function without a name.
You can think of them as disposable functions. They are especially useful when you only need to use a function once. By using anonymous functions, there is no need to keep the functions in the memory, so using anonymous functions is more efficient.

Example:

The following two functions process the same thing, whileAverageInZThe value is retained after the assignment is completed-but the anonymous function does not.

function average(x,y) {  return (x+y)/2; } var z = average(1,3); alert(z); 

var z = function(x,y) {    return (x+y)/2;   } (1,3); alert(z); 

This naturally leads to the next lesson.Function as Value.

Lesson 2-function as Value

In fact, we generally declare functions in JavaScript as a simplified syntax (that isSyntactic sugar,Syntactic sugar).

Example:

The following two expressions are actually exactly the same. Therefore, the expression on the left is only the abbreviation on the right.

function average(x,y) {  return (x+y)/2; } alert( average(1,3) ); 

var average = function(x,y) {  return (x+y)/2; } alert( average(1,3) ); 

Here we can draw a conclusion that a function is a value just like a string, number, or array. There are also several problems:

Can I pass functions as parameters?

Yes. See the example below.

Can functions be generated in real time?

Of course, this is an advanced topic. EvalFunction. TIPS:Check the source code on this page.

Example:

This example demonstrates how to pass a function as a parameter.

var applyFun = function (f,x,y) { return f(x,y); }; var add = function(x,y) {  return x+y; }; alert( applyFun(add,3,4) ); // 7 

Lesson 3-two methods to call a function

In JavaScript, there are two methods to call functions. The general method is to put the parameters in brackets, suchAlert (42). Another way is to put both functions and parameters in brackets, as shown in(Alert) (42).

Example:

alert(42); 

(alert) (42); 

(function(x) { alert(x-13); }) (55); 

The brackets on both sides of the function are important:If you write parentheses, the code in the brackets will be calculated first. After calculation, there is a value in the place where the parentheses are located. This value may be a string, a number, or a function.

Lesson 4-short circuit condition call

Now we will learn how to use the "Short Circuit" condition to call. This method can shorten the source code and make the code more readable.

Example:

This syntax is not used on the left expression, but on the right expression.

var f = false; var t = true;var z; if(f)  z = 4; else if(t)  z = 2; alert(z); 

var f = false; var t = true; var z = (f && 4) || (t && 2); alert(z); 

Lesson 5-where is it okay? Now we have learned some functional JavaScript content. So where is it? Functional JavaScript programming has three main reasons:

1. It helps write modular and usable code.
2. It is very effective for event handlers.
3. It's interesting!

In the following sections, I will give