Functional JavaScript (i) Introduction _javascript tips

Let's pretend to do a task now: write JavaScript code as much as possible in the principle of functional language.

The next series of articles is to get you and me to embark on such a journey. First, we need to correct some of the concepts of functional language errors that may exist in your mind.

The function type in the JS language is seriously misunderstood.

Obviously, there are quite a few developers who want to use JavaScript's functional paradigm every day. I would say that a larger part of JavaScript developers don't really understand these things.

I think the reason for this is that most of the development languages used on the Web server are derived from C, and we all know that these languages are not functional languages.

There are generally two levels of confusion. The first layer is about the usage in the following example, which is a very common usage in jquery:

$ (". Signup"). Click (Function (event) {
    $ ("#signupModal"). Show ();
    Event.preventdefault ();
});

In the previous code: we passed an anonymous function as a parameter, which is the notorious callback function in JavaScript. Will these functions be invoked? Not at all!

The above example illustrates a key feature of a functional language: A function is a parameter. On the other hand, this example violates almost every functional programming paradigm that can be violated with just three lines of code.

The second level of doubt is more subtle. Look at this: only a handful of fashionable JS developers look at themselves like this:

Well, that's great! But I am fully aware of functional programming, and I have used underscore.js in all projects.

Underscore.js is a very famous and ubiquitous JavaScript library. For example: Suppose I have a set of words, and I need the first two letters corresponding to each word. This is very simple to write with underscore.js:

var firsttwoletters = function (words) {return
    _.map (words,function (word) {return
        _.first (word,2);
    });

Look at this JavaScript example. I used functional, refined and useful functions: _.map and _.first. What do you think about this?

Although functions such as underscore.js and _.map are useful functional paradigms, it is somewhat incomprehensible to put these things together in this example. Do we really need to do this?

If we start thinking about how to be more "functional", maybe we can rewrite the example above:

... a little bit of magic
var firsttwoletters = map (2);

To think about it, this line of code has the same effect as the 5 lines above. Many words are just parameters or placeholders. The real logic is to combine the map function, the one and constant 2 in a meaningful way.

Some people may wonder: where is the magic in this example? After all, it's a bit like bragging to say any of the examples, right?

I'm going to use the next two articles to explain what's really magical about this example, and if you're curious, you can keep looking down.

This series of blogs is designed to help you apply the beauty of functional programming to your JavaScript code.

In the next section, I'll discuss a variety of functional and non functional elements in the JavaScript language. With this knowledge, we can take these elements together and slowly form a complete system of functional programming in our brains, and understand how they behave in JavaScript.