JavaScript Classes: A Comprehensive Guide

If you are a developer working with JavaScript, or you just started to learn JavaScript, then you are likely already familiar with the concept of classes. JavaScript classes are a way to create reusable objects with shared properties and methods. They were introduced in ECMAScript 6 (ES6), also known as ECMAScript 2015, and have become an integral part of the language since then. This article will take an in-depth look at JavaScript classes and explore their various features and use cases.

What are JavaScript Classes?

JavaScript classes are a template for creating objects. They are essentially a syntactical sugar over the existing prototype-based inheritance system in JavaScript. Classes allow developers to define a blueprint for objects with shared properties and methods, making it easier to create and manage complex data structures.

A class is declared using the class keyword followed by the class name. Inside the class body, we define the properties and methods of the class. Here is a simple example:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person("John Doe", 30);
person1.sayHello(); // Output: "Hello, my name is John Doe and I am 30 years old."


In this example, we define a Person class with a constructor that takes two parameters: name and age. Inside the constructor, we initialize the name and age properties of the class. We also define a sayHello method that logs a greeting message to the console, using the name and age properties of the class.

We then create a new instance of the Person class using the new keyword, passing in the values for name and age. Finally, we call the sayHello method on the newly created instance, which logs the greeting message to the console.

Class Inheritance

One of the main benefits of using classes in JavaScript is the ability to create class hierarchies through inheritance. Inheritance allows us to define a new class that is a modified version of an existing class, inheriting its properties and methods while also adding new ones. This can help reduce code duplication and make it easier to manage complex data structures.

To create a subclass in JavaScript, we use the extends keyword followed by the name of the class we want to inherit from. Here is an example:

class Employee extends Person {
  constructor(name, age, salary) {
    super(name, age);
    this.salary = salary;
  }

  introduce() {
    console.log(`Hi, my name is ${this.name}, and I make ${this.salary} dollars per year.`);
  }
}

const employee1 = new Employee("Jane Smith", 25, 50000);
employee1.sayHello(); // Output: "Hello, my name is Jane Smith and I am 25 years old."
employee1.introduce(); // Output: "Hi, my name is Jane Smith, and I make 50000 dollars per year."

In this example, we define an Employee class that extends the Person class. We use the super keyword inside the constructor to call the constructor of the parent class and initialize the name and age properties of the class. We also define a new salary property and a introduce method that logs a message to the console using the name and salary properties of the class.

We then create a new instance of the Employee class and call both the sayHello and introduce methods on it, which logs the corresponding messages to the console.

Class Methods and Properties

In addition to instance methods and properties, JavaScript classes can also define static methods and properties. Static methods and properties belong to the class itself, rather than to any instance of the class. They can be accessed directly on the class, without the need for an instance.

To define a static method or property in a class, we use the static keyword. Here is an example

class MathUtils {
  static add(a, b) {
    return a + b;
  }

  static PI = 3.14159;
}

console.log(MathUtils.add(2, 3)); // Output: 5
console.log(MathUtils.PI); // Output: 3.14159

In this example, we define a MathUtils class with a static add method that takes two parameters and returns their sum. We also define a static PI property that holds the value of the mathematical constant pi.

We then call the add method and access the PI property directly on the class, without the need for an instance.

Getters and Setters

JavaScript classes also support the use of getters and setters, which allow us to define custom behavior for getting and setting object properties. Getters and setters can be used to enforce constraints on object properties, perform calculations, or trigger actions when a property is accessed or modified.

To define a getter or setter in a class, we use the get and set keywords followed by the property name. Here is an example:

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

  get area() {
    return this._width * this._height;
  }

  set width(value) {
    if (value < 0) {
      throw new Error("Width cannot be negative");
    }
    this._width = value;
  }

  set height(value) {
    if (value < 0) {
      throw new Error("Height cannot be negative");
    }
    this._height = value;
  }
}

const rectangle1 = new Rectangle(5, 10);
console.log(rectangle1.area); // Output: 50

rectangle1.width = 7;
console.log(rectangle1.area); // Output: 70

rectangle1.height = -5; // Throws an error: "Height cannot be negative"

In this example, we define a Rectangle class with a constructor that takes width and height parameters. We initialize the _width and _height properties of the class with these parameters.

We then define a get accessor for the area property, which calculates and returns the area of the rectangle based on its width and height. We also define set accessors for the width and height properties, which enforce a constraint that these properties cannot be set to negative values.

We create a new instance of the Rectangle class and log its area to the console. We then modify the width of the rectangle and log its new area to the console. Finally, we try to set the height to a negative value, which throws an error because of the constraint we defined in the set accessor.

Conclusion

JavaScript classes are a powerful and flexible tool for creating reusable objects with shared properties and methods. They allow developers to define a blueprint for objects and create class hierarchies through inheritance. Classes also support the use of static methods and properties, getters and setters, and other advanced features.

In this article, we have explored the basics

of JavaScript classes, including their syntax, inheritance, static methods and properties, and getters and setters. We have also provided examples of how to use these features in real-world scenarios.

If you are new to JavaScript or have not yet worked with classes, we encourage you to dive deeper into this topic and explore its many possibilities. JavaScript classes can greatly simplify your code and make it easier to manage and maintain. By using classes effectively, you can build more efficient and scalable applications that meet the needs of your users.

Remember, practice makes perfect. Try experimenting with JavaScript classes on your own and see how you can use them to solve real-world problems. With enough dedication and hard work, you too can become a master of JavaScript classes and take your coding skills to the next level.

📕 Related articles about Javascript

• The Power of JavaScript Switch Statements: A Comprehensive Guide
• JavaScript Date Get Methods: A Comprehensive Guide
• JavaScript Loop While
• JavaScript Loop For Of: An In-depth Guide
• Understanding JavaScript Objects
• JavaScript Function Parameters: Everything You Need to Know