Introduction to Object-Oriented JavaScript

John Au-Yeung - Jan 24 '21 - - Dev Community

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.

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() {
  //...
}
Enter fullscreen mode Exit fullscreen mode

which is the same as:

class Person {
  //...
}
Enter fullscreen mode Exit fullscreen mode

We can write methods by writing:

function Person() {
  //...
}

Person.prototype.eat = function(){
  //...
}
Enter fullscreen mode Exit fullscreen mode

With the class syntax, we write:

class Person {
  //...
  eat(){
    //...
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .