Javscript Classes and how they Work
Tags: javascript, beginners, tutorial, programming
Published: 2022-11-15 21:41:37

##Why use them?
When making complex codes, we sometimes need similar but disctinct objects. For example, books, it would take too long to make objects for thousands of those books. With a class’s data structure we can create a template with the properties we’ll want for all similar objects, we can use it to create new objects faster.
<br>

#Creating a Class

To create a class you first need to type the keyword `class` followed by the name of the class which always starts with a capital. Then brackets `{}`, inside the brackets you type the special method called the `constructor()`, this method creates the objects and inside its brackets we put in those object values. Even though constructors are useful we don’t always needed, a default constructor is even added even if we don’t add it.


![Class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc0jov1bvh8jk4j6ds2c.png)
<br>

#This
After creating the new object property, you then put in it’s value by using `this` followed by a period and the property name. When we self assign a property that means we can put any property we want to new data with the new class inherit. First we create a constant then we put `new className` to that constant. After that we put in the values of the properties the same order as the original properties in the class.

![classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bx1flkmc3kw8238u6hb9.png)
<br>
#Instance
Every time we create an object from a class we’re creating an instance of that class, for example a constant with the `new` keyword is an instance. Instances are independant meaning it doesn’t affect any other instance, even changing the instance itself doesn’t change other instances.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ot9shnbqpo8me0rsiab.png)
<br>
#Methods
Used to add interactive objects. To create it you just need the name with parentheses `method()` then with brackets where you’ll put the code thats in it. This makes classes be able to perform any action like saying hello in the console.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ux2kvbyg02jc8nr5s6t.png)
<br>
#Extends
Let's say we were in a jungle, the animals in the jungle have some things in common, but they do different things and eat different things too. That’s where inheritance comes to play. To inherit a class you have to create a class with the keyword `extends` then the name of the class it’s inheriting. These classes are called **subclasses**, when they inherit a class they have the same methods and object properties as them. The original class is called a **superclass**.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7g7eq4iteyhx65kva8p.png)
<br>
#Overriding
Let's use an example from [Mimo](https://getmimo.com/playgrounds). There's a difference between a human attack and a wizards attack, though they call it the same thing it has a does different damage. When overriding the main classes method it means that it has the same name but with different data. We do this by creating the method with the same method name as the superclass then create a different set of data so when we call a subclasses instance it does that subclasses method. (i did the example below as a code block because i think the code it too big to be an image, some text isn't fully shown so you may have to scroll to the right)

```javascript
class Human {
  constructor(weapon) {
    this.weapon = weapon
    this.health = 100;
  }
  receiveDamage() {
    this.health = this.health - 10;
  }
}

class Wizard extends Human {
  receiveDamage() {
    this.health = this.health - 20;
  }
}

const Magician = new Wizard("Staff");

console.log(Magician.health);
Magician.receiveDamage();
console.log(Magician.health);
//notice how instead of losing 10 health the Magician loses 10 because it's using the subclasses method which override the Humans

```
<br>
#Super
The keyword super ("`super()`") is used add a superclasses property and add it to the subclass.

```javascript
class Human {
 constructor(weapon) {
  this.weapon = weapon;
  this.health = 100;
 }
 receiveDamage() {
  this.life = this.health - 10;
 }
 attack() {
  console.log("Swing " + this.weapon);
 }
}
class Warrior extends Human {
 constructor(weapon, warCry) {
//The warrior subclass now uses the Human's weapon property
  super(weapon);
  this.warCry = warCry;
 }
 receiveDamage() {
  this.health = this.health - 5;
 }
 attack() {
  super.attack();
  console.log(this.warCry);
 }
}
const alexander = new Warrior("sword", "Alala!");
const leonidas = new Warrior("spear", "Molon labe!");
alexander.attack();
leonidas.attack();
```
<hr>
All this information is from [my Notion page](https://www.notion.so/classes-3cfcf9c63a4544d3984bd791715babd4) that i made a few months ago, while i made the code snippet images using [ray.so](https://ray.so/). Which do you think is better coding snippets or coding snippets on images? Tell me in the comments!