Moving into week 7 of the Command Shift course, we are going even more in-depth on Javascript and creating a Virtual Pet using 100% JS. This project ties together what we've learnt in the previous Kata Challenges and also what we covered in the Test Driven Development portion of the course, as well as introduces some new concepts and we start to delve into Object Orientated Programming as well. As usual, please see the Command Shift website for more information on the course itself.
OOP, Prototypes and Constructors
The first part we'll touch on is Object-Orientated Programming(OOP). What is OOP?
Object-Oriented-Programming is based on the concept of objects. An object is a self-contained unit of code that contains data and the methods (or functions) that operate on that data. Objects are created from classes, which are blueprints for objects. Several key concepts come with OOP.
Encapsulation: This means that an object hides its internal state and behaviour from the outside world, and only exposes a public interface that can be used to interact with the object. This helps to ensure that the object's data is only accessed and modified in a controlled way.
Inheritance: This allows one class to inherit properties from another. This can help to reduce the need for repeating code.
Polymorphism: This allows objects of different classes to be treated as if they were objects of the same class. Polymorphism is often achieved through inheritance and interfaces.
Abstraction: This means that an object only exposes the essential features to the outside world while hiding the implementation details. Abstraction helps to simplify the complexity of the code and makes it easier to understand and use.
Overall, OOP provides a way to organize and structure code in a way that is modular, reusable, and maintainable. By encapsulating data and behaviour into objects, and using inheritance, polymorphism, and abstraction, OOP can help to create more robust and scalable applications.
Next, we will touch on Constructors and Prototypes. In JS Prototypes are objects themselves and they define the methods that all the instances of that object will have. When we create an instance of a class/prototype then the instance inherits the prototype object and then has access to its methods. Below is an example of a prototype:
Pet.prototype.haveBaby = function (name){
const child = new Pet(name)
this.child.push(child)
};
Pet is a Constructor function in this code, and we use the keyword prototype and then pass in the haveBaby method. Now, this prototype has access to all the values of the Pet constructor. Within that constructor, there is an empty array called 'child'.
A constructor allows us to create objects within functions. Here's an example below:
function Pet(name){
this.name = name;
this.age = age;
this.hunger = hunger;
this.fitness = fitness;
this.child = [];
};
Here we can see a similar layout to an object, and with the properties within this, we can access them throughout our code base. Having this also allows us to access these for our testing as well.
This is what we covered and worked on within our Virtual Pet Project this week. It was a good introduction to OOP.
Virtual Pet Project
The idea behind the project is to be able to change inputs and variables of the Pet Object itself and return specific responses depending on those inputs. For example:
You can give the Pet a name
You can feed your Pet to decrease its hunger level
As they get older, they become less fit and more hungry
If the age exceeds 30 days it will pass away
This was a challenging project to cover, but it was a lot of fun and pushed us to work on our test knowledge and introduced the new concepts we'd learned for JavaScript OOP.
I'm not going to cover the whole project here, but I have linked it for those that would like to check it out! Virtual Pet Project The Read Me file on the page covers quite a bit about the project. I have currently been going through some refactoring after a code review to make code easier to read and also tidy up just my general layout.
That's a wrap
The Virtual Pet project was a great way to start learning OOP. This was difficult for me when I started it but I picked it up pretty quickly and managed to get tests to pass and enjoyed writing out the syntax for it all. We're moving on to a cruise ship project in the coming weeks as we start to reach the end of JS fundamentals.
Thanks for reading!