Categories
Object-Oriented JavaScript

Object-Oriented JavaScript — Aggregation, and Inheritance

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.

Categories
Object-Oriented JavaScript

Introduction to Object-Oriented JavaScript

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.

Object-Oriented Programming and JavaScript

Object-oriented programming languages have some features in common.

They are:

  • Object, method, and property
  • Class
  • Encapsulation
  • Aggregation
  • Reusability/inheritance
  • Polymorphism

JavaScript has most of these features.

However, JavaScript doesn’t have classes even though it has the class syntax.

The class syntax is just syntactic sugar on top of its prototype-based inheritance model.

However, it does have other parts.

We can define objects in various ways with JavaScript.

And objects can have properties and methods.

Methods in JavaScript can be part of the constructor or class.

Or it can be part of an object literal.

We can use code through inheritance and merging objects.

Also, we can have polymorphism as long as the interfaces can be substituted.

Objects

Objects is the basic building block of JavaScript object-oriented programming,

An object is a representation of something.

The thing can be anything.

It can model real-world objects or it can represent something more abstract.

They have characteristics like color, name, weight, etc.

Objects are most often named using bounce, like book, car, .etc.

Methods are named with verbs since they do something.

Values are adjectives.

Classes

JavaScript doesn’t have real classes.

But it does have the class syntax.

JavaScript inheritance is done via prototypes, which are objects that other objects inherit from.

Also, JavaScript has constructors which look like classes.

They can be instantiated with the new keyword like a class, but they’re functions that we can return anything with.

They can have prototypes so that all instances share the same methods.

We can create a constructor by writing:

function Person() {
  //...
}

which is the same as:

class Person {
  //...
}

We can write methods by writing:

function Person() {
  //...
}

Person.prototype.eat = function(){
  //...
}

With the class syntax, we write:

class Person {
  //...
  eat(){
    //...
  }
}

Encapsulation

Encapsulation is another object-oriented programming concept.

An object holds data which are stored in properties.

And they can do something with the data via methods.

Encapsulation also means we only expose what’s absolutely necessary to the outside.

The less each part know about each other, the better.

This is because we don’t want one part to affect the other parts when they change.

For instance, we don’t want to know how 3rd party libraries work internally.

We just want to use the interfaces they expose.

This way, we can’t use the internals of the library in our own app.

So if the library changes, it’s less likely that the change will break our app

Many object-oriented programming languages have different levels of access to class variables.

Some languages like JavaScript may have public, private and protected methods.

There’s no access control with JavaScript.

Wd can only keep private data in functions and modules.

Conclusion

JavaScript is partly an object-oriented language.

It can do many things that they can do.

But notable things that are missing include classes and private or protected instance variables.