JavaScript Classes: A Beginner's Guide

Classes are a fundamental concept in object-oriented programming, allowing developers to encapsulate data and behaviour into reusable and organized structures. In JavaScript, classes were introduced in ES6, providing a more concise syntax for defining objects and inheritance relationships.

In this article, we'll cover the basics of JavaScript classes, including how to define and instantiate them, and how to use inheritance to create sub-classes.

Defining a Class

To define a class in JavaScript, we use the class keyword followed by the class name. Here's an example:

javascriptCopy codeclass 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've defined a class called Person with a constructor method that takes name and age parameters and sets them as properties of the object. We've also defined a sayHello method that logs a message to the console.

Instantiating a Class

To create an instance of a class, we use the new keyword followed by the class name and any necessary arguments for the constructor. Here's an example:

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

In this example, we've created an instance of the Person class called person1 with the name "John" and age 30. We've then called the sayHello method on the person1 object, which logs a message to the console.

Inheritance

One of the key benefits of using classes in JavaScript is the ability to create sub-classes that inherit properties and methods from a parent class. To create a sub-class, we use the extends keyword followed by the name of the parent class. Here's an example:

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

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

  study() {
    console.log(`${this.name} is studying.`);
  }
}

In this example, we've defined a sub-class called Student that extends the Person class. The Student class has its own constructor method that takes name, age, and grade parameters and sets them as properties of the object. It also overrides the sayHello method to include the grade, and adds a new study method.

We can then create instances of the Student class just like we did with the Person class:

scssCopy codeconst student1 = new Student('Jane', 16, 11);
student1.sayHello(); // logs "Hello, my name is Jane, I am 16 years old, and I am in grade 11."
student1.study(); // logs "Jane is studying."

Conclusion

JavaScript classes are a powerful tool for organizing and encapsulating code. By defining classes and creating instances, we can create reusable objects with their own properties and methods. And by using inheritance, we can create sub-classes that share common behaviour with a parent class while adding their own unique features.

I hope this article has given you a good introduction to JavaScript classes and how to use them in your code.

Happy coding!