Introduction

JavaScript classes are a powerful feature introduced in ES6, providing a structured approach to object-oriented programming. They offer a blueprint for creating objects with reusable properties and methods, making code more organized and maintainable.

JS Classes

1. Defining Classes

   Classes are defined using the class keyword followed by the class name and curly braces. Inside the curly braces, you define properties and methods.

   class Vehicle {  // Class definition  // ... properties and methods  }

2. Class Properties

   Properties are variables that represent the attributes of an object. They are defined within the class body.

   class Vehicle {  model: string;  color: string;  year: number;  // ... methods  }

3. Class Methods

   Methods are functions defined within a class that perform actions on the object's properties.

   class Vehicle {  // ... properties  startEngine() {  console.log('Engine started!');  }  }

4. Constructor

   The constructor method is a special method that is called when a new object is created from the class. It initializes the object's properties.

   class Vehicle {  model: string;  color: string;  year: number;  constructor(model: string, color: string, year: number) {  this.model = model;  this.color = color;  this.year = year;  }  // ... methods  }

Inheritance

1. Extending Classes

   Inheritance allows you to create new classes (child classes) that inherit properties and methods from existing classes (parent classes). This promotes code reuse.

   class Car extends Vehicle {  // ... additional properties and methods  }

2. Overriding Methods

   Child classes can override methods from the parent class to provide their own implementation. This allows for specialized behavior in child classes.

   class Car extends Vehicle {  startEngine() {  console.log('Car engine started!');  }  }

3. Using super Keyword

   The super keyword is used to access the parent class's constructor and methods within the child class.

   class Car extends Vehicle {  constructor(model: string, color: string, year: number, doors: number) {  super(model, color, year);  this.doors = doors;  }  // ... methods  }

4. this and super Use

   The this keyword refers to the current instance of the class. The super keyword refers to the parent class.

   Do You Know?

   Using super() in the child class constructor is crucial for initializing the inherited properties from the parent class.

5. Accessing Private Properties of Parent Class

   You can access private properties of the parent class by declaring them using the # symbol. Then you can use the super keyword to access them.

   class Vehicle {  #brand: string;  constructor(brand: string) {  this.#brand = brand;  }  }  class Car extends Vehicle {  constructor(brand: string, model: string) {  super(brand);  this.model = model;  }  getBrand() {  return super.#brand;  }  }

   Avoid This

   Avoid directly accessing private properties of the parent class from outside the child class. This can lead to unexpected behavior and break encapsulation.

Summary

• JavaScript classes provide a structured way to define objects with reusable properties and methods.
• Inheritance allows child classes to inherit properties and methods from parent classes.
• The super keyword is used to access parent class's methods and constructors.
• Private properties are denoted by the # symbol and can only be accessed from within the class.