If you're like me, you've probably built programs by defining objects like this -

var lotr = {};
lotr.title = 'LOTR';
lotr.ratings = [];

var dune = {};
lotr.title = 'Dune';
dune.ratings = [];

Nothing's wrong here. But JavaScript classes have some core benefits that help devs save time building objects while also reducing time debugging.

Think about it. If we make one mistake while making objects over and over, we'll have to rummage through each object we create.

Classes Make Life Easier

Take for example our two above objects. We could essentially accomplish the same by leveraging JavaScript classes-

class Book {
  constructor(title) {
    this._title = title;
    this._ratings = [];
  }
};

var lotr = new Book('LOTR');
var dune = new Book('Dune');

Quick Example

We have more code above, which is never ideal. But productivity gains are quickly realized. Manually making objects out of the following array wouldn't be fun-

var painInTheButtDataEntry = ['bookTitle1', 'bookTitle2', 'bookTitle3', 'bookTitle4', 'bookTitle5', 'bookTitle6', 'bookTitle7', 'bookTitle8', 'bookTitle9'];

But by using classes, we can create simple objects in no time.

Copy/paste the following into your console-

var painInTheButtDataEntry = ['bookTitle1', 'bookTitle2', 'bookTitle3', 'bookTitle4', 'bookTitle5', 'bookTitle6', 'bookTitle7', 'bookTitle8', 'bookTitle9', 'bookTitle10', 'bookTitle11', 'bookTitle12'];

var arrayOfObjects = [];

painInTheButtDataEntry.forEach(function(bookElement) {
  return arrayOfObjects.push(new Book(bookElement));
})

console.log(arrayOfObjects);

Notice how we have a nice array of objects.

Functions in Classes

Just like with regular objects, we can add methods to our class Book class. Notice how we add our method outside of the constructor-

class Book {
  constructor(title) {
    this._title = title;
    this._ratings = [];
  }

  addRating(rating) {
    this._ratings.push(rating);
  }
};

var lotr = new Book('LOTR');

lotr.addRating(1);

console.log(lotr._ratings); 
// logs [1]

By adding this, we're now able to call methods for each instance of the Book class that we create.

Now imagine we had to tweak this method for hundreds of objects we've created. By keeping our function centralized in the Book class, tweaking the addRatings(rating) function centrally affects all instances of the Book class that we make.

Why Extending Classes Saves Time

Imagine we now wanted to create a Comic class. This class shares lots in common with Book, as Comic will also have a title and ratings array.

By calling extends on Book, we're able to prevent code duplication and take advantage of our previous work.

class Comic extends Book {
  constructor(title, numOfpictures) {
    super(title);
    numOfpictures = this._numOfpictures;
  }
};

We've introduced a few things here, but let's walk through what's happening here.

1. By calling class Comic we're setting a new class. by adding extends Book, we're creating what's called a "subclass" of Book. This subclass can now take advantage of Book's properties.
2. Just like in Book, we call constructor with two arguments.
3. Now check out super. Think of super as calling the constructor in Book, and we know that Book's constructor takes one argument, that being title````. This essentially allows us to useBook'stitleparameter inComic``` without needing to type any additional code out.
4. Below title, we set Comic's unique parameter numOfPictures to the given parameter on line 2, argument 2 of Comic's constructor.
5. If you run the following code, you will see that the new instance of Comic that we made has an empty array, despite us not specifically adding that to Comic.
6. Lastly, Book's method addRating(rating) can also be called on Comic.

class Book {
  constructor(title) {
    this._title = title;
    this._ratings = [];
  }

  addRating(rating) {
    this._ratings.push(rating);
  }
};

class Comic extends Book {
  constructor(title, numOfpictures) {
    super(title);
    numOfpictures = this._numOfpictures;
  }
};

var theAvengers = new Comic('Age of Ultron', 85);

theAvengers.addRating(5);
console.log(theAvengers);

// returns Comic {_title: 'Age of Ultron', _ratings: Array(1)}

Real World Scenario with Classes...

Your local library asks you to convert its data on books, CDs, and movies into an array of objects.

By creating a class Media with core parameters that all forms of media share, such as title, mediaType and yearMade, we can extend this "parent" class to subclasses.

The subclass for CDs might contain artist while the subclass for movies might contain director or actors.

In Summary

Classes are like blueprints for future objects.

Subclasses extend parameters of Classes into more niche blueprint objects.

All cars have four wheels, but a coupe is very different than a SUV.

All schools have instructors, but there are varying levels of education.

Cheers!