Should i buy ECMAScript 6 or “ES6” books or prior?

Should i buy ECMAScript 6 or “ES6” books or prior?
0

#1

Hi,

I am looking to order some books and enroll for courses in JS to learn more about them , i was just wondering if i should buy books with ES6 or books prior to that , in ES6 case i see some code like this -


const reverse = (aPair, delayed = EMPTY) =>
  aPair === EMPTY
    ? delayed
    : reverse(aPair(rest), pair(aPair(first))(delayed));

const mapWith = (fn, aPair, delayed = EMPTY) =>
  aPair === EMPTY
    ? reverse(delayed)
    : mapWith(fn, aPair(rest), pair(fn(aPair(first)))(delayed));
    
const doubled = mapWith((x) => x * 2, l123)

doubled(first)
  //=> 2

doubled(rest)(first)
  //=> 4

doubled(rest)(rest)(first)
  //=> 6

Will this be compatible with all browsers ? I am not aware of any of this stuff, can any one please guide me here as to what stuff to buy , ES6 one or prior one … I want to be ready for future but make sure its compatible right now …

Thanks


#2

You don’t really need to waste money on an ES6 book in my opinion. Here you can find the ES6 features.


#3

If I’m not mistaken most major browsers except for Internet Explorer (of course…) do have excellent compatibility with ES6 now (reference).

It is also worth mentioning that the beta version of fCC does have a good introduction to ES6—it’s probably a good place to start because if you save your code now you will be able to use them to fulfil the ES6 requirements in the new curriculum when it comes up. There should be plenty of resources on the Internet like that suggested by @nr-mihaylov, too!


#4

@honmanyau - Well if all browsers now support it , may be i should go for new book(ES6), @nr-mihaylov i am purchasing a book just to keep for good reference …

may be i should learn from a source with prior to ES6 and then update it with the reference provided ? Will that be a good idea or should i start we new ES6 reference it self ? Kindly guide. As the new arrow symbol and lack of function keywords make me feel uncomfortable…

Edit - About the FCC here it always gives error with new beta , never works really


#5

You should know both. Start with the basic stuff and then move to ES6.


#6

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.


#7

Where did you find this code?

If you want to learn new language features, start by modifying code you’ve already written. Write your code the way you know how to, then consult the resources @nr-mihaylov and @honmanyau posted and then try to make changes. Arrow functions are easy because they can replace almost any other anonymous function without rewriting the function’s body. Template literals are another feature you would use commonly as a beginner. However, not every feature is something you’re going to use, so while it’s great to read through some free resources or check out videos on Youtube, if you don’t make an effort to include ES6 features in your code, you’re just going to forget it soon after.


#8

A nice series of articles (FCC Medium publication) came out last year. I’d start with those :slight_smile:

Here’s the first one, links to the rest are at the end of the article:

https://medium.freecodecamp.org/learn-es6-the-dope-way-i-const-let-var-ae828580472b?source=linkShare-8f91301d8667-1507145349


#9

@IsaacAbrahamson - thanks for the explanation, as i am very weak in even the basic version when i see all the arrow and const keywords and brackets gone in many declarations i was worried, i will start with the basic JS and then learn JS ES6 from online resources …

@PortableStick - i was trying to learn from the advanced version of “allonge JS” book as suggested by @DanCouper , its a good resource , i will start with the earlier version of this book, if there is any other resources kindly suggest …

@JacksonBates - Thanks i am looking at it straight away …