Beginners guide to JavaScript Classes

I have recently joined this platform and this is my first post here hoping that you'll like it. So a bit about me - I'm Emma. Front-end Developer and Blogger. I focus on teaching more so I will be posting articles related to JavaScript, CSS for beginners.

---

😳 Classes In JavaScript?

Classes were introduced in JavaScript ECMA2015(2016).
Unlike the classes in Object-Oriented Model. But instead of classes are just a special type of functions. But instead of using the "function" keyword, we use the "class".

It was introduced in JavaScript to make the syntax look like other object-oriented languages (Java, Python, C++).

😃 Defining a Class

class Rectangle {
 constructor(height, width) {
   this.height = height; 
   this.width = width; 
 }
}

To declare a class, you use the class keyword with the name of the class ("Rectangle" here).

*Constructor *: This is a special method for initializing an instance of that class. So what that means is that whenever we create a new instance of the class, it will invoke the constructor.

📘 Methods in a Class

class Rectangle {
  constructor(height, width) {
    this.height = height; 
    this.width = width; 
  }
  //prototype method
  area () {
    return console.log(`The area is ${this.height*this.width}`); 
  }
  //static method
  static display(rect) {
    return console.log(`Height: ${rect.height} Width: ${rect.width}`); 
  }
}

rectangle1 = new Rectangle(5,4); //instantiate the class
rectangle1.area(); 
//the area is 20
Rectangle.display(rectangle1); 
//Height: 5 Width: 4

• Prototype Method: area() is a prototype method.
• Static Method: display() is a static method.

🤨 Prototype Method

A prototype method is a method that is only accessible when you create an instance of the class.

As you can see in the example above, you call the prototype method by referring to the object's method name followed by parentheses (any parameter would go inside the parentheses).

🤔 Static Method

A static method is something you can call without instantiating the class. The static method is defined in the class itself, and not on the object. That means you cannot call the static method on the object (rectangle1), but on the class (Rectangle) as shown in line 19.

⭐ Inheritance

class car {
  constructor(brand) {
    this.carname = brand; 
  }
  present() { 
    return `I have a ` + this.carname; 
  }
}

class Model extends Car {
  constructor(brand, mode) {
    super(brand); 
    this.model = mod; 
  }
  show() {
    return console.log(`${this.present()} , it is a ${this.model}`); 
  }
}

mycar = new Model("Ford", "Raptor"); 
mycar.show(); 
//I have a ford , it is a Raptor

To create a class inheritance, use the extends keyword.

---

A class created with class inheritance inherits all the methods from another class. In the above example, the Model class inherits all the methods from Car class.

The super() method refers to the parent class.

By calling the super() method in the constructor methods, we call the parent's constructor method and gets access to the parent's properties and methods.

Inheritance is useful for code reusability, we can reuse properties and methods of an existing class when you create a new class.

---

Get the amazing daily.dev extension. You'll get amazing news and ideas.

---

Thanks For Reading. If you have anything on your mind comment below. You can follow me too. 🙂📚