Classes in JavaScript

Classes are an essential feature of JavaScript, allowing developers to create reusable templates for objects. With the introduction of classes in ECMAScript 6 (ES6), JavaScript brought a more structured approach to object-oriented programming (OOP). In this guide, we’ll explore how to create a class in JavaScript, discuss key features like inheritance and method overriding, and dive into advanced concepts such as static methods and getters/setters.

In this section, we’ll cover the following topics:

What is a Class in JavaScript?

A class in JavaScript serves as a blueprint for creating objects. It encapsulates data and behavior that can be shared among instances of that class. Classes make it easier to model real-world objects and concepts, such as a car, a student, or a bank account, in code. By defining a class, you can create multiple objects with the same properties and methods, which simplifies your code and makes it more maintainable.

Why Was a Class Introduced?

Prior to the introduction of classes in ES6, JavaScript used function constructors and prototypes for object creation and inheritance. However, this approach was often cumbersome and less intuitive, especially for developers familiar with traditional object-oriented programming (OOP) languages like Java or C#. The class syntax in JavaScript brings a more familiar, clean, and structured way to define objects and their behavior, improving readability and maintainability.

Syntax and Structure of a JavaScript Class

The basic syntax of a class in JavaScript is straightforward:

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

  displayInfo() {
    console.log(`${this.year} ${this.make} ${this.model}`);
  }
}

In this example, the Car class has a constructor method that initializes properties (make, model, and year). The displayInfo() method is used to print information about the car. Instances of the class can be created using the new keyword:

const myCar = new Car("Toyota", "Corolla", 2020);
myCar.displayInfo(); // Outputs: 2020 Toyota Corolla

Creating Objects from a Class (Instantiation)

To create an object from a class, you use the new keyword followed by the class name. This process is called instantiation. When you instantiate a class, the constructor method is called, initializing the object with the given values.

const bike = new Car("Honda", "CBR", 2021);
bike.displayInfo(); // Outputs: 2021 Honda CBR

This process is crucial for creating distinct objects that share the same structure and methods.

Class Inheritance and Method Overriding

JavaScript supports inheritance, allowing one class to inherit properties and methods from another. This feature enables the creation of more specialized classes that build upon the functionality of existing ones, making your code more efficient and organized.

What is Inheritance in JavaScript?

Inheritance is a mechanism in object-oriented programming where a new class (child class) can inherit properties and methods from an existing class (parent class). This allows you to create more specialized versions of a class without rewriting the code.

For example, a Car class might serve as the parent class, and a ElectricCar class could be a child class that inherits from it but also has additional properties or methods specific to electric cars.

Class-based Inheritance in JavaScript

To implement inheritance in JavaScript, the extends keyword is used. Here’s how you can extend the Car class to create an ElectricCar class:

class ElectricCar extends Car {
  constructor(make, model, year, batteryLife) {
    super(make, model, year); // Calls the parent class's constructor
    this.batteryLife = batteryLife;
  }

  displayBatteryInfo() {
    console.log(`${this.batteryLife} hours of battery life`);
  }
}

In this example, the ElectricCar class extends the Car class, inheriting its properties and methods. The super() keyword calls the parent class’s constructor, ensuring that the ElectricCar class is initialized properly.

Method Overriding: How to Customize Parent Class Methods

In some cases, you may want to modify or extend a method from the parent class in a child class. This is called method overriding. Here’s an example where we override the displayInfo() method to include battery life information:

class ElectricCar extends Car {
  constructor(make, model, year, batteryLife) {
    super(make, model, year);
    this.batteryLife = batteryLife;
  }

  displayInfo() {
    super.displayInfo();
    console.log(`Battery life: ${this.batteryLife} hours`);
  }
}

Using super() for Method Overriding

The super() keyword is not only used to call the parent class constructor, but it can also be used to call parent class methods. This allows the child class to extend the functionality of the parent class method.

class ElectricCar extends Car {
  constructor(make, model, year, batteryLife) {
    super(make, model, year);
    this.batteryLife = batteryLife;
  }

  displayInfo() {
    super.displayInfo(); // Call the parent class's displayInfo
    console.log(`Battery life: ${this.batteryLife} hours`);
  }
}

Advanced Class Concepts

JavaScript classes offer several advanced features that allow developers to build more powerful and flexible object models. These include static methods, getters and setters, and mixins.

Static Methods and Properties

Static methods and properties are those that belong to the class itself rather than instances of the class. These methods can be called directly on the class, without creating an instance.

class Car {
  static getCategory() {
    return "Vehicle";
  }
}

console.log(Car.getCategory()); // Outputs: Vehicle

Getters and Setters in JavaScript Classes

Getters and setters allow you to define how to retrieve and modify property values of an object. They provide a way to control access to an object's properties, adding logic before getting or setting a value.

class Car {
  constructor(make, model, year) {
    this._make = make;
    this._model = model;
    this._year = year;
  }

  get make() {
    return this._make;
  }

  set make(value) {
    this._make = value;
  }
}

Mixins and Composition in JavaScript Classes

Mixins allow you to add functionality from multiple sources into a class. While JavaScript doesn’t directly support multiple inheritance, mixins provide a way to achieve similar results by copying methods from one object into another.

const Drivable = {
  drive() {
    console.log("Driving...");
  },
};

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

Object.assign(Car.prototype, Drivable);

const myCar = new Car("Toyota", "Camry");
myCar.drive(); // Outputs: Driving...

Creating a Class with AI Assistance

In this section, we'll explore how AI tools can help beginners create classes in JavaScript by generating complex yet accessible code. AI prompts can simplify the coding process by providing a starting point, reducing errors, and offering explanations.

Sample AI prompt:

Sample code output:

class Library {
  constructor(name) {
    this.name = name; // Name of the library
    this.books = []; // Array to hold the list of books
  }

  // Method to add a book to the library
  addBook(book) {
    this.books.push(book);
    console.log(`"${book}" has been added to ${this.name}.`);
  }

  // Method to remove a book by its title
  removeBook(title) {
    const index = this.books.indexOf(title);
    if (index > -1) {
      this.books.splice(index, 1);
      console.log(`"${title}" has been removed from ${this.name}.`);
    } else {
      console.log(`"${title}" was not found in ${this.name}.`);
    }
  }

  // Method to list all books in the library
  listBooks() {
    if (this.books.length > 0) {
      console.log(`Books in ${this.name}:`);
      this.books.forEach((book, index) => console.log(`${index + 1}. ${book}`));
    } else {
      console.log(`${this.name} has no books.`);
    }
  }

  // Static method to compare two libraries
  static compareLibraries(library1, library2) {
    const count1 = library1.books.length;
    const count2 = library2.books.length;

    if (count1 > count2) {
      console.log(
        `${library1.name} has more books (${count1}) than ${library2.name} (${count2}).`
      );
    } else if (count1 < count2) {
      console.log(
        `${library2.name} has more books (${count2}) than ${library1.name} (${count1}).`
      );
    } else {
      console.log(
        `${library1.name} and ${library2.name} have the same number of books (${count1}).`
      );
    }
  }
}

// Example usage
const cityLibrary = new Library("City Library");
cityLibrary.addBook("The Great Gatsby");
cityLibrary.addBook("1984");
cityLibrary.listBooks();

const townLibrary = new Library("Town Library");
townLibrary.addBook("To Kill a Mockingbird");
townLibrary.listBooks();

Library.compareLibraries(cityLibrary, townLibrary);
cityLibrary.removeBook("1984");
cityLibrary.listBooks();
Library.compareLibraries(cityLibrary, townLibrary);

Instructions to see the results:
To view the results, choose one of the following options:

• Copy the code above into a JavaScript file and run it using the Quokka.js extension in VS Code.
• Copy the code above and paste it into the console of your browser’s developer tools.

Replace "The Great Gatsby" and "1984" with different book titles to test how the logic works with varied inputs.

The AI-generated code may not perfectly fit what you want; however, you can use the structure or parts of the code to modify and complete your own implementation.

Best Practices for Working with Classes

When working with classes in JavaScript, adhering to best practices can help make your code more readable, maintainable, and efficient. Here are some key recommendations:

• Keep Methods Focused: Each method should have a single, well-defined purpose. This improves code clarity and makes it easier to test and maintain.
• Use Descriptive Names: Choose meaningful names for your classes and methods that clearly indicate their functionality.
• Favor Composition Over Inheritance: While inheritance can be useful, it can sometimes lead to complex and rigid class hierarchies. Consider using composition (combining objects or using mixins) to achieve code reuse and flexibility.
• Avoid Excessive Class Coupling: Minimize dependencies between classes to make your code more modular and easier to change.
• Document Your Code: Use comments to explain the purpose and functionality of your classes and methods, especially for complex logic.

In conclusion, JavaScript classes are a powerful tool for organizing and managing object-oriented code. By understanding and applying these best practices, you can create more efficient, maintainable, and scalable applications.

Reference links:

Classes - JavaScript | MDN