It's about time to face the parenthesized monster (JavaScript)

Recent JavaScript is full of parentheses!

Does anyone feel that way? Such people are the target of this article. Please read on a little more. I thought so until a year ago. For example, the following sources. It is a so-called ** parenthesis thing **.

var length = (array) => {
    return reduce(map(alwaysReturnOne)(array));
};
length([1,2,3]);

I've been developing Java for a long time, so I thought it would be nice if I could read JavaScript a little. However, recently, ** brackets ** have appeared in Java in a form called lambda expression. At the SI site, Java 8 syntax has been adopted since last year's new development project, but it will be used for maintenance and repair next year. ** I can't escape from the parenthesized thing anymore. ** **

That's how I took a step towards the monster in parentheses. If you find yourself doing only Java, I hope it will be the first start for people who are ** scared of JavaScript **.

What I'm writing in this article

  1. What is the identity of the parentheses?
  2. What is good with parentheses?

1. 1. What is the identity of the parentheses?

If you write it without fear of misunderstanding, the identity of the parentheses is a function in one word. There are various types of functions such as identity functions, multinomial functions, anonymous functions, and constant functions. And there are closures, thunks, monads, currying, etc. that utilize it. I think that the fact that these difficult-to-understand concepts are used on the source without comments is a high barrier for beginners. So ** forget the difficult words I wrote above **. However, parentheses are functions. Keep this in mind. Now let's move on to the benefits of parentheses (functions).

2. What is good with parentheses?

I mentioned earlier that parentheses are functions, but I think many people think that "functions can be used in common by grouping processes." That's true, but the functions used in JavaScript have a slightly different meaning. People who have written programs in C or Java have this idea too strong to understand JavaScript as a functional language. If you write a function with a Java-like idea, you will define common processing including business logic as a function. However, when you think of it as functional programming, ** it is still not a function. By disassembling it into smaller pieces, it is possible to promote reuse and maintain idempotency **.

First class citizen

First, remember only one. JavaScript ** functions with functional language features can be stored in variables . This is why JavaScript functions are called first-class citizens (first-class citizens). It's a difficult word, but think of it as " first-class citizen = just a value (variable) **".

Just by understanding this, you will be able to read a little hard-to-read JavaScript.

For example, the following program creates a function named constant. Also, in the last line, we pass the actual argument "1" to the function and declare a variable called alwaysReturnOne. As a result, the function on lines 2-4 is stored in alwaysReturnOne with the actual argument "1".

The important thing here is that alwaysReturnOne is a function that always returns "1".

var constant = (any) => {
    return (_) => {
        return any;
    };
};
var alwaysReturnOne = constant(1);​​

Understanding that ** "variables that store functions are used in various places" ** is a step toward understanding JavaScript these days.

But you may wonder, "What are the benefits of this function?" Even this simple function can be used. You can convert all the elements of the array to 1 by running the following program. This is because the function that processes the contents of the array called map is passed as an argument to the function that sets everything to 1.

[1,2,3].map(alwaysReturnOne);
//result-> [1,1,1]

​ When reading JavaScript, the variables used inside it may be functions, and if it is a function, by looking at the function in block ({}) units, it is surprisingly easy to read. You can go.

By combining the above code with a method that adds up the values of the element count, you can create a function that adds the elements of the array [1,1,1] and calculates the size of the array.

var length = (array) => {
    return count(map(alwaysReturnOne)(array));
};
length([1,2,3]);
//Result → 3

(Reduce and map are easier to use with libraries such as Underscore.js, but I made it myself because it is functional learning. Added 2017/12/7)

//map function
var map = (convert) => {
          return (array) => {
            return array.reduce((accumulator, data) => {
              return accumulator.concat(convert(data));
            },[]); 
          };
        };
//count function
var count = (array) => {
          return array.reduce((accumulator, data) => {
            return accumulator + data;
          },0);
        };

​ To summarize JavaScript functions, in JavaScript, functions can be treated in the same way as values, so they can have the following characteristics.

--Can have a function as an argument --You can create a function that returns a function

This mechanism is called a higher-order function and is often used in JavaScript, resulting in more parentheses. However, it does not make the source difficult to read, but it is effective in increasing the reusability of the program and increasing the tolerance to failures. ​ Recently, the combination of Spring for the back end and Angular for the front end is increasing, so if you don't like JavaScript, why don't you try it? (Angular often uses TypeScript ...)

Reference book

I use the following three books to study. I think that functional programming is a paradigm shift that people who have written Java have not experienced so far, so if you do not understand one book, two books, if it is still difficult to understand, the third book is better. I think. There are no shortcuts, and I don't think you need to understand everything in the book, but I recommend changing the book because it gives you a new perspective. Learn the basics of functional programming using JavaScript Functional programming learned with JavaScript JavaScript functional programming impress top gear series to learn ideas and practices to reduce complexity

Recommended Posts

It's about time to face the parenthesized monster (JavaScript)
About the language to be learned
Pass the i18n locale to JavaScript
The road from JavaScript to Java
Introduction to java for the first time # 2
About the procedure for java to work
[Java] How to set the Date time to 00:00:00
Set the time of LocalDateTime to a specific time
About the daylight saving time that really happened
[Note] About the introduction to Swift practice Chapter 11
Unify the Rails app time zone to Japan time