How to Use JavaScript Classes

In 2015, the ECMAScript 6 (ES6) standard introduced classes to JavaScript. This addition aimed to provide a more familiar syntax for implementing inheritance, especially for developers coming from class-based languages like Java or Python. In this blog post, we will explore how to use JavaScript classes and learn about their key features.

A Class Definition

A JavaScript class is defined using the class keyword, followed by the class name. Inside the class body, we can define a constructor method and other methods as needed. Here’s an example of a simple class definition:

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

  hello() {
    return 'Hello, I am ' + this.name + '.';
  }
}

To create a new object from a class, use the new keyword followed by the class name and any constructor arguments if required. Here’s an example:

const flavio = new Person('Flavio');
flavio.hello(); // Output: "Hello, I am Flavio."

Class Inheritance

A class can also extend another class, inheriting its methods. In JavaScript, this is accomplished using the extends keyword. If a child class defines a method with the same name as a method in the parent class, the child class method takes precedence. Here’s an example:

class Programmer extends Person {
  hello() {
    return super.hello() + ' I am a programmer.';
  }
}

const flavio = new Programmer('Flavio');
flavio.hello(); // Output: "Hello, I am Flavio. I am a programmer."

Static Methods

In addition to instance methods, JavaScript classes also support static methods. Static methods are defined on the class itself, rather than on instances of the class. To define a static method, use the static keyword before the method name. Here’s an example:

class Person {
  static genericHello() {
    return 'Hello';
  }
}

Person.genericHello(); // Output: "Hello"

Getters and Setters

JavaScript classes also provide a way to define getters and setters for class properties. Getters and setters allow you to execute code when getting or setting a property’s value. To define a getter or setter, prefix the method name with get or set. Here’s an example:

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

  set name(value) {
    this._name = value;
  }

  get name() {
    return this._name;
  }
}

By defining only a getter or only a setter, you can control whether the property can be accessed or modified. Getters and setters are particularly useful when you want to perform additional logic upon changing a property’s value or create computed properties.

In summary, JavaScript classes provide a more familiar syntax for implementing inheritance and organizing code. They allow you to define constructors, methods, static methods, getters, and setters. Understanding classes is essential for developing object-oriented JavaScript applications.

Tags: JavaScript, classes, inheritance, static methods, getters, setters