Functional JavaScript, Part 1: Introduction

Introduction

JavaScript is a powerful but misunderstood programming language. People like to say that it is an object-oriented programming language or a functional language. Others like to say that it is not object oriented or a functional programming language. Some will say that it refers to both paradigms or to neither of them - but, let's postpone this argument for now.

Let's ask ourselves a mission: to write in JavaScript using the principles of functional programming as much as the language allows.

This series of posts means that you embark on this journey with me. And, for starters, you need to clarify some of the wrong concepts regarding functional programming that may be present in your head.

Functional programming is (strongly) misunderstood in the JS world

Obviously, there is a significant group of developers using the functional paradigm in JavaScript day by day. I would say that there is a large group of JavaScript developers who do not understand what it really means.

I think this is the result of the fact that most of the programming languages ​​used for server-side web development are rooted in C, and most will agree that it is not a functional programming language.

There are two points. The first point can be demonstrated by the following jQuery example, which is widely used:

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

Hey look at that. We just passed an anonymous function as an argument, also known in JavaScript as the ugly callback function.
Some call this functional programming. Is it so? Not really!

This example is a demonstration of a key piece of functional programming: function as a parameter. On the other hand, this example also runs counter to almost any other of the functional programming paradigms with which it is generally possible to go against in the three lines of the example.
The second moment is a little more insidious. Reading this, some trendy JS developers think to themselves:

Well! I already know everything about functional programming. I use Underscore.js in all my projects

Underscore.js is a fairly popular JavaScript library used everywhere. For example, let's say that I have a set of words and we need a corresponding set of the first two letters of each word. Together with Underscore.js this is a pretty easy task:

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

You see! Look at this javascript voodoo. I use these wonderful functional utilities as _.mapwell _.first. What will you answer IT now, Leland? ^one

Although underlining and functions seem to _.mapbe useful functional paradigms, the way they are used together in this example looks ... verbose and hard for me. Do we really need all this?

If we start thinking about things a little more “functionally”, then, probably, taking the example above, we get this:

// ... капелька магииvar firstTwoLetters = map(first(2));

If you think about it, you will see all the same information in one line as in the five lines above. wordsand wordjust parameters / placeholders. The real meat of logic is to combine meaning map, function firstand constant 2in a meaningful way.

Some, looking at this example, may think: what kind of “drop of magic” is. In the end, embedding any example with a “drop of magic” as in the example is like ... a kind of deception, eh?

Well, I'm going to devote a couple of the following posts, explaining this “drop of magic”, so if you are intrigued - please continue.

This series of posts is designed to help others learn to borrow beauty from functional programming languages ​​in the context of JavaScript.

In my next post, I’m going to talk about various JavasScript elements that are functional as much as they are not. With this knowledge we will slowly put together the fundamental blocks of functional programming and how they look in JavaScript.

Read more -> Part 2: what makes the language “functional”?

For errors and inaccuracies, please write here.

¹ Posted by Leland Richardson