Object-Oriented JavaScript — Parts of a Class

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at the parts of a JavaScript class.

Constructor

The constructor is a special method that’s used to create and initialize the object we create with the class.

The class constructor can call its parent class constructor with the super method.

super is used for creating subclasses.

Prototype Methods

Prototype methods are prototype properties of a class.

They’re inherited by instances of a class.

For instance, we can write:

class Car {
  constructor(model, year) {
    this.model = model;
    this.year = year;
  }

  get modelName() {
    return this.model
  }

  calcValue() {
    return "2000"
  }
}

We have 2 prototype methods within our Car class.

One is the modelName getter method.

And the other is the calValue method.

We can use them once we instantiate the class:

const corolla = new Car('Corolla', '2020');
console.log(corolla.modelName);
console.log(corolla.calcValue());

We created the Car instance.

Then we get the getter as a property.

And we called calcValue to get the value.

We can create class methods with dynamic names.

For instance, we can write:

const methodName = 'start';

class Car {
  constructor(model, year) {
    this.model = model;
    this.year = year;
  }

  get modelName() {
    return this.model;
  }

  calcValue() {
    return "2000"
  }

  [methodName]() {
    //...
  }
}

We pass in the methodName variable to the square brackets to make start the name of the method.

Static Methods

We can add static methods that can be run directly from the class.

For instance, we can write:

class Plane {
  static fly(level) {
    console.log(level)
  }
}

We have the fly static method.

To run static methods, we can write:

Plane.fly(10000)

Static Properties

There’s no way to define static properties within the class body.

This may be added in future versions of JavaScript.

Generator Methods

We can add generator methods into our class.

For instance, we can make a class where its instances are iterable objects.

We can write:

class Iterable {
  constructor(...args) {
    this.args = args;
  }

  *[Symbol.iterator]() {
    for (const arg of this.args) {
      yield arg;
    }
  }
}

to create the Iterable class that takes a variable number of arguments.

Then we have the Symbol.iterator method to iterate through this.args and return the arguments.

The * indicates that the method is a generator method.

So we can use the class by writing:

const iterable = new Iterable(1, 2, 3, 4, 5);
for (const i of iterable) {
  console.log(i);
}

then we get:

1
2
3
4
5

We have created an instance of the Iterable class.

Then we looped through the iterator items by and logged the values.

Conclusion

A class can have a constructor, instance variables, getters, instance methods, static methods, and generator methods.