ES6 review, part-2

Continuing (belatedly) from the previous review of some new language features of Javascript ES6.  Again, based upon ES6 & Beyond by Kyle Simpson  (O'Reilly, (c) 2016) and using chess annotations (!, ?, etc.) to rate the features.

Concise Properties!

Saves typing, especially if you use long, informative variable names, which encourages their use, which is a very good thing.  However, I'm a little concerned in all of these "shortcuts" about typos and or accidentally polluting the global name space.

Concise Methods!?

A shorter way to create function expressions.  The whole expression vs. declaration stuff gives me a headache, and, coming from a Java "like classes" background I tend to use the later.  So not sure how much I'll use the new feature.  

Also, these concise method expressions fall apart (and are tricky to debug) when you are nested deep withing other functions then calling things recursively.  To which I say don't do that!  The code for which they fail is extremely complex code which is probably best refactored.

Getter / Setter ?

I'm torn on this one.  Obviously, coming from a Java background, I like the concept.  However, I also like explicitness, and operator overloading is confusing and generally held to be a bad thing.  With the new getters/setters, when I go

   var x = foo.bar;

I don't know if this is simple trivial property lookup (which it sure looks like!), or this is calling a function that will spend 10 minutes calculating pi, then become self-aware and launch Judgement Day.  Following Zen of Python, Rule #2: "Explicit is better than implicit", I think it's preferable to show the function call:

   var x = foo.getBar();

Computed Property Names?!

Meh, again not so sure.  If I have a lot of properties (or methods) starting with "Hillary-", and another set with "Trump-", do I want them all mixed into a single object, or isn't it simpler to subdivide and have

var foo = {
   Hillary: {
      party: "democrat",
      taxes: function() { ... }
   },
   Trump: {
      party: "yes",
      taxes: function() { return undefined; }
   }
}

and access them via

  foo[name][property]?

I don't see any great advantage is mixing them all together with foo[name+property].  However, they are used a lot for symbols, and can be useful for concise methods and generators, so I'll keep my mind open.


Super!

hard to argue much with this.

Template Literals (a.k.a. Interpolated String Literals)

I agree with the complaint that these aren't "templates" in the sense that many use them.  They aren't Mustache, JADE, whatever.  However, the ability to use

"Hello ${firstname} ${lastname}!"

instead of

"Hello " + firstname + " " + lastname + "!";

strikes me as a very very good thing.  One can also put functions inside the braces, which, if used with discretion, is also great.

"Hello ${decodeURI(nameFromAForm)}"

Arrow Functions

I'll talk more later about these.  He does point out a lot of "gotchas" and limits the cases where they should be used.

for..of Loops!!

Why did it take a gazillion years to add this obviously great feature?  Yes, I guess the functional guys will say you could use forEach, but this is simpler for most.



Notes

Astute readers will note that I'm not using prism.js for syntax highlighting.  Seems to work well.  However, it's tedious in Blogger to go to HTML edit mode, and when I'm there I see that the HTML code is a disaster of crapola so it's hard to find the code you just types to surround it by the pre and code tags.  I'm going to start playing with Ghost and this blog is likely to migrate there soon.  And Blogger constantly changing my font size is just so annoying.