2.7 understanding classes

Another essential feature of next-generation JavaScript is the class keyword. If you have programmed in other object-oriented languages this will feel familiar: a class is a blueprint for objects, with properties (variables attached to a class) and methods (functions attached to a class). React itself can define components using classes, so understanding how they work is important.

Defining and instantiating a class

A class is declared with the class keyword and a name. Properties are usually set inside a constructor method, which runs each time you create a new instance with the new keyword. Other methods are written without the function keyword, directly inside the class body. To call a method on the instance, use the dot notation.

class Person {
  constructor() {
    this.name = "Matthieu";
  }
  printMyName() {
    console.log(this.name);
  }
}

const myPerson = new Person();
myPerson.printMyName();   // "Matthieu"

Classes also support inheritance with extends. A derived class inherits the properties and methods of its parent and can add new ones. When the child has its own constructor, it must call super(...) before doing anything else, otherwise JavaScript throws an error. This is exactly the equivalent of prototypes you may have used in older JavaScript, written in a much more readable way.

class Human {
  constructor() {
    this.gender = "male";
  }
  printGender() {
    console.log(this.gender);
  }
}

class Person extends Human {
  constructor() {
    super();
    this.name = "Matthieu";
  }
}

const p = new Person();
p.printMyName();      // inherited via the parent chain
p.printGender();      // "male"

React class components rely on this exact mechanism: every class component extends React.Component and reuses its lifecycle methods. With classes, inheritance and the new keyword in your toolbox, you have everything you need to read and write React components in the class-based style.

Summary

This lesson introduces JavaScript classes as blueprints for creating objects, covering their properties, methods, and constructors. It explains how to instantiate classes using the `new` keyword and demonstrates class inheritance using the `extends` keyword with the mandatory `super()` call in derived constructors. The lesson concludes by noting that React uses classes as one of the primary approaches to create components.

Key points

• Classes are blueprints for JavaScript objects, created with the `class` keyword, offering a more convenient alternative to traditional constructor functions
• Classes contain properties (variables) and methods (functions); constructors are special methods that execute when a class is instantiated with the `new` keyword
• Class inheritance is supported via the `extends` keyword, allowing derived classes to inherit all properties and methods from a parent class
• When a derived class has a constructor, the `super()` call must be used to execute the parent class constructor and properly initialize inherited properties
• React uses classes as one of two main ways to create components, making understanding classes essential for React development

FAQ

What is a class in JavaScript and how does it work?

A class is a blueprint or template for creating JavaScript objects. It's declared with the `class` keyword and serves as a more modern, convenient alternative to constructor functions. Objects are created from a class using the `new` keyword, which triggers the class's constructor method.

Why is the `super()` method required in an inherited class?

The `super()` method calls the parent class's constructor to properly initialize inherited properties. Without it, the derived class cannot be instantiated correctly because the parent class initialization would be skipped, causing errors.

How do classes relate to React?

React uses classes as one of the two primary methods to create components. Understanding JavaScript classes is therefore essential for building React applications, though modern React also supports function components with hooks as an alternative approach.