What is the point of public field declarations in JavaScript?

So, according to MDN docs :

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

By declaring fields up-front, class definitions become more
self-documenting, and the fields are always present.

As seen above, the fields can be declared with or without a default
value.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

At first I thought that if I create an object using the constructor above and don’t pass height and width arguments, I would have height = 0. However, it’s not a case. It is undefined.

let rectangle = new Rectangle()

console.log(rectangle.height) // this is undefined

So, now I can’t understand the point of public field declarations. They look like extra lines of code without much of purpose. What benefits do they bring? Thanks for any explanations.

>Solution :

You’re assigning to the height in the constructor, effectively overriding the class field assignment:

this.height = height;

Class fields assign properties to the instance before the constructor body runs, for the most part – your original code is nearly equivalent to

class Rectangle {
  constructor(height, width) {
    this.height = 0;
    this.width;
    this.height = height;
    this.width = width;
  }
}
let rectangle = new Rectangle()

console.log(rectangle.height)

which should make the issue obvious.

They look like extra lines of code without much of purpose.

Yes, if you assign to those properties in the constructor unconditionally, having such fields doesn’t help much – it’ll tell readers of the code quickly what instance properties will exist, but it also means additional code.

Class fields are much more useful when you want to assign instance properties that don’t get immediately overwritten, such as:

class Rectangle {
  height = 5;
  constructor(width) {
    this.width = width;
  }
}
let rectangle = new Rectangle(8)

console.log(rectangle.height, rectangle.width)

Class fields are nice syntax sugar when you have multiple properties to assign to the instance that don’t depend on constructor arguments.