Enough JavaScript to get you Started : #13 OOP in JS Practical Guide 👩‍💻👨‍💻
Tags: javascript, webdev, 100daysofcode, beginners
Published: 2021-01-19 09:07:13


![tutorial-cover.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610080617418/PTPhskNA4.png)
### Classes and Objects

👉 To summarize previous article , classes are nothing but a template or blue print which decides how object will look and behave with different props/methods.

👉 We're Using OOP concepts because it provides us Encapsulation and Abstraction. 

### Enough ! Time to open VS code

![GettyImages-119721301-0718585.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1610078108814/-Gt4QAFi5.jpeg)

👉 Start a new project , and go to `app.js`

👉 Let's make a Speedometer class 

👉 Speedometer have properties like speed and type

👉 Speedometer will be having methods like increase and decrease speed

👉 in `app.js`
```
class Speedometer {
  speed = 0;
  type = "km/h";
  constructor(speed, type) {
    this.speed = speed;
    this.type = type;
  }
  increaseSpeed() {
    this.speed += 10;
  }
  decreaseSpeed() {
    this.speed -= 10;
  }
  getInfo() {
    console.log(this.speed);
    console.log(this.type);
  }
}
```
👉 If we decode our class there are two methods for increasing and decreasing speed of speedometer , and one method for showing information to user.

👉 Constructor is special function called automatically while creating object. we've used it to initialize initial speed and type of object.

👉 As of now class don't consume any resources but when we make objects they will surely occupy resources.

👉 Notice that by convention class names are always written in Pascal case

👉 Notice we haven't typed `var` or `let` and even `function` to specify in class. we don't need to specify that in class

👉 Currently(and even by default) we haven't specified and member access specifiers so our methods and props are accessible inside as well as outside the class.

### Making Object 🌚
👉 Making Object of respective class simply means creating variable of that class. 

👉 we'll use `new` keyword to allot resources to new object which we're creating.🏠

👉 The parentheses takes arguments specified in constructor parameters to initialize starter object 😁

👉 in `app.js`
```
var speedoMeter = new Speedmeter(0,"km/h");
```
👉 now `speedoMeter` is object of class Speedometer with initial value of `speed:0` and `type : "km/h"`

👉`speedoMeter` can now access props and methods like increase and decrease speed

👉 Go ahead and try calling different methods
```
object1.getInfo();
object1.increaseSpeed();
object1.increaseSpeed();
object1.getInfo();
object1.decreaseSpeed();
object1.getInfo();
```
👉 this will output in console 
```
0
km/h
20
km/h
10
km/h
```


### What is `this`?
👉 this keyword in JavaScript refers to current running object <br>

👉 it's like we're addressing speedoMeter object with `this`, so `this` refers to the instance which is in execution now.

👉 in speedoMeter object we can say like `this` object have intial `speed of 0 and type of "km/h"`

👉 Notice if in class we want to refer the current running object (which is not there at the moment of creation of class) we'll use `this` to access props of current running object.

👉 so if we write like `this.speed` it will refer to speedoMeter object which we have created afterwards.

### Using member access specifiers
👉 '#' is used to make any property or method of the class private.<br>

👉 Private methods or props are only accessed inside class<br>

👉 Accessing private members outside class will result in error<br>

```
class Speedometer {
  #speed = 0;
  #type = "km/h";
  
  increaseSpeed() {
    this.#speed += 10;
  }
  #decreaseSpeed() {
    this.#speed -= 10;
  }
  getInfo() {
    console.log(this.#speed);
    console.log(this.#type);
  }
}
``` 
👉 Notice that now if we create object of Speedometer the object can now only access increaseSpeed() and getInfo() because other members are private

```
console.log(object1.speed) ❌
console.log(object1.type) ❌
object1.getInfo(); ✅
object1.increaseSpeed(); ✅
object1.increaseSpeed(); ✅
object1.getInfo(); ✅
object1.decreaseSpeed(); ❌
object1.getInfo(); ✅
```

<hr>

### Inheritance

👉 Inheritance refers to deriving methods and props of parent class or super class to it's child class or sub class.

👉 Inheritance increases code reusability in our code

👉 now , think in terms of animals all animals have `name` and `color`, so what we can do is rather specifying this properties each and every time in new animal we can make a parent class with all these properties and a greet method which serves purpose of greeting.

👉 Syntax : `class SubClass extends ParentClass`  that's it 😎 now we can use parent class's props and methods in child class 🎉

👉 Example
```
class Animal {
  color;
  name;

  greet() {
    console.log("hey i'm " + this.name);
    console.log("my color is " + this.color);
  }
}

class Dog extends Animal {
  constructor(name, color) {
    super();
    this.name = name;
    this.color = color;
  }
}

var dog = new Dog("tommy", "brown");
dog.greet();
```

👉 Output:
```
hey i'm tommy
my color is brown
```

👉 Notice if we call constructor of sub class it's compulsory to call parent class's constructor regardless of constructor is having params or not.

👉 Using a reserved keyword known as super we can call parent class's constructor like => **super();** or **super(name,color)** [if constructor is having params]

👉 Something looks strange? we are using `color`,`name` and `greet()` inside as well as outside Dog class even though these props and methods wasn't declared in Dog class.

👉 That's how inheritance works, it simple words it will copy all the public and protected methods and props in child class which result in code reusability😀

<p>Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :) <br>
<br>
Keep Coding ❤
</p>

#### Hey , Let' Connect👋
 [Twitter](https://twitter.com/codarsh) / [Github](https://github.com/WhoAdarshPandya/)