Javascript Classes

JavaScript classes are a relatively new addition to the language, having been introduced in ECMAScript 2015 (ES6). They are a way to define objects and create instances of those objects, similar to classes in other object-oriented programming languages such as Java and C#.

In this article, we'll explore the basics of JavaScript classes, including how to define and use them, inheritance and more.

How To Define a JavaScript Class

To define a JavaScript class, we use the class keyword, followed by the name of the class and a set of curly braces that define the class's properties and methods. Here's an example of a simple class definition:

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.`);
  }
}

In this example, we define a class called Person. It has a constructor that takes two parameters, name and age, and assigns them to properties on the class instance (this.name and this.age). The class also has a sayHello method that logs a message to the console.

Create an Instance

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

const person = new Person('John', 30);
person.sayHello(); // logs "Hello, my name is John and I am 30 years old."

Inheritance In Javascript

One of the key features of object-oriented programming is inheritance and JavaScript classes support inheritance as well. To create a subclass (or "derived class") of an existing class, we use the extends keyword:

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

  sayHello() {
    super.sayHello();
    console.log(`I am in grade ${this.grade}.`);
  }
}

In this example, we define a Student class that extends the Person class. The Student class has its own constructor that takes three parameters (name, age and grade) and assigns them to properties on the class instance (this.name, this.age and this.grade).

The Student class also overrides the sayHello method to add a message about the student's grade, but calls the parent class's sayHello method using super.sayHello().

To create an instance of the Student class, we can use the same syntax as before:

const student = new Student('Jane', 16, '10th');
student.sayHello(); // logs "Hello, my name is Jane and I am 16 years old. I am in grade 10th."

Static Methods and Properties

In addition to instance methods and properties, JavaScript classes can also define static methods and properties. These are methods and properties that are attached to the class itself, rather than to individual instances of the class. To define a static method or property, we use the static keyword:

class MathUtils {
  static add(x, y) {
    return x + y;
  }

  static PI = 3.14;
}

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

To call a static method or access a static property, we use the class name , followed by a dot notation:

console.log(MathUtils.add(5, 7)); // logs 12
console.log(MathUtils.PI); // logs 3.14

Getters and Setters

JavaScript classes also support getters and setters, which allow us to define computed properties that are calculated based on other properties of the class instance. To define a getter or setter, we use the get or set keywords:

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

  get area() {
    return this.width * this.height;
  }

  set area(value) {
    this.width = Math.sqrt(value);
    this.height = Math.sqrt(value);
  }
}

In this example, we define a Rectangle class with a getter for the area property, which calculates the area of the rectangle based on its width and height. We also define a setter for the area property, which sets the width and height of the rectangle based on the new area value (assuming the rectangle is a square).

const rect = new Rectangle(10, 20);
console.log(rect.area); // logs 200

rect.area = 64;
console.log(rect.width); // logs 8
console.log(rect.height); // logs 8

Conclusion

JavaScript classes are a powerful tool for creating objects and organizing code in a more structured way. With classes, we can define properties and methods, create instances of those objects and use inheritance to create new classes based on existing ones.

Thank you for reading