Best of Modern JavaScript — Class Safety and Pros and Cons
Tags: javascript, webdev
Published: 2020-07-31 01:32:18

---
title: Best of Modern JavaScript — Class Safety and Pros and Cons
published: true
date: 2020-07-25 19:39:54 UTC
tags: javascript,webdev
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8aclass-safety-and-pros-and-cons/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258aclass-safety-and-pros-and-cons
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at how to define classes with JavaScript.

### Safety Checks

The JavaScript interpreter does some safety checks when instantiating classes.

`this` is originally uninitialized in the derived constructor means that an error will be thrown if we try to access `this` before calling `super` in a subclass.

When `this` is initialized, then calling `super` produces a `ReferenceError` since `super` is already called to initialize `this` .

If a constructor returns an non-object, then a `TypeError` is thrown.

If a constructor returns an object explicitly, then that’s used as the result.

In this case, it doesn’t matter if `this` is initialized or not.

### The extends Keyword

The value that we’re extending must be a constructor.

However, `null` is allowed.

For instance, we can write:

```
class Foo extends Bar {}

```

given that `Bar` is a constructor.

`Foo.prototype` would be `Bar` in this case.

We can also write:

```
class Foo extends Object {}

```

since `Object` is a constructor.

`Foo.prototype` would be `Object` in this case.

And we can also write:

```
class Foo extends null {}

```

Then `Foo.prototype` is `null` .

### Referring to Base Class Properties in Methods

We can refer to base class properties in methods.

For example, if we have:

```
class Person {
  constructor(name) {
    this.name = name;
  }

  toString() {
    return `${this.name}`;
  }
}

```

Then we can create a subclass for `Person` by writing:

```
class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }

  toString() {
    return `${super.toString()} (${this.grade})`;
  }
}

```

We create the `toString` to create a method that calls the `toString` method of `Person` with `super.toString` .

This is done by searching for the `toString` method up the prototype chain to get the `toString` method and calls it.

Then the method is called if it’s found.

This is different from what we did in ES5 or earlier.

In earlier versions, we call a superclass method with the `call` method.

For example, we can write:

```
var result = Person.prototype.toString.call(this);

```

With ES6 or later, as we can see, we don’t have to refer to the parent class directly.

We just use `super` .

`super` can be used in subclass methods and constructors.

They can’t be used in function declarations.

A method that uses `super` can’t be moved.

It’s tied to the object that it’s created in.

### Pros and Cons of Classes

There are some pros and cons of classes.

The class syntax makes constructors look more like classes from class-based languages.

The unconventional pattern of inheritance throws many people off.

It hides a lot of complexity with managing prototypes and constructors.

Classes are backward compatible with any current code, so no breaking change is introduced.

Subclassing is supported by the class syntax.

It’s also easier for beginners to under the class syntax instead of prototypes.

No library is required for an inheritance, which is good.

This makes them more portable.

They also provide foundations for more advanced OOP features like traits and mixins.

Classes can also be statically analyzed more easily with IDEs, text editors, and more.

However, they do hide the true nature of JavaScript’s object-oriented model.

JavaScript classes look like its own entity, but it’s actually a function.

However, because of the need for backward compatibility, JavaScrtipt classes can’t be a completely new entity.

This is a compromise to make the class syntax work with existing code.

### Conclusion

The JavaScript interpreter provides us with safety checks for classes.

Also, there are pros and cons with the class syntax.

The post [Best of Modern JavaScript — Class Safety and Pros and Cons](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8aclass-safety-and-pros-and-cons/) appeared first on [The Web Dev](https://thewebdev.info).