Hello OOP

a beginner’s guide to OOP in javascript.

I don’t know who made this — https://i.ytimg.com/vi/91gxLyc9nXU/maxresdefault.jpg

You might have heard POP instead of OOP, you are not wrong, P in POP is prototype, and Javascript’s OOP concept doesn’t technically use classes, they only introduced a syntactic sugar “classes” in ES6, going forward I might use the two terms interchangeably, just know I am referring to the same thing.

Ok, enough said, I will introduce some basics before we dive into OOP (or POP) proper.

Basics

First thing to note is that we have 6 primitive data types and every other thing is an Object in JavaScript.

Objects are collections of key: value pairs. Find below how to create a simple object;

An Object is also an instance of a class. As stated above there are no classes in JavaScript, what JavaScript does is to use functions as constructors for classes. Defining a class as simple as writing a function.

And then to create an instance we simply use the ‘new’ keyword and assign it to a variable;

There is a word — Constructor — it is called at the moment the Object instance is created. The constructor is simply a method of the class.

Then the classes have something called the properties, they are kinda like variables declared in the functions (constructors), anywhere you call the function, be sure to have access to the properties also.

Now I will tell you about the keyword ‘this’. You probably have seen it or even used it before, ‘this’ in the simplest grammar possible refers to the object you use it in, you can use it to have access to the properties of a function from within it.

So far, if you have been following, you will see we have created a basic User Object and instantiated it as jon, the extra was printing the details of the instance jon to console.

Now to the prototype part of POP, if we were to have method for the User instance, say for the popular saying ‘I know nothing’. We will create a method favSaying — to do this, we use .prototype.methodName on the User Constructor (function).

In JavaScript, methods are just functions and defined as functions, and they are bound to objects as a property.

You probably have guessed right, we will be building a mini project alongside this beautiful write up, the project we will be whipping up is just a minified version of what a student reports portal should be, just so we can explain the concepts with examples you can flow with.

The mini project — to explain the concepts of OOP

First we should analyse the project, we are building a student reports portal, we want teachers to be able to create a record and update it, a parent should be able to see the record of their kid(a student), and a school admin should do all the above and also delete a student and all students at once. — I think this works as a beautiful scope for our mini project — </tap here to clone the project>

So, we dive in by creating the User Object (Constructor Function), reason we are creating the User Object first is because all stakeholders on the project are still Users, so we will be using the OOP concept called Inheritance to show how a parent inherits from the User class and also a teacher from User, remember in JavaScript, it’s just single inheritance allowed, so an Object can only inherit from another, and not from multiple objects but multiple objects can inherit from one Object.

function User(name, email, password) {
    ...
} 
// just as we have done in the snippets above

When we hear OOP, we think Encapsulation, Abstraction, Inheritance and Polymorphism at the very least, I will explain what each of them means, and give examples as appropriate.

Encapsulation

This is putting all the inner working of an object in the Object, It describes the idea of bundling data and methods that work on that data within one unit. To implement encapsulation in JavaScript we define the core methods and properties on an Object.

The main essence of encapsulation is for a situation when you want to create objects that use same methods and properties, you encapsulate the main functionalities in a function, and then use the function’s constructor to create the Objects.

Example;

Inheritance

This is a way to create a class out of another class which will be considered the parent class, in some other language, you can inherit from more than one class but JavaScript only supports single inheritance.

For Example, in our student report app, we created a User Object and then a Super Admin Object, the User Object is the base or parent Object, while the Super Admin Object can be considered the child Object.

I will explain what the above is doing, Inheritance is one concept that I can say has been fully (well almost) handled by the JavaScript engine, it’s a solid concept in POP.

The first part of the code is the User Constructor/Object (parent), that’s who we inherited from, the Super Admin Object is the Object that inherits methods and properties from the parent / base class. Then the line —

SuperAdmin.prototype = Object.create(User.prototype)

This line above is where the inheriting occurs, what we do here is create the child Object from the parent Object. Object.create helps to make the prototype of the child Object from the parent Object, I am refraining from using the word copy, because when you update the parent Object, the new methods added to the prototype will be available to the child Object, and that wouldn’t have been the case if it was copied.

Abstraction

It simply is hiding the details and complexities and showing only the essentials. Abstraction helps to define the core of the context of an application.

Here, what we have done is basically make sure that the details method (function) is not publicly available, meaning it is private for people coming from languages like java, they will understand the concept easily.

So to make it hidden (or private), in JavaScript we assign the method or property to a variable. This way it is not directly accessible from outside the object, we can then call it (property or method) within another method that is accessible from anywhere. If you run the above code in terminal, create an instance of the User Object, and then call the getDetails() method, it will return the console.log from the details function.

Polymorphism

First thing to note, poly means many, and morph means form, that means many forms. It’s a very powerful concept in OOP. I will show you what it can do for us.

Can you see the pattern above, that’s polymorphism — the Object has many forms, so if you wanted to send in the User Objects instances as an array and loop through, you have something like this;

Now you see exactly how we can implement polymorphism and have the values we need back and reduce the number of codes to have been written, this is really useful coz we already can see that there are many forms to User Object.

If you go through the dummy project, you will see more work has been done on the project, that will help you see how to use some of the concepts above in a real world project. This article was meant to introduce the concept of OOP to you and then in your free time, you can learn while building along what I have in the GitHub repository. You can even fork it and extend the project, and maybe add more parts I must have missed or left out for others to learn from.

If you want the full code base for the dummy project built in this lesson you should clone studentReport.