18 - JavaScript - Classes

JavaScript classes are a way to define reusable blueprints for creating objects. They allow you to define a set of properties and methods that are shared by all instances of the class. Classes in JavaScript are defined using the class keyword followed by the name of the class. The body of the class contains a constructor method, which is called when an instance of the class is created. The constructor method is used to initialize any properties of the class.

In addition to the constructor method, you can define other methods and properties within the class. These methods and properties can be called on instances of the class. You can also create subclasses that inherit properties and methods from a parent class using the extends keyword.

The syntax for defining a class in JavaScript is similar to that of other programming languages.

Syntax:

class ClassName {
  constructor() {
    // Code to initialize class properties
  }

  method1() {
    // Code for method 1
  }

  method2() {
    // Code for method 2
  }

  // ... More methods
}

Let's take a look at each part of this syntax and see what it means:

• class ClassName: This is the keyword and name of the class you are defining.

• constructor(): This is a special method that is called when an instance of the class is created. It is used to initialize any properties of the class.

• method1(), method2(), etc.: These are methods of the class. They are functions that are defined within the class definition and can be called on instances of the class.

Now, let's look at an example of how to define and use a class in JavaScript:

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

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

const john = new Person('John', 30);
john.greet(); // Output: Hello, my name is John and I am 30 years old.

In this example, we define a class called Person with a constructor that takes two arguments, name and age. Inside the constructor, we set the name and age properties of the instance to the values passed in.

We also define a greet method on the class that logs a message to the console using the name and age properties.

We then create a new instance of the Person class called john and pass in the values 'John' and 30 as arguments to the constructor. We call the greet method on the john instance, which logs the message to the console.

Output: Hello, my name is John and I am 30 years old.

Classes in JavaScript can also inherit properties and methods from other classes using the extends keyword. This allows you to create subclasses that share some of the same functionality as their parent class but can also have their own unique properties and methods.

Here's an example:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rufus');
dog.speak(); // Output: Rufus barks.

In this example, we define a Animal class with a name property and a speak method that logs a message to the console.

We then define a Dog class that extends the Animal class using the extends keyword. The Dog class has its own speak method that logs a different message to the console.

We create a new instance of the Dog class called dog and pass in the value 'Rufus' as an argument to the constructor. We call the speak method on the dog instance, which logs the message to the console.

Output: Rufus barks.

Summarizing Up

JavaScript classes provide a way to write more organized and modular code by encapsulating related functionality into a single entity. They also make it easier to create multiple instances of an object with the same properties and methods. Classes are a fundamental concept in object-oriented programming and are used extensively in modern web development.