Enough JavaScript to get you Started : #13 OOP in JS Practical Guide 👩‍💻👨‍💻

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

👉 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

👉 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.

👉 Private methods or props are only accessed inside class

👉 Accessing private members outside class will result in error

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(); ✅

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😀

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :)

Keep Coding ❤

Hey , Let' Connect👋

Twitter / Github