Introduction to functional JavaScript (I)

Let's pretend we have a task to do now: write JavaScript code as much as possible in accordance with the principles of a functional language.

The next series of articles is designed to get you and me on this journey. First, we need to correct some of the misconceptions you might have about functional languages.

Functional expressions in the JS language are badly misunderstood.

Obviously, there are quite a few developers who use JavaScript's functional paradigm every day. I would say that a larger percentage 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 side come from C, and you know 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 very common in jQuery:

$(".signup").click(function(event){
    $("#signupModal").show();
    event.preventDefault();
});

In the above code: we passed an anonymous function as an argument, which is the infamous callback function in JavaScript. Will these functions be called? Not at all!

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

The second layer of confusion is more subtle. Check this out: only a few hip JS developers see themselves this way:

Well, that's great! But I've learned all about functional programming, and I've used Underscore. Js in all my 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 for 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 the elegant and useful functions of the formula: _. Map and _. First. What do you think about this?

While functions like underscore. Js and _. Map are useful functional paradigms, putting these things together like in this example is a bit of a puzzle to me. Do we really need to do this?

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

// ...a little bit of magic
var firstTwoLetters = map(first(2));

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

Some of you may be wondering: what's the magic in this example? After all, to say that any one example is magical is a bit like bragging, right?

I'm going to use the next two articles to explain what's so amazing about this example, and if you're curious, keep reading.

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 the various elements of the JavaScript language, both functional and non-functional. With this knowledge, we can slowly form a complete system of functional programming in our minds by putting these elements together and understanding how they behave in JavaScript.