Overview of JavaScript ES6 features

I&#x27;m surprised by the state of const&#x2F;let nowadays.<p>The well-known good practice: use const by default; use let when it&#x27;s needed. At the release of ES6, it was the way to go. But everyday I notice libraries—and some really famous— that use let everywhere in their docs, or some really influent developers from Google or Facebook who share samples of code on Twitter using let when it&#x27;s not needed [1]. I don&#x27;t know why. Seems like most people now think that const is for declaring constants (in the traditional meaning, like const API_URL) when it&#x27;s just the normal way to declare variables that don&#x27;t need to be reassigned (so basically most variables).<p>Dan Abramov said: &quot;some people say const is ugly&quot; [2]. Well, if it&#x27;s a matter of appearance...<p>[1] <a href="https:&#x2F;&#x2F;twitter.com&#x2F;addyosmani&#x2F;status&#x2F;789126892402204673" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;addyosmani&#x2F;status&#x2F;789126892402204673</a><p>[2] <a href="https:&#x2F;&#x2F;twitter.com&#x2F;dan_abramov&#x2F;status&#x2F;783708858803978240" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;dan_abramov&#x2F;status&#x2F;783708858803978240</a>

The most interesting part about template strings was skipped over: tagged template literals. You can prefix a template string with a function which will get called with the list of string parts and the values passed in ${...} parts, and then it&#x27;s up to the function to choose how to join the values up into the resulting string (or hell, you could make it return something besides a string if you want). The function can even access the raw version of the string containing any backslash escapes in it as-is. The default `String.raw` function is handy if you&#x27;re writing something like an SQL query with a few \ characters that need to be in the final query. Both of these strings are the same here:<p><pre><code> const a = &quot;SELECT id FROM foo WHERE name CONTAINS r&#x27;\\n&#x27;&quot;; const b = String.raw `SELECT id FROM foo WHERE name CONTAINS r&#x27;\n&#x27;`; </code></pre> You could even assign `String.raw` to a variable first, and then make strings look like raw string literals of other languages:<p><pre><code> const r = String.raw; const s = r`SELECT id FROM foo WHERE name CONTAINS r&#x27;\n&#x27;`; </code></pre> Another good use of template strings is automatic HTML encoding (with a small module of mine on npm): <a href="https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;auto-html" rel="nofollow">https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;auto-html</a>

For those using Babel already or want to use ES6+ on a set of supported browsers: we have started work on <a href="https:&#x2F;&#x2F;github.com&#x2F;babel&#x2F;babel-preset-env" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;babel&#x2F;babel-preset-env</a>. Would appreciate more testing!<p>It allows passing in a set of supported browsers and transpiling what is required using the lowest common denominator env (uses <a href="https:&#x2F;&#x2F;github.com&#x2F;kangax&#x2F;compat-table" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;kangax&#x2F;compat-table</a> for data).<p><pre><code> &#x2F;&#x2F; .babelrc with preset options { &quot;presets&quot;: [ [&quot;env&quot;, { &quot;targets&quot;: { &quot;chrome&quot;: 52, &quot;ie&quot;: 11, &quot;browsers&quot;: [&quot;last 2 versions&quot;, &quot;safari 7&quot;] } }] ] } </code></pre> If you have questions, ask below (or make an issue)

&quot;you can start using it right now&quot; if you don&#x27;t care about IE8, IE9, IE10, and many mobile browsers and are willing to ignore 20% of your customers.<p>e.g: <a href="http:&#x2F;&#x2F;caniuse.com&#x2F;#search=let" rel="nofollow">http:&#x2F;&#x2F;caniuse.com&#x2F;#search=let</a><p>const does not have block scope in those browsers either, but will work, adding to your debugging confusion.<p>template literals and multiline string has no IE support at all (you need edge: <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Template_literals" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Refe...</a>) so you can forget most most enterprise clients<p>Similar things are missing for most features from the article.<p>I wonder how many JS dev have to answer to actual customers because none of my clients in the last decade who would have accepted to have a possible failure on 1&#x2F;5 of their visitors. Are they all bloggers or working in hype start ups ?

I always turn to an ES6 article on babeljs.io when I check out ES6 features.<p><a href="https:&#x2F;&#x2F;babeljs.io&#x2F;docs&#x2F;learn-es2015&#x2F;" rel="nofollow">https:&#x2F;&#x2F;babeljs.io&#x2F;docs&#x2F;learn-es2015&#x2F;</a><p>One of the features I like is default parameters. I&#x27;d like to add a usage that isn&#x27;t mentioned in the article. It&#x27;s really handy to pass optional parameters since default parameters can be nested.<p><pre><code> class Hoge { foo({active=true, collapsed=false, silent=false}={}) { } } let hoge = new Hoge(); hoge.foo({collapsed: true});</code></pre>

On the web browser side, I don&#x27;t recommend using ES6 yet, without any kind of fallback. Internet Explorer 11 is still used, as are devices on older iOS versions. (without counting people using the default browser on pre-Lollipop Android)

While I&#x27;m a big believer in most of the ES6 changes (arrow functions! let&#x2F;const! classes! generators!), I am not a big fan of many of the new destructuring features. They can actually make your code less approachable if you don&#x27;t already know what&#x27;s going on.

&gt; Because even though the if-block is not executed, the line 4 still redefines var x as undefined.<p>This is because of hoisting. Not quite right as described.

Appreciate the article, but this is relatively dated information. While I can see that many enjoyed the article, many have also been working in ES6 for over a year now. If you&#x27;re ready to join, I highly suggest everyone make their way to <a href="https:&#x2F;&#x2F;babeljs.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;babeljs.io&#x2F;</a> and everything it has to offer resource-wise or tooling-wise.

You might as well use babel and then you can use async&#x2F;await which makes code way more readable.

&quot;best practices&quot;: &quot;use class instead of manipulating prototype directly&quot;<p>Who comes up with these &quot;rules&quot;? This is not a hard and fast rule. Manipulating the prototype of an object is not &quot;dangerous&quot;.<p>I&#x27;m sick and tired of some loud mouth saying something is dangerous without explaining why. WHY? Why it it dangerous? Don&#x27;t talk at me. Provide me a sound reason and case to justify what you say. Talk is cheap.<p>It makes me not trust anything else in this article when someone is flippant.

Ugh. All this &quot;make Javascript like Java&quot; stuff needs to stop.<p>Cool stuff: Tail call elimination. Arrow functions. Assignment spread for multiple return values and &quot;rest&quot; &#x2F; default parameters. Proxying (combined with computed get&#x2F;set on properties) for easy decoration.<p>Classes and let: meh.

I have a question:<p>What does `for element of arr` buy me over `arr.forEach(element =&gt; ...)`<p>I don&#x27;t find the for...of syntax particularly appealing or useful, but I might be missing something. Is it a matter of preference?

I gave a more complete overview of ES6 (and ES2016 and so on) features at a user group last month. Slides:<p><a href="http:&#x2F;&#x2F;files.meetup.com&#x2F;11421852&#x2F;WhatsNewInJavaScript.pdf" rel="nofollow">http:&#x2F;&#x2F;files.meetup.com&#x2F;11421852&#x2F;WhatsNewInJavaScript.pdf</a><p>The slides are mostly code examples and I tried to go for completeness rather than detail, so there are some mentions you don&#x27;t normally see in these overviews (e.g. the article doesn&#x27;t mention proxies).

Equally spacing the points on the timeline may make for an aesthetic image, but it fails to illustrate the author&#x27;s point. &quot;As you can see, there are gaps of 10 and 6 years between the ES3, ES5, and ES6. The new model is to make small incremental changes every year.&quot; No, we can&#x27;t see. In that pretty graphic, ES5-&gt;ES6 is exactly the same distance as ES6-&gt;ES7.

If someone wants to dig more on ES5 vs ES6 , check this presentation (use side arrow for navigation) <a href="http:&#x2F;&#x2F;coenraets.org&#x2F;present&#x2F;es6&#x2F;#1" rel="nofollow">http:&#x2F;&#x2F;coenraets.org&#x2F;present&#x2F;es6&#x2F;#1</a>

Probably add pointers to where the images were taken from.<p>Ex:<p><a href="https:&#x2F;&#x2F;kangax.github.io&#x2F;compat-table&#x2F;es6&#x2F;" rel="nofollow">https:&#x2F;&#x2F;kangax.github.io&#x2F;compat-table&#x2F;es6&#x2F;</a>

Great article!<p>It would be fantastic to make all the code snippet interactive with the klipse plugin.<p><a href="http:&#x2F;&#x2F;blog.klipse.tech&#x2F;javascript&#x2F;2016&#x2F;06&#x2F;20&#x2F;blog-javascript.html" rel="nofollow">http:&#x2F;&#x2F;blog.klipse.tech&#x2F;javascript&#x2F;2016&#x2F;06&#x2F;20&#x2F;blog-javascrip...</a>

If you want to learn ES6 I highly recommend the Tower of Babel interactive tutorial: <a href="https:&#x2F;&#x2F;github.com&#x2F;yosuke-furukawa&#x2F;tower-of-babel" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;yosuke-furukawa&#x2F;tower-of-babel</a>

What about import from? (modules)

Some of these features are really nice, but JS is on a path to become as complex as C++.

Can someone smarter than me (not a high bar) explain why they didn&#x27;t just fix var, rather than introducing let?

Helpful article. Small typo on section 3.5. shouldn&#x27;t &#x27;construtor&#x27; == &#x27;constructor&#x27; ?

Can anyone recommend books or online courses that teach ES6 for someone just starting out with JS?

What&#x27;s interesting is that the author apparently has a QUERTY keyboard layout...

var&#x27;s function scope is a feature! You don&#x27;t have to place variable declarations in the header! (they are hoisted) Placing the var declarations where they are used makes the code easier to understand.<p>The point of constructor functions is not having to write <i>new</i>. So classes does nothing besides syntactic sugars over the prototype system, witch actually makes it more complicated and the code harder to maintain.<p>Async programming <i>is</i> hard, but not because of callbacks. Promises is just a wrap around callbacks, witch just adds complexity and more boilerplate. It will get better with async&#x2F;await but I will still prefer simple callbacks.<p>Arrow functions are very nice for one liners, but will ruin your code if you use them everywhere instead of named functions. You should always name your closures, then it&#x27;s easier to debug and lift them out.

uhhh edge still hasn&#x27;t destructuring

[a, b] = [b, a];<p>Great !

Using const and `splice` breaks the rules:<p>const info = [1,2,3,4]<p>const newInfo = info.splice(2);<p>&#x27;info&#x27; has changed

<i>destructing is very useful and encourage good coding styles</i><p>Is it? Personally I&#x27;d say that was bad code. What so wrong with using the original objects?<p>Putting aside the need to variable swap once a year or so, all the other examples look really confusing to me and unclear what they&#x27;re doing. The `Deep Matching` especially.