Modeling a Polling System with Prototype Oriented Programming in Javascript

In programming generally, we often want to find ways to make our codes reusable so we can write fewer codes or look for a way to avoid duplicating functions or methods across our projects. This is one of the reasons behind Object-Oriented programming

The key characteristics of every Object-Oriented programming language are that it should support polymorphism, encapsulation, abstraction, and inheritance

In Javascript, inheritance is implemented via its prototype hence the concept behind Prototype-Oriented programming. Objects have a special property, this object is called “a prototype”. This is either null or reference another object.

To explain this concept, we are going to model a simple polling system

Let’s get started

A simple polling system should have a person organizing the event and some voters. Taking all that into an app will entail both the person organizing (Admin) and the voter to create an account. The Admin would be able to create an event and add contestants to that event while the voter would be able to vote. These are unique to each User but what’s similar is that both admin and voter would be able to create an account and also view the results of the polls.

First, we are going to create a mock database to temporarily store our data

Then create a constructor function that would take two parameters for the name and password of the user and also the create account method. We are going to call this function Admin

Great, we have created our constructor. Now let’s see what happens when we try to create an account.

Now let’s create another constructor for our voters

The same thing that happened in admin happens in voters when we create an account with the .createAccount method. The only issue here is both the user and admin technically do the same thing( submit to the same database but into different arrays and output the same structure of result) and we still repeated the code.

Javascript Prototypes

What if there was a way to have the .createAccount method in a single constructor for both the Admin and Voter to inherit from. This reason here is why the prototype object was implemented in Javascript. For instance, our Admin constructor comes with a prototype object. Let’s try to access Admin prototype in our browser’s console

Accessing constructor prototype in Javascript

If you noticed, just like any other Object property in javascript, we accessed our prototype with the dot notation . . By default, a constructor prototype has a constructor property that is set to the constructor itself. In other words

Admin.prototype.constructor = Admin

Refactoring the codes

Let’s refactor our code to implement the prototype concept

Since both the Admin and Voter are users in our app, we can create a new constructor called User that carries the same properties as the Admin and Voter.

Hold on a minute, we are going to add our createAccount method but this time on the User prototype

There, our first step to inheritance. We already catered for both Admin and Voter in just one function(we would set the role in the condition soon). Now let’s make Admin and Voter inherit the .createAccount method from User constructor

In the snippet above, we used the Object.create method to create a copy of the User prototype in the Admin prototype (note that this copy would have the same reference in memory, so if we refactor the method in the User, it also changes in Admin). Now that Admin has inherited from User lets see what’s in Admin prototype with the browser console

Because the Admin is inheriting from User, the Admin constructor is set to User. Since we want to inherit only the Admin prototype and not the constructor itself let’s fix this

Now check using your console again

There you go, our Admin constructor is now back to Admin. If you notice, we can see our .createAccount method is now in the prototype of Admin. Now let's try to create an admin account

Let’s make Voter inherit from user to. Just the same way as admin

We created the same .createAccount method in both Admin and User but this time by not duplicating codes and writing fewer codes.

Now let’s add some more features to our poll app.

Search Event and View results

Both the Admin and Voter should be able to search for an event and view the results of the polls, so we would put this method in the User construct prototype so both can inherit it.

Create and Delete Event

Since Admin would be creating the event then the Admin should be the only one allowed to delete. So we would put this on the Admin prototype and not the User prototype so the Voter won’t inherit this method

Vote a Contestant

And finally, we need to create a method to allow the voter vote for a particular contestant. This would be put on the Voter prototype and not the User so the Admin doesn’t inherit this.

The complexity of creating an account (.createAccount) is hidden from the Voter and Admin hence Abstraction.

The .searchEvent , .viewresults and some of the other methods can take any form depending on where they are used, either in Admin, Voter, or the User constructor itself, hence depicting Polymorphism. For example, say we want the .viewResults method in the Voter to give a different response from that of the Admin we can do this

This explains Polymorphism (the same method, .viewResults,giving a different response).

Yea yea! We are done. Now let’s create an index.js file so we call all our methods.

Other features not implemented here are: autoincrement user ID, test with jest. Can be found on my GitHub repo