A good tutorial on functional JavaScript programming

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

Require:You should already 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 little information mentions the functional features of JavaScript. In this guide, I will only explain these basics without digging into other functional languages ​​or this is a Lambda operator.

You can click on all the examples and the code you see will be executed, which will make the guide interactive. You can use this tooSandboxCome and try it.

Lesson 1 - Anonymous Functions

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

Example:

The following two functions handle the same thing, andaverageGivingzIt remains after the assignment is finished - but anonymous functions do 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 our next lessonFunction as value。

Lesson 2 - Functions as Values

In fact, the way we declare functions in JavaScript can be regarded as a simplified syntax (that is,Syntactic sugar，syntactic sugar）。

example:

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) ); 

From this we can draw a conclusion that a function is a value like a string, a number, or an array. There are several more problems:

Can I pass the function as an argument?

Yes, see the example below.

Is it possible to generate functions in real time?

Of course, this is a high-level theme, it can be done throughevalFunction to complete.Tips:Check out the source code of 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 - Calling functions in two ways

In JavaScript, there are two ways to call functions. The general way is to put parameters in brackets, such asalert(42). Another way is to put both functions and parameters in brackets, such as(alert)(42)。

example:

alert(42); 

(alert) (42); 

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

Why parentheses on both sides of a function are important:If you write brackets, the code in the brackets will be calculated first. After calculation, there will be a value where the brackets 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" conditional call. Use this method to shorten the source code and the code becomes 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 - What's good about it

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

1. Modular and reusable code

Now that you know how to use a function as a value, you should try it too! A good example is built-in arrayssortmethod. Predefinedsort()Convert all objects into strings and sort them in the order of words. But if we have user-defined objects or numbers then it is not very useful. So this function allows you to give him a function that compares it as a parameter, such assort(compareFunction). This method allows us to not even have to touch the actualsortmethod.

example:

var myarray = new Array(6,7,9,1,-1); 
var sortAsc = function(x,y) { return x-y; }; 
var sortDesc = function(x,y) { return y-x; }; 
(sortDesc); 
alert(myarray); 

(sortAsc); 
alert(myarray); 

2. Event handler

Using functional programming for event handlers is perhaps the most intuitive function as worth applying. In this case, we will demonstrate an example immediately.

Simple example:;ie

There is now a Button class with a custom onclick behavior.

function Button(clickFunction) { 
   = ("button"); 
  (("Press me!")); 
   = clickFunction; 
} 
var bt = new Button(function() { alert("42"); }); 

function Button(value) { 
   = value; 
   = ("button"); 
  (("test")); 
} 

 
 = function() { alert(); }; 

 = (function(v) { 
      return function() { alert(v); }; 
      }) ();