Classes

Prefer ES2015/ES6 classes over ES5 plain functions

It’s very difficult to get readable class inheritance, construction, and method
definitions for classical ES5 classes. If you need inheritance (and be aware
that you might not), then prefer ES2015/ES6 classes. However, prefer small functions over
classes until you find yourself needing larger and more complex objects.

Bad:

  1. const Animal = function(age) {
  2.   if (!(this instanceof Animal)) {
  3.     throw new Error('Instantiate Animal with `new`');
  4.   }
  6.   this.age = age;
  7. };
  9. Animal.prototype.move = function move() {};
  11. const Mammal = function(age, furColor) {
  12.   if (!(this instanceof Mammal)) {
  13.     throw new Error('Instantiate Mammal with `new`');
  14.   }
  16.   Animal.call(this, age);
  17.   this.furColor = furColor;
  18. };
  20. Mammal.prototype = Object.create(Animal.prototype);
  21. Mammal.prototype.constructor = Mammal;
  22. Mammal.prototype.liveBirth = function liveBirth() {};
  24. const Human = function(age, furColor, languageSpoken) {
  25.   if (!(this instanceof Human)) {
  26.     throw new Error('Instantiate Human with `new`');
  27.   }
  29.   Mammal.call(this, age, furColor);
  30.   this.languageSpoken = languageSpoken;
  31. };
  33. Human.prototype = Object.create(Mammal.prototype);
  34. Human.prototype.constructor = Human;
  35. Human.prototype.speak = function speak() {};

Good:

  1. class Animal {
  2.   constructor(age) {
  3.     this.age = age;
  4.   }
  6.   move() { /* ... */ }
  7. }
  9. class Mammal extends Animal {
  10.   constructor(age, furColor) {
  11.     super(age);
  12.     this.furColor = furColor;
  13.   }
  15.   liveBirth() { /* ... */ }
  16. }
  18. class Human extends Mammal {
  19.   constructor(age, furColor, languageSpoken) {
  20.     super(age, furColor);
  21.     this.languageSpoken = languageSpoken;
  22.   }
  24.   speak() { /* ... */ }
  25. }

Use method chaining

This pattern is very useful in JavaScript and you see it in many libraries such
as jQuery and Lodash. It allows your code to be expressive, and less verbose.
For that reason, I say, use method chaining and take a look at how clean your code
will be. In your class functions, simply return this at the end of every function,
and you can chain further class methods onto it.

Bad:

  1. class Car {
  2.   constructor(make, model, color) {
  3.     this.make = make;
  4.     this.model = model;
  5.     this.color = color;
  6.   }
  8.   setMake(make) {
  9.     this.make = make;
  10.   }
  12.   setModel(model) {
  13.     this.model = model;
  14.   }
  16.   setColor(color) {
  17.     this.color = color;
  18.   }
  20.   save() {
  21.     console.log(this.make, this.model, this.color);
  22.   }
  23. }
  25. const car = new Car('Ford','F-150','red');
  26. car.setColor('pink');
  27. car.save();

Good:

  1. class Car {
  2.   constructor(make, model, color) {
  3.     this.make = make;
  4.     this.model = model;
  5.     this.color = color;
  6.   }
  8.   setMake(make) {
  9.     this.make = make;
  10.     // NOTE: Returning this for chaining
  11.     return this;
  12.   }
  14.   setModel(model) {
  15.     this.model = model;
  16.     // NOTE: Returning this for chaining
  17.     return this;
  18.   }
  20.   setColor(color) {
  21.     this.color = color;
  22.     // NOTE: Returning this for chaining
  23.     return this;
  24.   }
  26.   save() {
  27.     console.log(this.make, this.model, this.color);
  28.     // NOTE: Returning this for chaining
  29.     return this;
  30.   }
  31. }
  33. const car = new Car('Ford','F-150','red')
  34.   .setColor('pink')
  35.   .save();

Prefer composition over inheritance

As stated famously in Design Patterns by the Gang of Four,
you should prefer composition over inheritance where you can. There are lots of
good reasons to use inheritance and lots of good reasons to use composition.
The main point for this maxim is that if your mind instinctively goes for
inheritance, try to think if composition could model your problem better. In some
cases it can.

You might be wondering then, “when should I use inheritance?” It
depends on your problem at hand, but this is a decent list of when inheritance
makes more sense than composition:

  1. Your inheritance represents an “is-a” relationship and not a “has-a”
    relationship (Human->Animal vs. User->UserDetails).
  2. You can reuse code from the base classes (Humans can move like all animals).
  3. You want to make global changes to derived classes by changing a base class.
    (Change the caloric expenditure of all animals when they move).

Bad:

  1. class Employee {
  2.   constructor(name, email) {
  3.     this.name = name;
  4.     this.email = email;
  5.   }
  7.   // ...
  8. }
  10. // Bad because Employees "have" tax data. EmployeeTaxData is not a type of Employee
  11. class EmployeeTaxData extends Employee {
  12.   constructor(ssn, salary) {
  13.     super();
  14.     this.ssn = ssn;
  15.     this.salary = salary;
  16.   }
  18.   // ...
  19. }

Good:

  1. class EmployeeTaxData {
  2.   constructor(ssn, salary) {
  3.     this.ssn = ssn;
  4.     this.salary = salary;
  5.   }
  7.   // ...
  8. }
  10. class Employee {
  11.   constructor(name, email) {
  12.     this.name = name;
  13.     this.email = email;
  14.   }
  16.   setTaxData(ssn, salary) {
  17.     this.taxData = new EmployeeTaxData(ssn, salary);
  18.   }
  19.   // ...
  20. }