JavaScript classes, introduced in ECMAScript 2015 (ES6), provide a cleaner and more intuitive way to create objects and implement inheritance. They offer a syntax that's more familiar to developers coming from class-based languages, while still leveraging JavaScript's prototype-based nature under the hood.

Class Basics

A class in JavaScript is a blueprint for creating objects. It encapsulates data and the methods that operate on that data. Here's a simple class declaration:


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

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

In this example, Person is a class with a constructor and a method. The constructor is a special method for creating and initializing objects created with the class.

Creating Instances

To create an instance of a class, use the new keyword:


const john = new Person('John Doe', 30);
john.sayHello(); // Outputs: Hello, my name is John Doe

Class Methods

Methods in a class are functions that belong to the class. They can access and modify the object's data. Unlike function declarations, you don't need to use the function keyword when defining methods in a class.

Static Methods

Static methods are called on the class itself, not on instances of the class. They're useful for utility functions related to the class:


class MathOperations {
  static square(x) {
    return x * x;
  }
}

console.log(MathOperations.square(5)); // Outputs: 25

Inheritance

Classes support inheritance, allowing you to create a hierarchy of classes. Use the extends keyword to create a child class:


class Employee extends Person {
  constructor(name, age, jobTitle) {
    super(name, age);
    this.jobTitle = jobTitle;
  }

  introduce() {
    console.log(`Hi, I'm ${this.name}, a ${this.jobTitle}`);
  }
}

const alice = new Employee('Alice Smith', 28, 'Developer');
alice.sayHello(); // Inherited method
alice.introduce(); // New method

The super keyword is used to call the parent class's constructor.

Getters and Setters

Classes can include getter and setter methods, which allow you to define how a property is accessed or modified:


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

  get diameter() {
    return this._radius * 2;
  }

  set diameter(value) {
    this._radius = value / 2;
  }
}

const circle = new Circle(5);
console.log(circle.diameter); // 10
circle.diameter = 14;
console.log(circle._radius); // 7

Best Practices

Use PascalCase for class names (e.g., PersonClass).
Keep classes focused on a single responsibility.
Use private fields (prefixed with #) for better encapsulation when supported by your target environment.
Prefer composition over inheritance when designing complex systems.
Use static methods for utility functions that don't require instance-specific data.

Browser Support

Classes are supported in all modern browsers. However, for older browsers, you may need to use a transpiler like Babel to convert class syntax to equivalent ES5 code.

Related Concepts

To deepen your understanding of JavaScript classes, explore these related topics:

By mastering JavaScript classes, you'll be able to write more organized, maintainable, and object-oriented code. They provide a powerful tool for structuring your applications and implementing complex systems with clarity and efficiency.