Classes & Constructors

  • 9.1 Always use class. Avoid manipulating prototype directly.

    Why? class syntax is more concise and easier to reason about.

    1. // bad
    2. function Queue(contents = []) {
    3.   this.queue = [...contents];
    4. }
    5. Queue.prototype.pop = function () {
    6.   const value = this.queue[0];
    7.   this.queue.splice(0, 1);
    8.   return value;
    9. };
    11. // good
    12. class Queue {
    13.   constructor(contents = []) {
    14.     this.queue = [...contents];
    15.   }
    16.   pop() {
    17.     const value = this.queue[0];
    18.     this.queue.splice(0, 1);
    19.     return value;
    20.   }
    21. }

  • 9.2 Use extends for inheritance.

    Why? It is a built-in way to inherit prototype functionality without breaking instanceof.

    1. // bad
    2. const inherits = require('inherits');
    3. function PeekableQueue(contents) {
    4.   Queue.apply(this, contents);
    5. }
    6. inherits(PeekableQueue, Queue);
    7. PeekableQueue.prototype.peek = function () {
    8.   return this.queue[0];
    9. };
    11. // good
    12. class PeekableQueue extends Queue {
    13.   peek() {
    14.     return this.queue[0];
    15.   }
    16. }

  • 9.3 Methods can return this to help with method chaining.

    1. // bad
    2. Jedi.prototype.jump = function () {
    3.   this.jumping = true;
    4.   return true;
    5. };
    7. Jedi.prototype.setHeight = function (height) {
    8.   this.height = height;
    9. };
    11. const luke = new Jedi();
    12. luke.jump(); // => true
    13. luke.setHeight(20); // => undefined
    15. // good
    16. class Jedi {
    17.   jump() {
    18.     this.jumping = true;
    19.     return this;
    20.   }
    22.   setHeight(height) {
    23.     this.height = height;
    24.     return this;
    25.   }
    26. }
    28. const luke = new Jedi();
    30. luke.jump()
    31.   .setHeight(20);

  • 9.4 It’s okay to write a custom toString() method, just make sure it works successfully and causes no side effects.

    1. class Jedi {
    2.   constructor(options = {}) {
    3.     this.name = options.name || 'no name';
    4.   }
    6.   getName() {
    7.     return this.name;
    8.   }
    10.   toString() {
    11.     return `Jedi - ${this.getName()}`;
    12.   }
    13. }

  • 9.5 Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary. eslint: no-useless-constructor

    1. // bad
    2. class Jedi {
    3.   constructor() {}
    5.   getName() {
    6.     return this.name;
    7.   }
    8. }
    10. // bad
    11. class Rey extends Jedi {
    12.   constructor(...args) {
    13.     super(...args);
    14.   }
    15. }
    17. // good
    18. class Rey extends Jedi {
    19.   constructor(...args) {
    20.     super(...args);
    21.     this.name = 'Rey';
    22.   }
    23. }

  • 9.6 Avoid duplicate class members. eslint: no-dupe-class-members

    Why? Duplicate class member declarations will silently prefer the last one - having duplicates is almost certainly a bug.

    1. // bad
    2. class Foo {
    3.   bar() { return 1; }
    4.   bar() { return 2; }
    5. }
    7. // good
    8. class Foo {
    9.   bar() { return 1; }
    10. }
    12. // good
    13. class Foo {
    14.   bar() { return 2; }
    15. }