A Comprehensive Guide to JavaScript Classes
Tags: webdev, javascript, frontend
Published: 2024-06-12 11:18:44

---
canonical_url: https://antondevtips.com/blog/a-comprehensive-guide-to-javascript-classes
---

_Read original blog post on my website_ [_https://antondevtips.com_](https://antondevtips.com/blog/a-comprehensive-guide-to-javascript-classes?utm_source=newsletter&utm_medium=email&utm_campaign=11_06_24)_._


Today you will learn about Object-Oriented Programing in JavaScript.
You will learn how to create JavaScript classes, use constructors, define fields and methods, use static members, and implement inheritance.

In JavaScript in ES6 classes were introduced as a new and better mechanism for creating objects.
Previously, JavaScript used prototype-based inheritance.

## How to Create a Class in JavaScript

To create a class in JavaScript, you need to use a `class` keyword:

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

**Class may contain the following parts:**
* constructors
* fields: public and private
* methods
* getters, setters
* static members


## Constructors in JavaScript Classes

The `constructor` is a special method called when a new instance of the class is created.
It's typically used to initialize clas properties.

```js
const person = new Person("Anton", 30);
console.log(person.name); // Output: Anton
console.log(person.age); // Output: 30
```

## Fields in JavaScript Classes

Fields in JavaScript classes can be **public** or **private**.
Public fields are accessible from outside of the class, while private fields are not.

Here is how to declare public fields.

```js
class Person {
  name;
  age;

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

Notice that fields don't have their types specified.

To declare a private field, put **#** sign before the field name:

```js
class Person {
  name;
  age;
  #phone;

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

const person = new Person("Anton", 30, "123456789");
console.log(person.name); // Output: Anton
console.log(person.age); // Output: 30

// Error accessing private class member
//console.log(person.#phone);
```

If you try to access a private field, you'll get an error.


## Methods in JavaScript Classes

Methods are functions defined within a class.
They provide behavior to class instances and can manipulate instance fields or perform operations related to the class.

Classes can have methods that return a value or receive arguments:

```js
class Rectangle {
  width;
  height;

  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getSquare() {
    return this.width * this.height;
  }
}

const rect = new Rectangle(5, 10);
console.log(rect.getSquare()); // Output: 50
```

```js
class Logger {
  print(text) {
    console.log(text);
  }
}

const logger = new Logger();
logger.print("Hello JavaScript");
```

## Static Members in JavaScript Classes

**Static** members belong to the class itself.
They are shared among all instances of the class and can be accessed using the class name.
Static fields are defined using the static keyword.

Classes can have static fields and methods.
**Static fields** are defined using the `static` keyword:

```js
class Car {
  static totalCars = 0;

  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
    Car.totalCars++;
  }
}

const car1 = new Car("Toyota", "Camry");
const car2 = new Car("Honda", "Accord");

console.log(Car.totalCars); // Output: 2
console.log(car1.totalCars); // Output: undefined
console.log(car2.totalCars); // Output: undefined
```

In this example, `totalCars` is a static field of the `Car` class.
It keeps track of the total number of `Car` instances created.
Each time a new Car is instantiated, the `totalCars` field is incremented.
The `totalCars` field can be accessed only by using the class name (`Car.totalCars`), not through the instances (car1 or car2).

**Static methods** are functions that belong to the class itself.
They can perform operations that are related to the class but do not require an instance to be created.
Static methods are also defined using the `static` keyword:

```js
class Calculator {
  static add(a, b) {
    return a + b;
  }
}

const result = Calculator.add(5, 10);
console.log(result); // Output: 15
```

In this example, `add` is a static methods of the `Calculator` class.
This method can be called directly on the class without creating an instance of `Calculator`.
Static methods are typically used for utility functions that are a part of the class instance.


### Combining Static Fields and Static Methods

Static fields and static methods can be combined in classes.
Static methods are related to the class, that's why they can access only static fields:

```js
class Circle {
  static PI = 3.14159;

  static calculateArea(radius) {
    return Circle.PI * radius * radius;
  }
}

const radius = 5;
const area = Circle.calculateArea(radius);

// Output: Area of circle with radius 5 = 78.53975
console.log(`Area of circle with radius ${radius} = ${area}`);
```


## Inheritance

Inheritance allows one class (child class) to inherit properties and methods from another class (parent class).
This helps in reusing code and creating a more organized class hierarchy.

Parent class is also called - superclass and the child - the subclass.

Let's have a look at `Car` and `ElectricCar` classes.
`ElectricCar` class can inherit properties and methods from the `Car` class to avoid duplication.

First, let's define the base `Car` class:

```js
class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  start() {
    console.log(`${this.brand} ${this.model} has started.`);
  }

  drive() {
    console.log(`${this.brand} ${this.model} is driving.`);
  }

  stop() {
    console.log(`${this.brand} ${this.model} has stopped.`);
  }
}

const car = new Car("Ford", "Mustang");
car.start();
car.drive();
car.stop();
```

Now, let's extend the `Car` class to create an `ElectricCar` class.
The `ElectricCar` class will inherit properties and methods from the `Car` class and add some additional properties and methods specific to electric cars:

```js
class ElectricCar extends Car {
  constructor(brand, model, batteryCapacity) {
    super(brand, model);
    this.batteryCapacity = batteryCapacity;
  }

  start() {
    console.log(`${this.brand} ${this.model} has started silently.`);
  }

  drive() {
    console.log(`${this.brand} ${this.model} is driving.`);
  }

  stop() {
    console.log(`${this.brand} ${this.model} has stopped.`);
  }

  charge() {
    console.log(`${this.brand} ${this.model} is charging with ${this.batteryCapacity} kWh battery.`);
  }
}

const tesla = new ElectricCar("Tesla", "Model S", 100);
car.charge();
car.start();
car.drive();
car.stop();
```

Let's explain both classes in details.

1. The `ElectricCar` class extends the Car class using the `extends` keyword.
This makes the `ElectricCar` class as a subclass of `Car`.

2. The constructor of `ElectricCar` calls the parent class's constructor using the `super` keyword, passing brand and model to it.
This is needed to initialize properties of the parent class.
The `batteryCapacity` is a new property specific to the ElectricCar class.

3. The `ElectricCar` class overrides the `start` method of the `Car` class.
When start is called on an `ElectricCar` instance, it uses the overridden method that logs a different message.

4. The `ElectricCar` class defines a new method `charge`, which is specific to electric cars and not present in the `Car` class.

Hope you find this blog post useful. Happy coding!

_Read original blog post on my website_ [_https://antondevtips.com_](https://antondevtips.com/blog/a-comprehensive-guide-to-javascript-classes?utm_source=newsletter&utm_medium=email&utm_campaign=11_06_24)_._

### After reading the post consider the following:

- [Subscribe](https://antondevtips.com/blog/a-comprehensive-guide-to-javascript-classes#subscribe) **to receive newsletters with the latest blog posts**
- [Download](https://github.com/AntonMartyniuk-DevTips/dev-tips-code/tree/main/frontend/javascript/classes) **the source code for this post from my** [github](https://github.com/AntonMartyniuk-DevTips/dev-tips-code/tree/main/frontend/javascript/classes) (available for my sponsors on BuyMeACoffee and Patreon)

If you like my content —  **consider supporting me**

Unlock exclusive access to the source code from the blog posts by joining my **Patreon** and **Buy Me A Coffee** communities!

[![](https://cdn-images-1.medium.com/max/233/1*GSZFx05RDUWr5pn_E9bK8w.png)](https://www.buymeacoffee.com/antonmartyniuk)

[![](https://cdn-images-1.medium.com/max/229/1*8tJk9eYCJrkzoAJw2cILSA.png)](https://www.patreon.com/bePatron?u=73769486)