Introduction to Functional JavaScript (1)_javascript skills

Let us pretend that we have to complete a task now: write JavaScript code according to the principles of functional languages ​​as much as possible.

The following series of articles are designed to allow you to start such a journey with me. First, we need to correct some misconceptions about functional languages ​​that you may have in your mind.

Functional expressions in JS language are seriously misunderstood.

Obviously, there are quite a few developers who use JavaScript’s functional paradigm every day. I would say that a larger portion 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 everyone knows that these languages ​​​​are not functional languages.

There are generally two levels of confusion. The first level 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 above code: we pass an anonymous function as a parameter, 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 a parameter. On the other hand, this example violates almost every functional programming paradigm that can be violated in just three lines of code.

The second level of confusion is more subtle. Look at this: This is how only a handful of trendy JS developers see themselves:

Hmm, that’s great! But I already fully understand functional programming and I use Underscore.js in all my projects.

Underscore.js is a very famous and ubiquitous JavaScript library. For example: let's say I have a set of words, and I need the first two letters of each word. This is very simple to write using 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 practical functions in functional style: _.map and _.first. What are your thoughts on this?

Although functions like underscore.js and _.map are useful examples of the functional paradigm, putting them together like this example is a bit confusing 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 carefully, this line of code has the same effect as the 5 lines above. Many words are just parameters or placeholders. The real logic lies in combining the map function, first function, and constant 2 in a meaningful way.

Some of you may be thinking: What’s the magic in this example? After all, calling any example magical is a bit like bragging, right?

I am planning to use the next two articles to explain the magic of the above example. If you are curious, you can continue reading.

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

In the next section, I will discuss various functional and non-functional elements of the JavaScript language. With this knowledge, we can slowly form a complete system of functional programming in our minds by integrating these elements, and understand their performance in JavaScript.