OOP in JavaScript: Explained using games

In this article, we will talk about Object Oriented Programming in JavaScript using both prototype and ES6 classes.

There are 2 ways of implementing OOP in Javascript:

1) Using functions and prototype
2) Using the new class keyword. (It’s syntax sugar introduces in ES6–2015)

Let’s play a game

Mario game — OOP real usecase

First of all, let’s talk about why you should use classes in your code.
There are multiple use cases, but probably the most common one is video games.

Let’s say that you want to create a game with multiple monsters of the same type and similar items (for example coins).

Now, our monsters will have the same image, the same health, damage, even the same movement pattern. This is the perfect time to define a template (a class) and create multiple identical(or almost identical) objects of the same type. (the term used in OOP is an instance of a class)

Wait, so you say OOP is only relevant for games?

Not at all. In a store, you can have products with the same structure (title, description, price, function to check availability, and others). There are countless valid use-cases for OOP.

Let’s write some code.

1) Using functions and prototype

What we need to do:
— define a custom structure for our monsters.
— health, src are properties and will have the same value for all the monsters
— speed is a variable property and we specify it as a parameter
— attack is a method; in OOP terms the functions are called methods
- create 2 monsters(instances of class monster) using our constructor (the monster function)
- console.log the monsters and see the difference.

Monster class using prototype

You should notice 2 things:

How 2 instances of class Monster looks like

A) We got what we expected. 2 similar monsters with a different speed value.

B) We have a weird prototype <prototype> despite the fact we didn’t create it.
Well, here’s the tricky part. JavaScript will automatically create a prototype object for us.

Prototype is one of the hardest parts of JavaScript even for experienced developers so don’t be afraid if it seems rocket science at the beginning. We will take it step by step.

Proto..what ?

This is how it looks:

A “simple” Prototype

First of all, it’s huge :D

What do you see? Our prototype has a constructor (the Monster function) and ANOTHER PROTOTYPE?

The second prototype is for the generic type Object in JavaScript and defines all the common properties.

For example, for every JavaScript Object we can use the function hasOwnProperty and toString and this is because every new class will inherit the properties of the generic Object.

This is how inheritance works in OOP. The child class will inherit traits from the parent.

toString not working as expected

And just to introduce one more fuzzy word which will make you sound smart at the next interview: Prototype chaining. → it’s exactly what we saw before. The Monster object has a prototype which has another prototype which points to the parent class.

Let’s say that we have one special type of monster FlyingMonster which has all the traits from its parent (the Monster class) — so we say that the FlyingMonster extends the Monster class which extends the generic Object class from JavaScript.

FlyingMonster → Monster → Generic Object

In this case, the FlyingMonster will a prototype which contains a reference to the prototype of the Monster class which contains a reference to the prototype of the Generic Object.

Now, let’s take a step back and talk about overriding a method.(in simple words it means modifying a method our monster inherited from the parent class).

Overriding the “toString ”method

Now, let’s implement overriding for the toString method and try it.

Overriding the toString method

There are a lot of things we can discuss about prototypes, but for the moment it’s enough. I will write a different article for more complex OOP concepts.

2) Using the new class keyword. (It’s syntax sugar introduces in ES6–2015)

Monster class using ES6 class keyword

This solution is just syntax sugar for developers. The ES6 code will be transpiled to ES5 because the old browser does not support all the new functionalities in JavaScript.

Depending on the transpiler setting, the code will look differently. This is how it looks for Internet Explorer 10. You can see that it’s similar to our first implementation. (with functions instead of classes)

Babel ES6 code transpiled to ES5

Homework

Can you recreate the FlyingMonster class which extends the Monster class using ES6 ? It’s not hard at all. Let me give you a hint:

Classes - JavaScript | MDN

Conclusion

I hope you learn something new and interesting about JavaScript today.
As a recap, we introduced some OOP terms:
- prototype
- class
- instance
- constructor
- inheritance
- extending a class
- prototype chaining

Let me know in the comments what you think and if I should continue with a more advanced article about OOP in JavaScript.