Good morning, good afternoon and good evening! Thank you yet again for coming to check up on me and my blog, and a huge shout out to all of my lovely cohort friends that have been kind enough to check in on my journey and even recommending it to others. I really do appreciate every single one of you! 😊
As always, feel free to drop me a follow on Twitter, LinkedIn and GitHub!
Oops... How has my third week been?
Honestly from the get-go, it has been absolutely hectic. Imagine yourself trying to catch a train that just set off, that was exactly how I feel this week has been. An absolute train wreck of making sure I paid complete attention to each and every single lecture this week!
This week we spent it primarily on learning OOP (Object Oriented Programming), the core concepts and principles and they work in JavaScript. And if I may so, I cannot believe that myself and my fellow cohort have made it out (hopefully) in one piece!
Every single morning at 08:00, I would be making sure I read over the notes made available to prepare myself for the lectures at 09:00. And even then I had to completely focus!
But as the mentors at Northcoders are amazing with their explanations of the core concepts, I managed to somewhat stay afloat this week 😂
So what did you cover this week?
Right off the bat we covered the following topics of:
- Introduction to Recursion
- Introduction to OOP and its 4 pillars
- Prototypes & Prototypal Inheritance in JavaScript via Prototype Chaining
- The infamous "this" keyword
- Introduction to "Class", constructors, instances.
- Extending JavaScript classes and instantiation with
newkeyword - JavaScript Getters and Setters
Honestly an entire week on OOP and I'm ready to go back to my comfortable home of Functional Programming!
Which I would like to iterate again to myself and my fellow cohort friends, look at what we've done this entire week! Prior to OOP, we had weeks/months perhaps learning about the Functional Programming Paradigm, and we learned about OOP in this one-short week, well done!
Recursion
Did you know that if you Google "Recursion", that it will return itself in the search bar?
Recursion in JavaScript is a function that makes calls to itself, and these are not limited to "returning" itself in a function.
A recursive function works by adding new instances of itself recursed onto the "Call Stack" and will keep on doing so until it is told to stop. However, if it is not told when to stop recursing (caling itself) then it will eventually lead to what's called a "Stack Overflow" because there's not enough memory in the browser/computer because each recursion is waiting for a result from its last recursion.
Confusing, right? I like to not think about recursion so that I don't think about recursing the thought of not liking it 🤣
A recursive function has the three following steps:
- 1 - Base Step/Exit Case - This is when you tell the function to stop recursing on itself. Think of this as the "if" statement!
- 2 - Recursive Case - This is the "reason" a function is recursing. Perhaps it's a total is being added to each recurse!
- 3 - Recursive Step - This is how the function will recurse on itself to walk towards its goal in the recursive case. Perhaps it's recursing to count the numbers from 10 to 1!
OOP & 4 Pillars
"OOP" or "Object Oriented Programming" is another programming paradigm in which you work with objects that will have their own methods (Functions) that are assigned as properties. Instances of these objects and other classes will be able to inherit these methods.
Bit of a mouthful but in short, we're mostly focusing on creating objects and not functions like in the Functional Programming Paradigm. And we are not afraid of a bit of mutation in our objects!
Key Words & Concepts in OOP
- Instance - When the term "instance" is used in OOP. It means a newly created object that is derived from a certain class/prototype.
- Instantiation - This is just the technical term for when an instance is created.
OOP's 4 Pillars
The OOP paradigm relies on the following four principles of:
- Encapsulation - The grouping of data & behaviour into little packages, and limiting data accessibility from the user through things like private naming conventions & variable declarations.
- Abstraction - This is removing the more complicated processes from the user and letting them focus on the main task at hand. For example, we don't need to tell someone how to make a cup of coffee with the inner workings of a coffee machine, we just tell them to use the machine!
- Inheritance - This is the concept of instances that have been instantiated from a Class/Prototype having access to the prototype's methods and properties.
- Polymorphism - This is where an instance that is derived from its parent class/prototype should be able to act as if it is the parent class (As it inherits behaviours/data).
Even after trying to get my head around the entirety of the 4 pillars, I will still need a bit more practice getting my head around these concepts!
Prototypes, Prototypal Inheritance & Prototype Chaining (JavaScript Traversal)
Everything in JavaScript is an object. It's just that "Arrays" etc are a special type of object, and so they all have a prototype. - Top Class Mentor Dave 2022
By the end of our introduction to OOP, if there's one thing to remember from Dave's lectures, was that everything in JavaScript is an object!
As every single object in JavaScript has a "Prototype", you must be wondering what exactly a "Prototype" is.
Prototypes in JavaScript are a mechanism that objects will use to inherit methods from one another. These "Prototypes" will each come with their own custom methods that upon an instantiation of a new instance on a specific prototype, will inherit the methods of that prototype.
JavaScript Traversal with Prototype Chaining
Another topic that was hammered into our heads by Dave was the concept of "Prototype Chaining" and how JavaScript traverses through to check if certain methods are available when called.
In this case, JavaScript will look in the following steps:
1 - Instance: JavaScript will first look to find the called method on the instance that called it.
const myArray = [1,2,3]
myArray.fakeMethod();
2 - The Prototype - So now that JavaScript was not able to find the fakeMethod() on the instance called myArray, it will look at the level above, which is the Array Prototype.
Array.fakeMethod() // fakeMethod is not a function
3 - Layers Above (If necessary), else the Object.Prototype - Once JavaScript has traversed through the instances, and prototype layers, it will eventually reach the highest "Object.Prototype" layer and if it does not exist there, then it does not exist at all!
What is "this"?
The most anticipated keyword that has been said multiple times this week, what is "this"?
"this" is a keyword that will implicitly bind the object that calls it with the following properties that have been defined.
We mentioned previously how "Constructors" will be receiving arguments that are used to store properties on the objects that are instantiated instances of that constructor prototype, right?
We achieve "Encapsulation" by ensuring that each new instance of an object on a specific constructor prototype will be unique to that instance and not shared with others. Consider this:
class Pokemon
constructor(name, favouriteFood) {
this.name = name
this.favouriteFood = favouriteFood
}
const Charmander = new Pokemon("Charmander", "beta blocks");
const Pikachu = new Pokemon("Pikachu", "gamma blocks");
console.log(Charmander)
console.log(Pikachu) // Each "new" Pokemon will have their own unique properties that are bound by the "this" keyword!
Classes, Constructors, Instances
Classes are what is called "Syntactic Sugar" that sweetens the existing functions that we have in JavaScript and makes our lives a lot easier!
We are able to create a class and have it known to others with the class keyword and a capitalised first letter following the word after, to say to other developers "HEY! This is a class, remember to instantiate new objects using the new keyword"
This brings me nicely to the new keyword that must be called whenver a new object instance is instantiated from a class, such as the above example earlier:
const Charmander = new Pokemon("Charmander", "beta blocks");
Classes are an amazing addition to JavaScript in ECMA 2015 - and have the "Constructors" which hold the properties that are declared upon instantiation and bind it to each individual instance.
In addition to this, we are able to declare methods (Functions) as we would a normal function inside the Class, and these will be inherited by each instantiation and "extension" of the parent class.
Extends and Super
I'm really on fire tonight with how I'm leading into each topic, aren't I? ️🔥️🔥️🔥
When you have defined a class that has properties that are bound to each instance, and methods have been defined.
We are able to use the extends syntax to create essentially a sub-class that will inherit all of the previous methods defined in the parent class of which it extends, and even override existing methods.
Consider this example:
class Pokemon {
constructor(name, type) {
this.name = name;
this.type = type;
}
eat() {
return `${this.name} has started to eat.`
}
}
class SatiatedPokemon extends Pokemon {
constructor(name, type) {
super(name, type)
}
eat() {
return `${this.name} is already full.`
}
}
const Charmander = new SatiatedPokemon("Charmander", "Fire");
Charmander.eat() //logs "Charmander is already full."
As you can see from this example above, when Charmander which is a newly instantiated instance from the "SatiatedPokemon" class uses the eat() method, because of the rules of JavaScript traversal first looking into the instance, this is the method that will be called!
Adding onto this is the idea of the "Super" keyword that is used to copy over the parent class' properties, but even modify them!
JavaScript's Getters and Setters
The get() and set() methods in JavaScript are used so that the user is able to essentially "get" certain properties and "set" certain properties of an object.
These are especially useful if the properties in question have a "Private Naming Convention" or "Private Property Setting", these are the following:
- Private Naming Convention - As the name suggests, these are naming conventions that developers adhere to that tells other developers to not interfere (too much or at all) with certain variables, and these are denoted with an underscore. E.g.
_name: - Private Variables With Hashtags - These are properties that will only be accessible inside a Class. And these are denoted by the hashtag "#" symbol, and must be defined before the constructors, and is referable by methods in the class.
class Squirtle extends WaterPokemon{
#species;
constructor(name, hitPoints, attackDamage, move) {
super(name, hitPoints, attackDamage, 'water gun')
this.#species = "Squirtle";
}
}
const Chris = new Squirtle("Chris", 70, 20);
//console.log(Chris.species) will have the attributes passed in without the "private" species!
With the get method, we are able to use these exclusively to get access to even private properties, for example:
get speciesName() {
return this.#species;
}
console.log(Chris.speciesName); // logs "Squirtle"
The Get Method is a function and so you will only need to simply append the name of the function to the right of the "Get" keyword, and it will run the "get" function!
set pkmnAge(age) {
this.pkmnAge= age;
}
The Set Method will allow the user to set certain properties dynamically by making sure that we call the "set" method with a single argument, otherwise the setter method will not run.
Thoughts Going Forward
If you have somehow made it towards the end, then thank you again for reading and checking out my blog! I'm honestly overwhelmed with how much we have covered this week and for now, I'll be sure to enjoy my 3-day weekend and brush up for doomsday (Review Day) this coming Tuesday!
Socials
Feel free to give me a follow on any of my socials down below!
Top comments (0)