Most of that code is not ES6. Even the ES6 in it is pretty basic - the ES5 code is what is extremely complicated. Usually, you can learn new syntax by googling or reading docs for something unfamiliar (or asking here). For example, looking at the code:
const reverse = (aPair, delayed = EMPTY) =>
reverse()
there are three basic ES6 things in this code, none of which are too complex. First, the const keyword is just an alternative to var. There are some minor details such as scoping, but for most cases realize that it is a variable that is constant, you cannot change it later. The purpose of it here is to prevent changing the function. Assigning functions to a variable is not new, because functions have been first-class. Second, arrow functions. They are a more concise function style that also has some useful subtleties (i.e. the return keyword can be omitted if the function contents are only one line - more on that later). The code would be equivalent to:
const reverse = function (aPair, delayed = EMPTY) {
return reverse();
}
and finally, default parameters. They are nothing more than a check for undefined parameters. If the parameter is not defined, you assign it to a value. In ES5 you would write it like this:
const reverse = function (aPair, delayed) {
if (delayed === undefined) delayed = EMPTY
return reverse();
}
I have never taken a course on ES6, but have found all those things by reading free articles online. Now to the next statement:
aPair === EMPTY
? delayed
: reverse(aPair(rest), pair(aPair(first))(delayed));
None of this really is ES6. The ? and : characters are called the ternary operator which has been in JavaScript for a long while. It is basically a single line if statement. Let me contrast them:
aPair === EMPTY ? delayed : reverse(aPair(rest), pair(aPair(first))(delayed));
// basically
if (aPair === EMPTY) {
delayed
} else {
reverse(aPair(rest), pair(aPair(first))(delayed));
}
You will notice it is just a single line if/else logic statement. In your example, they have put line breaks in for readability - understand the engine still considers it a single line, that is why there is only one semicolon and the return keyword can be omitted. Once you understand the if statement, you realize that the else function (which is not ES6) is what is really complicated. The ES6 syntax (const, arrow functions) is not too complicated - it is the basic javascript which hasn’t changed that is complicated. This function is using recursion a complex programming paradigm not related to ES6. I am not that advanced, so it is hard for me to explain it (@PortableStick or @ksjazzguitar probably can), but the function, in essence, calls itself multiple times.
TL;DR - in your code the ES6 syntax isn’t that complicated. You could do the exact same thing in ES5 with a little more writing. What is complicated, however, is the program itself regardless of the syntax used. I am not even going to try to explain the recursion as it hurts my brain already trying to figure it out. If you are going to be writing code like that, you better take an advanced programming course not an ES6 one.
If you are worried about compatibility, there are transpilers that you can easily setup that make your code work on older devices. Browser compatability is not a reason to hesitate learning new features.
Also, if you feel uncomfortable with the arrow functions, just practice them with simple examples - that is the best way. I have learned more about them by using them myself not by reading explanations about them.
