Effectively Using Fields in JavaScript Classes

The use of fields or member variables in JavaScript classes is a central concept that has come into focus with the new standards from ES6 to ES13. In this tutorial, we will show you how to declare and initialize both public and static fields. We will look at the differences and usage of these fields in real-world applications.

Main insights

• You can declare and initialize fields in classes, both as public and as static members.
• Public members are accessible to all instances of the class.
• Static members are class-wide and share the same memory space for all instances.
• Field initialization should be done thoughtfully to avoid unintentional errors.

Step-by-step guide

Declaring and initializing fields

At the beginning, you will learn how to declare fields within a class. You can initialize fields directly at their definition, which increases the readability and maintainability of the code.

With the code above, you define a field named description with an initial value.

As you can see, when you create the object, the initial value is available immediately.

Overriding initial values in the constructor

Additionally, you can override the initial value of a field in the constructor. The constructor is called when you create an instance of the class. Here, you can change the value of the field with the provided argument.

Accessing fields

Access to the fields is done through the instance of your class. With the this keyword, you can access the member variables.

Now, if you create an object of Circle, you'll see that the value of description is outputted.

Using static fields

Static fields are another important concept that you can use in your JavaScript classes. Unlike normal fields, static fields are class-wide and not instance-specific. This means there is only one copy of this field, no matter how many instances you create from the class.

Accessing static fields

It is important to note that access to static fields is done not through the instance, but solely through the class.

Defining static methods

In addition to static fields, you can also define static methods in your classes.

Changes to static fields

An interesting behavior with static fields is that when you change the value of a static field, this change applies to all instances.

Conclusion on using fields in JavaScript

In summary, you are now able to use both public and static fields in JavaScript classes effectively. You know how to declare fields, initialize them, and how to access them. Static fields and methods open up additional possibilities in designing your classes.

Summary - Fields in Classes: A Guide for JavaScript

With this tutorial, you have learned the fundamentals of fields in JavaScript classes. You should now be able to declare fields, initialize them, and use them as needed.