Object-Oriented JavaScript — Aggregation, and Inheritance

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

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

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 go through the object-oriented parts of JavaScript.

Aggregation

The ability to combine several objects into a new one is known as aggregation or composition.

Multiple small objects are easier to manage than one large object.

There are several ways to do with JavaScript.

We can use the spread operator or Object.assign method to combine multiple objects into one.

To use the Object.assign method, we can write:

const obj1 = {
  foo: 1
}
const obj2 = {
  bar: 2
}
const obj3 = {
  bax: 3
}

const merged = Object.assign({}, obj1, obj2, obj3);

We have 3 objects, and we passed them all into Object.assign so we can merge them together and returns a new object with the properties of all of them.

Also, we can use the spread operator by writing:

const obj1 = {
  foo: 1
}
const obj2 = {
  bar: 2
}
const obj3 = {
  bax: 3
}

const merged = {
  ...obj1,
  ...obj2,
  ...obj3
};

This will also combine the 3 objects together.

Another way to aggregate objects is having child objects by having as properties of another object.

For instance, a Book object can have multiple Author objects, Publisher objects, Chapter objects, and so on.

Inheritance

Inheritance is an elegant way to let reuse existing code.

We can create objects and inherit from directly.

And we can create JavaScript classes with subclasses.

Classes and subclasses are syntactic sugar for parent and child constructor functions.

To create an object that uses another object as a prototype, we can use the Object.create method.

For instance, we can write:

const obj = {
  foo: 1
}

const child = Object.create(obj);

Then child inherits from the foo property from obj .

Most objects have the Object.prototype as their prototype if they don’t inherit from anything explicitly.

We can create subclasses with the extends keyword.

For instance, we can write:

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

  eat() {
    //...
  }
}

class Author extends Person {
  constructor(name, genre) {
    super(name);
    this.genre = genre;
  }
}

We have the Person class which is the parent class.

And the Author class inherits from the Person class.

All the instance variables and methods are inherited.

So we can get the name property and call the eat method with an Author instance.

We call the parent constructor with the super .

And we also can access parent class properties and method with it.

We can write:

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

  eat() {
    //...
  }
}

class Author extends Person {
  constructor(name, genre) {
    super(name);
    this.genre = genre;
  }

  eat() {
    super.eat();
  }

  write() {
    console.log(`${super.name} is writing`)
  }
}

We called the Person ‘s eat method.

And we get the Person instance’s name with super.name .

Conclusion

We can aggregate objects in many forms.

And objects and constructors/classes can inherit from other objects and constructors/classes respectively.