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.
The video is only loaded from YouTube when you play it – data (including your IP address) is then transmitted to YouTube/Google. More in the privacy policy
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.
Frequently Asked Questions
What types of fields are there in JavaScript classes?There are public and static fields.
How do I access static fields?You access them using the class name followed by a dot.
What happens if I change static fields?Changes to static fields affect all instances of the class.
