Understanding JavaScript Classes: A Beginner’s Guide

JavaScript is a versatile and powerful programming language that has evolved significantly over the years. One of the most important additions to JavaScript is the introduction of classes in ES6 (ECMAScript 2015). Classes provide a cleaner and more structured way to create objects and handle inheritance. In this article, we’ll explore JavaScript classes, including constructors, instance methods, inheritance, the super keyword, static properties, and static methods. By the end of this article, you’ll have a solid understanding of how to use classes in JavaScript.

What is a Class in JavaScript?

A class in JavaScript is a blueprint for creating objects that encapsulate data and functionality related to that data. It can be thought of as a template for defining and creating objects with pre-defined properties and methods.

Here’s a simple example of a class:

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  displayInfo() {
    console.log(`This car is a ${this.make} ${this.model}.`);
  }
}

In this example, Car is a class with a constructor and an instance method called displayInfo.

The Constructor Method

The constructor is a special method in a class that is automatically called when a new object is created from the class. It’s used to initialize the object’s properties.

To create an instance of a class, use the new keyword:

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
}

// When you create a new instance of the Car class, the constructor is called:

const myCar = new Car('Toyota', 'Corolla');
console.log(myCar.make); // Output: Toyota
console.log(myCar.model); // Output: Corolla

myCar creates an instance of Car with the make "Toyota" and mode “Corolla”.

Instance Methods

Instance methods are functions that are defined inside a class and can be called on instances of that class. These methods have access to the object’s properties using the this keyword.

You can add methods to a class that performs actions related to the object:

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  displayInfo() {
    console.log(`This car is a ${this.make} ${this.model}.`);
  }
}

const myCar = new Car('Toyota', 'Corolla');
myCar.displayInfo(); // Output: This car is a Toyota Corolla.

Here, displayInfo is an instance method that provides information about the car.

Inheritance and the super Keyword

Inheritance:
Inheritance is a principle of OOP that allows a class to inherit properties and methods from another class. This helps in reusing the code. The extends keyword is used to define a class as a child of another class.

Let’s create a new class called ElectricCar that inherits from the Car class:

class ElectricCar extends Car {
  constructor(make, model, batteryCapacity) {
    super(make, model); // Call the parent class constructor
    this.batteryCapacity = batteryCapacity;
  }

  displayBatteryInfo() {
    console.log(`This car has a battery capacity of ${this.batteryCapacity} kWh.`);
  }
}

const myElectricCar = new ElectricCar('Tesla', 'Model S', 100);
myElectricCar.displayInfo(); // Output: This car is a Tesla Model S.
myElectricCar.displayBatteryInfo(); // Output: This car has a battery capacity of 100 kWh.

In this example, ElectricCar inherits from Car using the extends keyword. The super keyword is used to call the constructor of the parent class (Car). This ensures that the make and model properties are initialized.

Super Keyword:
The super keyword is used to call the constructor of a parent class from within a child class's constructor or to access methods on a parent class.

Using super in Methods
You can use super to call methods on a parent class, often to extend or customize their behavior in the child class.

Static Properties and Methods

Static properties and methods are defined on the class itself, not on instances of the class. They are often used for functionality that belongs to the class, but not necessarily to any one object.

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  static numberOfWheels = 4;

  static displayNumberOfWheels() {
    console.log(`All cars have ${Car.numberOfWheels} wheels.`);
  }
}

console.log(Car.numberOfWheels); // Output: 4
Car.displayNumberOfWheels(); // Output: All cars have 4 wheels.

In this example, numberOfWheels is a static property, and displayNumberOfWheels is a static method. They are accessed directly on the class, not on an instance of the class.

Putting It All Together

Let’s create a more comprehensive example that incorporates everything we’ve learned:

class Vehicle {
  constructor(type) {
    this.type = type;
  }

  displayType() {
    console.log(`This vehicle is a ${this.type}.`);
  }

  static numberOfWheels = 4;
}

class Car extends Vehicle {
  constructor(make, model) {
    super('car'); // Call the parent class constructor
    this.make = make;
    this.model = model;
  }

  displayInfo() {
    console.log(`This car is a ${this.make} ${this.model}.`);
  }
}

class ElectricCar extends Car {
  constructor(make, model, batteryCapacity) {
    super(make, model); // Call the parent class constructor
    this.batteryCapacity = batteryCapacity;
  }

  displayBatteryInfo() {
    console.log(`This car has a battery capacity of ${this.batteryCapacity} kWh.`);
  }
}

const myElectricCar = new ElectricCar('Tesla', 'Model S', 100);
myElectricCar.displayType(); // Output: This vehicle is a car.
myElectricCar.displayInfo(); // Output: This car is a Tesla Model S.
myElectricCar.displayBatteryInfo(); // Output: This car has a battery capacity of 100 kWh.
console.log(Vehicle.numberOfWheels); // Output: 4

In this example, we have a Vehicle class that serves as the base class. The Car class inherits from Vehicle, and the ElectricCar class inherits from Car. We also use static properties and methods to define properties and behaviors that are shared across all instances of the class.

Conclusion

JavaScript classes provide a powerful and organized way to create objects and handle inheritance. By understanding constructors, instance methods, inheritance, the super keyword, static properties, and static methods, you can write cleaner and more maintainable code. Whether you’re building simple objects or complex hierarchies, classes are an essential tool in your JavaScript toolkit.

Happy coding! 🚀