How to use es6 classes a lot and sleep soundly like you should. (paper for confused newcomers to the brave new world)

tl;dr: if you’re not fooling around with .prototype, libraries for mixins etc — using classes is the best option for you to get your code beautiful and readable and extendable. Especially with modules.

Yes, we all love JavaScript, we embrace it’s features and many other things, but I think, there is unhealthy tendency is going on — fighting for using classes or for throwing them in bin for good. I mean, you write some backbone thing and then go to blogosphere one time and there like:

The thing is — it’s always up to you. Whether you use classes, or not. It is true. Do not become result of holy wars about classes and “true pototypal nature of javascript”.

If you use classes — use them without thinking about what’s under the hood with all js constructors and prototypes. Throw away thoughts about all this stuff when using simply classes and classical inheritance.

If you write class, you don’t then change it’s prototype. If you write super, you don’t then write SomeOtherClass.method.call(this). I mean, come on, you’re trying to get some stuff done or fool around?

Use them, like you are using classes in Java/PHP/Ruby/Python. I mean, simply use constructor as constructor, super as super(parent call), extends as extends. The big truth is — es6 has classical inheritance, if you will use it like one, but not like some obscured piece of garbage for programmers from other languages to get used to JS easily.

(this one is for total newcomers) Witness your own pitfalls, when single inheritance is not enough or you don’t understand how to prevent breaking your inner class logic by using “trying to be private with underscore properties/methods”. Then you will find for yourself, what is better and how can pattern/lack-of-pattern save you.

Don’t be the person, who is trying to achieve things through learning JS design patterns (many different modules, classes, singletons etc patterns), keeping in mind something about prototypes, if you’re not fully familiar and experienced with this topic. It will hurt you and your code a lot.

If you are not ready or do not understand thing about prototypes in js — don’t try to use them or patterns around them like it’s the one true way. Use classes — they are simpler, cleaner and there is mostly nothing to discuss and argue about, when building simple systems and projects and not constructing huge libraries/projects like in facebook or twitter or netflix or somewhere else. (yes, yes, even in big projects classes are wonderful solution, but there is huge probability that you are already using composition with them etc. like in any other languages with classical inheritance, but such things are out of this topic)

Es6 classes gives you one clear choice when talking about OOP in js, if you are not familiar and do not want to become familiar with prototypes (there is nothing to be ashamed about, we all just want things to be done, and classes are objectively good choice in comparison with those monstrous creations full of strange modules and ‘classes’ in closures). No more _.extend, no more Backbone.Model.extend, no more React.createClass. Use just: class, extends, super, etc.

Some tips and tricks for class users.

Private/protected etc.

First — in python you do not have private/protected etc members. You can tell other programmers by adding _ to them, but anyway. Not on language level. Why am I saying this? Because there are sometimes too much arguing on the internet about JS classes lacking of this functionality, like it’s normal for language to have property accessors. No it’s not and even more: it’s not that common.

Of course it’s up to you how to hide private methods/properties, but easiest way I found yet:

const privates = new WeakMap();

export default class Rectangle {
  constructor(x = 0, y = 0, width = 100, height = 100) {
    privates.set(this, {});

    this
      .setX(x)
      .setY(y)
      .setWidth(width)
      .setHeight(height);
  }

  setX(x) {
    privates.get(this).x = x;

    return this;
  }
  // ... Similar setters and getters

  getWidth() {
    return privates.get(this).x;
  }
}

If you’re not familiar with WeakMap — you can set object as a key, so you can get any property for any object. And in our case — this is like our provate properties :3 (if you use modules of course — because any external code won’t be able to get something from privates)

Don’t forget to add comments and give proper names, also JSDoc (http://usejsdoc.org/about-getting-started.html)

This one is really useful. Whether you are using IDE or not — proper comments and JSDoc will help you to distribute your modules with classes, to tell other developers which classes your methods are expecting (yay for using type in JSDoc) and which classes/types will your methods give back.

About names — you already should know about this. Names of methods and methods-helpers etc should be there, like in any language with classical inheritance and good OOP/coding practices.

P.S. Don’t be fooled. You can and should write wonderful systems and software with classes, if it’s okay with you and you are comfortable with chosen way. Nothing insults JS more than phrase “classes and “new/extends/super” obscure true nature of JavaScript”, because this is our JavaScript — so powerful (yay for simple classical inheritance) with it’s many ways and yet so holy-warish. You can use classes and prototypes, but just don’t mess them with each other, if you’re not knowing what are you doing.