Intro to JavaScript Classes
Tags: javascript, classes, inheritance, constructors
Published: 2019-06-16 15:44:58

###Classes are used to create objects:
- class <––– object

####Vocabulary
- instance properties => what they have
instance methods => what they do
- constructor => method that is run once when the object is bring created
-- used to set up your object
- `this` keyword => refers to the object created by the class (the instance)
</ul>


###Creating a class:
```javascript
class Rectangle {
  constructor (_width, _height) {
    console.log("Creating a rectangle")
    this.width = _width (instance property)
    this.height = _height (instance property)
 ,, }
  getArea () (instance method) {
     return this.width * this.height
    }

  printDescription() (instance method) {
    console.log(`I am rectangle a of ${this.width} x ${this.height}
   }
}
```
######Try it out:

```javascript
let myRectangle1 = new Rectangle(2, 6)
let myRectangle2 = new Rectangle(10, 6)

console.log(myRectangle1.getArea())
myRectangle2.printDescription()


```
###Getters and Setters
####Getter
- Used to define methods on a class, which are then used as if they are properties

####Setter
- Assign new values to instance properties

```javascript
class Square {
  constructor (_width) {
    this.width =_width
    this.height = _width
    }

  get area() {
    return this.width * this.height
  }

  set area(area) {
    this.width = Math.sqrt(area)
    this.height = this.width
  }
}
```
######Try it out:

```javascript
let square1 = new Square(4)
console.log(square1.area)
square1.area = 25 //modifies the value of square sides to 5
console.log(sqare1.width)
```

###Static Method
- Method you can define on a class but that does not require an instance of the class to be created in order to be used
- Static method is called on the square class itself. Also called a helper method
- Does not have an object bound to them
- Does not use the `this` keyword

```javascript
class Square {
  constructor (_width) {
    this.width = _width
    this.height = _height
  }

  static equals (a, b) {
    return a.width * a.height === b.width * b.height
  }

  static isValidDemensions (width, height) {
    return width === height
  }
}
```
######Try it out:
```javascript
let square1 = new Square(8)
let square2 = new Square(9)

console.log(square1, square2)
console.log(Square.isValidDimensions(7,6))
```

###Inheritance with extend
- Uses the `extend` keyword
- Parent class is used to create new child class
- The child class takes attributes and behavior of the parent. It will also have its own custom behavior

```javascript
class Person {
  constructor (_name, _age) {
    this.name = _name
    this.age = _age
  }

  describe() {
    console.log(`I am ${this.name} and I am $this.age} years old.`

  }
}

class Programmer extends Person { //child class Programmer of Person
  constructor (_name, _age, _yearsOfExperience) {
    super(_name, _age) //calls the properties from the parent class)

    //custom behavior
    this.yearsOfExperience = _yearsOfExperience
  }

  code () {
    console.log(`${this.name} is coding`)
  }
```
####Try it out:

```javascript
let p1 = new Person("Sheva", 45)
let programmer1 = new Programmer("Ayana", 56, 12)

const programmers = [
new Programmer("Frank", 62, 5),
new Programmer("Jane", 25, 4
];

function developSoftware (programmers) {
  for (let programmer of programmers) {
    programmer.code()
  }
}

```
###Polymorphism
- Act of redefining a method inside a derived child class of a parent class
- When you override a method with the one in the child class, instead of using what's in the parent class

```javascript
class Animal {
  constructor(name){
    this.name = name
  }
  makeSound () {
    console.log("Generic sounds")
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name)
  }
  makeSound() {
    super.makeSound() //calls the parent class first, then child class
    console.log("Woof!")
  }
}
```
```javascript
const a1 = new Animal("Dom")
a1.makeSound()

const a2 = new Dog("Jeff")
a2.makeSound()
```

###HTML List Binding
- Creating a class that can manipulate the DOM directly

```HTML
<ul id = "myList">
//<-----JavaScript List will go here----->
</ul>

<script src = "ListBinding.js"> </script>

<script type = "text/javascript">
const myList = document.getElementById("myList");
const listBinding = new ListBinding(myList);
</script>
```

######ListBinding.js
```javascript
class ListBinding {
  constructor (element) {
    this.listElement = element;
    this.textList = ["abc", "is as easy","as 123" ]
  }

  //Makes an <li>text</li> element/tag

  static createListItem (text) {
  const li = document.createElement("li");
    li.textContent = text;
    return li;

  update() {
  // 1---- remove all existing <li> tags
    while (this.listElement.firstChild) {
      this.listElement.removeChild(this.listElement.firstChild)
    }

  // 2---- Fill <ul> tag with <li>
    for (const text of this.textList) {
      this.listElement.appendChild(ListBinding.createListItem(text))
    }
  }
}

  add (text) {
    this.textList.push(text)
    this.update()
  }

  remove (index) {
    this.textList.splice(index, 1);
    this.update();
  }
}
```

Freecodecamp.org Video tutorial I used:
{% youtube 2ZphE5HcQPQ %}
https://youtu.be/2ZphE5HcQPQ