JavaScript class fields

JavaScript class fields are a feature introduced in ECMAScript 2022 (also known as ES2022 or ES12) that allows you to define and initialize class properties directly within the class body. Before class fields, properties were typically defined inside the class constructor using the this keyword. Class fields provide a more concise syntax and offer additional benefits.

Here’s the syntax for defining JavaScript class fields:

class ClassName {
  fieldName = initialValue;
  static staticFieldName = initialValue;
  #privateFieldName = initialValue;
}

• To define a class field within a class, you use the format fieldName = initialValue;. Here, fieldName is the name of the field, and initialValue is the value you want to assign to the field. The field is automatically assigned this value when an instance of the class is created.
• Static class fields are defined using the static keyword before the field name. The syntax for a static class field is static staticFieldName = initialValue;. Static fields are shared among all instances of the class and can be accessed using the class name.
• Private class fields are denoted by the # prefix. The syntax for a private class field is #privateFieldName = initialValue;. Private fields can only be accessed from within the class where they are defined.

Example of defining class fields:

class Person {
  name = 'John'; // class field
  age; // uninitialized class field

  constructor() {
    this.age = 30;
  }
}

JavaScript class fields example

Simple example code.

class Car {
  brand = 'Toyota'; // initialized class field
  static totalCars = 0; // static class field
  #fuelLevel = 100; // private class field

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

  getFuelLevel() {
    return this.#fuelLevel;
  }

  static getTotalCars() {
    return Car.totalCars;
  }
}

// Create instances of the Car class
const car1 = new Car('Camry');
const car2 = new Car('Corolla');

console.log(car1.brand); // Output: Toyota
console.log(car1.model); // Output: Camry
console.log(car2.brand); // Output: Toyota
console.log(car2.model); // Output: Corolla

console.log(Car.totalCars); // Output: 2

console.log(car1.getFuelLevel()); // Output: 100

console.log(Car.getTotalCars()); // Output: 2

Output:

In the above example, we have a Car class with several class fields.

The brand field is an initialized class field set to the value 'Toyota'. It is accessible through instances of the Car class.

The totalCars field is a static class field that keeps track of the total number of car instances created. It is accessed using the class name Car.

The fuelLevel field is a private class field denoted by the # prefix. Private fields are only accessible from inside the class.

In the constructor, we assign the model parameter to the instance property this.model, and increment the totalCars field to keep count of the total number of car instances.

We then create two car instances, car1 and car2, with different models. We can access the class fields and instance properties using dot notation.

Finally, we log the values of the fields and properties to the console.

Comment if you have any doubts or suggestions on this Js class topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version