What is the point of public field declarations in JavaScript?-CodePudding

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.

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.

CodePudding user response：

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.

CodePudding user response：

The line this.height = height; replaces the default value from the declaration with the value of the height parameter. It makes no difference that no argument was supplied, it still performs the assignment. And when the argument isn't supplied, the parameter defaults to undefined.

You could check for this and not override the initial default:

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

Or you could provide the defaults in the constructor argument list instead of the property declarations.

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