The reason for this is to ensure backwards compatibility with existing code written using the ES6 and ES5 spec. In other words, older code should be able to be run side by side without any workarounds or hacks.
Let’s refresh our memory and look at a typical way of wiring OO code in ES5. While Object.defineProperty is not very commonly used, I want to make a point of creating a read only property.
Pretty basic stuff, we’ve defined a
Vehicle class with two read only properties and a custom
toString method. Lets do the same thing in ES6.
The two examples are practically equal, however there’s one difference. To be able to take advantage of the new
get syntax (which is actually part of the ES5 spec), we have to keep
year around as properties using basic assignment. This leaves them vulnerable to being improperly changed. This feels like a pretty big omission in the spec – in order hang on to a value passed into a constructor privately, you still have to use
There are two ways to declare a class in ES6. The first one is called class declaration and that is what we used in the example above, eg:
One important thing to note here is that unlike function declarations, class declarations can’t be hoisted. For example, this code works fine:
However, the following is going to throw an exception:
Another way to define a class is by using a class expression and it works exactly the same way as a function expression. A class expression can be named or unnamed.
static keyword is another syntax sugar in ES6 that makes static function declaration a first class citizen (see what I did here?). In ES5 it looks like a basic property on a constructor function.
And the new shiny
static syntax looks like this:
Vehicle constructor, it just ensures that the method is in fact static. Note that you can also add static value properties.
Prototypical inheritance is not unlike magic when used properly. This hasn’t been forgotten in ES6 with the introduction of the all new
extends keyword. In the old world of ES5 we did something like this:
With the new
extends keyword same example looks a lot more digestible:
super keyword also works with static methods:
The last example also showed the usage of the
super keyword. This is useful when you want to call functions of the object’s parent.
To call a parent constructor you simply use the
super keyword as a function, eg
super(make, year). For all other functions, use
super as an object, eg
super.toString(). Here’s what the updated example looks like:
Computed Method Names
When declaring properties or functions in a class, you can use expressions instead of statically defined names. This syntax feature will be very popular for ORM type libraries. Here is an example:
How can you take advantage of ES6 features today? Using transpilers in the last couple of years has become the norm. People and large companies no longer shy away. Babel is an ES6 to ES5 transpiler that supports all of the ES6 features.
What About The Browsers?
The majority of browsers are catching up on implementing new features but not one has full support. Does that mean you have to wait? It depends. It’s a good idea to begin using the language features that will be universally available in 1-2 years so that you are comfortable with them when the time comes. On the other hand, if you feel the need for 100% control over the source code, you should stick with ES5 for now.