I know ES5 decently well, but with all of the hype surrounding ES6 and it’s benefits, I was curious about some of the most important parts, and using them in my code.
Top 10 ES6 features: https://webapplog.com/es6/.
The most useful, in my opinion, are the block-scoped variables const and let, arrow functions (make async code much more readable), destructuring assignments (very useful when doing imports working with objects, and template literals (great for building complicated strings with variables, such as urls).
1 Like
My favorite feature is probably the new backtick features - template strings and multiline strings; they make writing url’s and file paths much better than "ageag"+" "+superRandomVariableNameHere+" "+"awfa"+" "+"etc.";. And if you were writing multiline strings, it was a pain to do "\r\n" all the time.
Default Parameters are handy, but you will probably use them less than you think.
Arrow functions look crazy at first, but once you understand them, they are really nothing new.
Destructuring and object literals are cool and handy.
let and const are useful and should replace var in most instances.
“classes” make writing OOP in Javascript seem a lot better, but OOP in JavaScript is still a pain in the rear.
Promises are probably one of the most important additions - especially since you need to understand them well when working with other additions like async functions. Definitely learn how to use Promises, Async functions, and the new fetch api.
An interesting addition to consider is the module. The post that @arw2015 linked to is really great, but outdated (its from 2015 - in the JavaScript playground that’s ancient). It says that modules won’t be around anytime soon - that’s simply wrong. The latest versions of Edge, Chrome, and Safari all support modules out of the box (https://caniuse.com/#search=module). Firefox and Opera support them with a flag. You can finally even use ES6 modules in the latest Node.js now with a flag, and in October of next year, they will be availabe by default in Node.js 10.0 LTS (please read this and this). I think it’s safe to say that the official modules will become the standard on Node, and having modules natively available on the browser will definitely change the way we think about things. I think investing time in learning ES6 modules would be a very good thing to do.
That’s a good call on modules. But can you see any major advantages of ES6 modules compared to CommonJS?
Using the spread operator to pass props in React has changed my life 
I just checked this, it’s not quite the same:
const strTemplate = `hello
world`;
const strLF = 'hello\nworld';
const strCRLF = 'hello\r\nworld';
console.log(`Is LF: ${strTemplate === strLF}; Is CRLF: ${strTemplate === strCRLF}`);
>>> Is LF: true; Is CRLF: false
Of course, if you need CRLFs, you can always just do .replace(/\n/g, '\r\n').
A useful trick for debugging:
const name = 'Kev';
const message = 'Hello World';
console.log({name, message}); // note the braces!
// => {name: 'Kev', message: 'Hello World'}
1 Like
CommonJS is a format specific to Node, not JavaScript, introduced because JS didn’t have modules at the time; it only works inside Node apps, it doesn’t, for example, work in the browser.
Overall, brings in a lot of stuff that’s present in other modern languages but was missing from JS. As an example, it’s now possible to translate say Python code almost line-for-line to JS. Makes it a lot easier to move between languages if the feature set is similar.
Lots of coding styles in JS are workarounds to deal with either the failings of the language or just how small the language is. ES2015 fixed a huge chunk of those issues. If you’re learning JS now, there is no reason at all to treat what was added in 2015 as something you learn you learn after “basic JS”. It is just JS (best example of this is var, which is broken in various ways, there is no really good reason to use it unless you need to support obselete browsers)
Promises: can make asynchronous code significantly easier to read/write (do this then do this then do this and catch the errors at the end). Async/await syntax builds off this and makes async code even simpler to write/read.
let and const - because JS has to be backwards compatible, var can’t be either removed from the language or have the way it works amended, so instead it’s obseleted by the two new keywords.
Destructuring of objects, which allows for basic pattern matching and makes code far safer and more explicit (you can specify a function should accept specific object properties, or that you want a specific set of properties from the data returned from an API in a very clear, concise way).
Similarly the rest/spread operator, which allows for extremely explicit and concise code (for example using it to specify n arguments to a function)
Native modules, for reasons described.
Arrow functions, which fix a major problem with the scoping of this.
Template strings, which allow interpolation and multi-line strings, significantly easier to read/write and less chance of errors creeping in.
Improvements to object literals (computed keys names for example), and the Object.{keys, values, entries} functions which allow safe iteration over object properties.
Much more low-level, but Proxies, which allow very fine-grained control over object manipulation.
If it ever manages to get wide support, tail-call recursion optimises certain styles of coding that are currently not viable.
Still no good reason, really. Just use Babel.