What-are-the-pros-and-cons-of-using-JavaScript-ES5-versus-ES6

What-are-the-pros-and-cons-of-using-JavaScript-ES5versus-ES6 I’m going to compare only ES5 classes vs ES6 classes, as that is one of the major differences that has drawbacks. Other differences are language features that improve over ES5, and in my opinion, only ES6+ classes have real downsides.

Pros ES5 classes (constructor pattern with prototypes): You have a lot of browser support.

Classes and OO inheritance. (Here’s a list of 41 libraries for doing OOP in ES5, and I didn’t even bother to continue my search on NPM after page 6 of searching for “class inheritance”: #587 · w3c/web components) You can easily make “interfaces”, “multiple inheritances”, “protected and private members”, and other inheritance features in ES5 because it is flexible. See the first 11 libraries that I linked, which have interesting features.

You can use `this` before calling a super constructor in an ES5 class.

You can dynamically modify class prototypes to achieve certain things. For example, there are valid tricks whereby you temporarily remove a prototype, do something, and then add it back.

You can inject prototypes in between prototypes.

You can take POJOs (plain ol’ JavaScript Objects) as class specs and generate classes from them easily.

ES6 classes (class syntax, which isn’t purely sugar): Classes and OO inheritance.

“syntax sugar”, literally that’s all, but it’s not completely just syntax sugar, read the cons.

In some cases, builtin classes can only be extended with native ES6 `class` syntax.

Cons ES5: It doesn’t have the “syntax shortcut” that ES6 has, but there’s plenty of libraries that help with that, and the flexibility lets you create tools to do it how you want.

ES6: It doesn’t have all the support that ES5 has, but you can always transpile your ES6 code.

You cannot use `this` before calling a super constructor in an ES6 class.

You cannot modify class prototypes, they are configurable false and writable false.

You cannot inject prototypes between prototypes.

Using POJOs to define classes in an inheritance library is complicated because simple things like applying or calling a super constructor become impossible due to ES6 limitations: [[HomeObject]] and `super` are static, so when you use concise method shorthand in a POJO, that function can no longer be called as a constructor with the `new` keyword, it’s `prototype` property can no longer be modified, and if you remove it from the object and assign it to another object, you will not get the results that you expect.

The things that most of those above 41 libraries do will simply not work with ES6 features (which are a bummer). All in all, ES6 classes are not just sugar for ES5 classes; ES6 classes are sugar with a bunch of limitations and restrictions. You can’t

simply modify an ES6 class dynamically like you can an ES5 class. As far as functionality goes, the only reason you need an ES6 class is if you want to extend certain builtin classes (`Array` for example), otherwise, ES5 classes let you achieve more, just without syntax sugar, but those above libraries give you some form of “candy� that makes it nicer and more semantic.