JavaScript is evolving

As a die-hard java-developer for several years I was quite annoyed by the fact that Java as a language lagged several years behind C#. (E.g. Java got lambdas last year, 6 years after C#, so standards are nice for compatibility, but tends to be slow to evolve.)

Polyfill

Now, as a frontend-developer and getting to know JavaScript, I have realized that JavaScript is lagging even further behind. Take for example the everyday case of checking if a string contains another string:

"hello world".indexOf("hello") > -1
//=> true

This is awkward and you know it, however JavaScript is evolving. The next version ECMAScript 6 is in its final phase, and will have, among several features, the following method:

"hello world".includes("hello")
//=> true

Another new nice feature is for finding the first item in an array. It used to be written like this:

for(int i = 0; i < array.length; i++){
  if(array[i].something === something){
    return array[i];
  }
}

And now it can be written like:

array.find(it => it.something === something);

ECMAScript 6 is feature complete, and is started to be supported by modern browser like Chrome, Firefox and Internet Explorer 11. As for older browsers, great polyfills like core-js come to our rescue.

Transpile

While polyfills extend current objects with new methods, ECMAScript 6 also contains new language syntax. Let’s look at the arrow function (also known as fat arrow):

["one", "two", "three"].map(v => v + "!")

Older browser will not understand “=>” (for a long time!), so this code has to be transpiled to ECMAScript 5:

["one", "two", "three"].map(function (v) {
  return v + "!";
});

There are some great transcompilation tools out there, and the one we have used is Babel. You can even play around with it here.

Scoped variables

JavaScript will also get scoped variables (let and const):

const hello = "Hello"

if(true) {
  const hello = "Inner scoped hello"
}

This will transpile to:

var hello = "Hello";

if (true) {
  var _hello = "Inner scoped hello";
}

Classes

And finally, JavaScript is getting support for classes (which is sugar around prototype), and the syntax looks like this:

class Hello {
  constructor() {
    this.hello = "Hello World"
  }
  getHello() {
    return this.hello;
  }
}

This will be transpiled to the following, not very readable, but working code:

var _prototypeProperties = function (child, staticProps, instanceProps) { if (staticProps) Object.defineProperties(child, staticProps); if (instanceProps) Object.defineProperties(child.prototype, instanceProps); };

var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };

var Hello = (function () {
  function Hello() {
    _classCallCheck(this, Hello);

    this.hello = "Hello World";
  }

  _prototypeProperties(Hello, null, {
    getHello: {
      value: function getHello() {
        return this.hello;
        },
        writable: true,
        configurable: true
      }
      });

      return Hello;
})();

Conclusion

ECMAScript 6 is here, and we should start using it. Older browser will be around for a long time, so I think we should get used to transpiling code on the web-platform.

Tor Arne Senior developer

27.feb.2015: Revised with improved code-examples from discussion on reddit.