DEV Community

Understanding Class Fields and Static Properties

Hello! Welcome to this article about Class Fields and Static Properties!
ES15 added the ability to define class fields and static properties directly within the class body. This eliminates the need for constructor functions to initialize properties, leading to cleaner and more concise code. This is about understanding this new feature!

1. Define a class.

You need to define a class to use it:

class myClass {
}
Enter fullscreen mode Exit fullscreen mode

2. Put the properties in the class.

Putting the properties in the class defines the properties:

class myClass {
    property1;
    property2;
}
Enter fullscreen mode Exit fullscreen mode

You can add as many properties as you need.

3. Add the constructor() function.

Add the constructor function to define the keys in the this object for the properties:

class myClass {
    property1;
    property2;
    constructor(property1, property2) {
        this.property1 = property1;
        this.property2 = property2;
    }
}
Enter fullscreen mode Exit fullscreen mode

4. Example

This is an example of using this new feature in JS:

class Person {
    name;
    age;
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}
Enter fullscreen mode Exit fullscreen mode

5. Conclusion

And that is the conclusion for this post!
Make sure you add a reaction and bookmark this!
Also make sure you comment down below!
This post was made for The Frontend Challenge!

Top comments (0)