Writing JS code has changed a lot in the last year plus with the publication of the ECMAScript 2015 standard (aka ES6 as it's the 6th edition of ECMA-262 publication — ECMA is a standards body that is driven by industry… Programming Languages, Wireless Communications, Optical Storage, and other Information and Communications Technology and Consumer Electronic standards, but I digress).

When ES6 was published, it took a bit for the standards to flow thru to all the browsers. Babel is around to transpile ES6 to ES5 which current browsers at the time would work with. In my code writting I'm seeing ES6 becoming the standard way to write since the fall of 2016. Today (late 2017), the majority of ES6 specs are supported by current browsers.

Just looking at some of the code of ES6 versus anything earlier that you wrote, the differences can be startling. After writing function event(str) { x = str.length; return x; } for so many years, the muscle memory in my fingers had a hard time changing over to str => { str.length; }. Also, think of all the jQuery code you've written!

$("#round-btn").click(function (event) {
  alert('Are you sure');
  processThat();
});

While learning the ES6 way of writing, I kept running into an issue with this. Remember having to hack self = this; This hack was a way to get the value in an outter function this into an inner function (wrapped by the outter function).

ES6 has two distinct ways to deal with this

  1. Use non-arrow functions (your 'ol favorite function () { ... }), yes these still work, when you want the caller to give this to the function function () { this.length; } works just fine without the time-tested hack.

  2. Use arrow function () => ({}) for everything else, that is, the function doesn't inherit/given/ the this value from the wrapped/outter scoped function. Actually it has it's own this.

ES6 has many new features that will help you code faster and cleaner. Read my other 2 Minute Tips