63 - Classes and inheritance (Javascript)

Modern JavaScript: ES6+ Features – Classes and Inheritance

ES6 (ECMAScript 2015) introduced significant improvements to JavaScript, including the class syntax for working with object-oriented programming. In this article, we will explore the use of classes and inheritance in modern JavaScript, along with practical examples.

Understanding Classes in JavaScript

Classes in JavaScript provide a blueprint for creating objects, following the principles of object-oriented programming. They define the structure and behavior of objects, making it easier to create and manage instances of similar objects.

Declaring Classes

The ES6 class syntax is a cleaner and more structured way to declare classes in JavaScript. You can use the `class` keyword, followed by the class name, to define a class.


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

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

Creating Instances

Once a class is defined, you can create instances of that class using the `new` keyword.


const cat = new Animal('Cat');
const dog = new Animal('Dog');

cat.speak(); // Output: "Cat makes a sound."
dog.speak(); // Output: "Dog makes a sound."

Class Constructor

The class constructor is a special method called when a new instance of the class is created. It allows you to initialize the object’s properties.


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

const john = new Person('John', 30);
console.log(john.name); // Output: "John"

Class Methods

Class methods are functions defined within the class that can be called on instances of that class. They are a fundamental part of encapsulating behavior within the class.


class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  area() {
    return Math.PI * Math.pow(this.radius, 2);
  }
}

const myCircle = new Circle(5);
console.log(myCircle.area()); // Output: 78.54

Class Inheritance

Inheritance is a key concept in object-oriented programming. In JavaScript, you can create new classes that inherit properties and methods from existing classes, allowing for code reuse and extending functionality.

Creating Subclasses

To create a subclass, you can use the `extends` keyword, followed by the name of the class you want to inherit from. This new class inherits all the properties and methods of the parent class.


class Shape {
  constructor(color) {
    this.color = color;
  }

  getArea() {
    return 0;
  }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color);
    this.radius = radius;
  }

  getArea() {
    return Math.PI * Math.pow(this.radius, 2);
  }
}

const myCircle = new Circle('red', 5);
console.log(myCircle.getArea()); // Output: 78.54

Overriding Methods

Subclasses can override methods inherited from the parent class. In the example above, the `getArea` method in the `Circle` class overrides the one in the `Shape` class to provide a specific implementation for circles.

Super Keyword

The `super` keyword is used to call the constructor and methods of the parent class. It is especially useful when initializing properties in the subclass constructor, as shown in the `Circle` class example.

Conclusion

Classes and inheritance in ES6+ JavaScript provide a powerful and structured way to create and manage objects in your applications. By understanding how to declare classes, create instances, define methods, and utilize inheritance, you can build more organized and reusable code. These features are essential for modern JavaScript development and contribute to the overall readability and maintainability of your code.

63 – Classes and inheritance (Javascript)