Understanding Javascript Literals and Classes
# Object Oriented Programming Notes
Object oriented programming is about designing programs that use objects for the primary logic of the program.
Object literals are handy way to encapuslate something specific, like my dog ernie.
For the program:
```
const ernie = {
animal: 'dog', //These are descriptions
age: '1',
breed: 'pug',
bark: function() { //This is called a Method
console.log('Woof!');
}
}
```
We can update a property in this object by using the following code:
Dot Notation:
```
ernie.age = 2;
```
or bracket notation
```
ernie['age'] = 2;
```
We can do something similar to ADD a property to a object literal. For instance;
earnie doesn't currently have a color, but we can give him with the following dot notation code:
```
ernie.color = 'black';
```
or bracket notation:
```
ernie[color] = 'black';
```
in either case, we can console out the new color by:
```
console.log(ernie);
```
But object literals aren't great for representing multiples of something with the same or similar properties and/or methods.
You could imagine having multiple pets:
```
const ernie = {
animal: 'dog',
age: '1',
breed: 'pug',
bark: function() {
console.log('Woof!');
}
}
const schofield = {
animal: 'dog',
age: '6',
breed: 'Doberman',
bark: function() {
console.log('Woof!');
}
}
const ernie = {
animal: 'dog',
age: '7',
breed: 'German Shorthaired Pointer',
bark: function() {
console.log('Woof!');
}
}
```
Each one of these are very similar, and each has to be managed indvidually, which mean a lot repeated code and unneccessary amounts of work.
JavScript Class Syntax solves this, and serves as a psuedo-blueprint for an object. When creating a class, any object using within that class get to utilize the same.
class Pet {
//Start by adding a constructor method. this is a special method that outlines the properties. It goes at the top of the class. When we When we create an object from this class later on, we're invoking this method.
constructor() {
}
}
In this case, let's create a class that works for all animal types to reduce to solve the inherent problems with the previous strategy:
```
class Pet {
constructor(animal, age, breed){
this.animal = animal;
this.age = age;
this.breed = breed;
}
}
```
To instatiate(create) a pet Object:
```
const ernie = new Pet('dog', 1, 'pug');
const vera = new Pet('dog', 8, 'border collie');
console.log(ernie); //this prints the object literal(created by object class substantiation) to the screen in the program
```
To add method to constructor we follow a similar strategy:
```
class Pet {
constructor(animal, age, breed, sound){
this.animal = animal;
this.age = age;
this.breed = breed;
this.sound = sound;
}
speak() {
console.log(this.sound);
}
}
Now we need to adjust the objects to include this new feature
const ernie = new Pet('dog', 1, 'pug', 'yip yip');
const vera = new Pet('dog', 8, 'border collie', 'woof woof');
// use dot notation instead of console.log(ernie); //this prints the object literal(created by object class substantiation) to the screen in the program
ernie.speak();
vera.speak();
```
Getter and Seter methods allow us to create or retrieve or update an object respectively. The idea is to increase flexbility. We can use logic, while using simple syntax.
```
class Pet {
constructor(animal, age, breed, sound){
this.animal = animal;
this.age = age;
this.breed = breed;
this.sound = sound;
}
get activity() {
const today = Date();
const hour = today.getHours()
if (hour > 8 && hour <= 20) {
return 'playing';
} else {
return 'sleeping';
}
}
speak() {
console.log(this.sound);
}
}
```
This getter method will let us to create, and dynamically retrieve the value of a property called activity. A value from the activity property is computed and returned when we access it but never actually attached to the object.
```
console.log(ernie.activity);
```