2

From Classes on mdn web docs:

Public field declarations

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

Aren't the height and width outside of the constructor meaningless since they're always overwritten in the constructor?

What's the significance of the height and width declaration/initialization outside of constructor in this case?
Are they used/reachable by any means?

2
  • 4
    From that same documentation: "...By declaring fields up-front, class definitions become more self-documenting, and the fields are always present."
    – trincot
    Commented Jun 24, 2022 at 11:48
  • "Aren't the height and width outside of the constructor meaningless since they're always overwritten in the constructor?" in this case yes*. However, you could also declare public fields that aren't set in the constructor. It might simplify the constructor. Therefore, in some cases, it's not meaningless. *well, maybe some difference but I don't think that's what the example portrays.
    – VLAZ
    Commented Jun 24, 2022 at 11:50

1 Answer 1

2

The properties are only declared once (outside the constructor); if you didn't have those declarations, there'd be no declarations for those properties (they'd be created by assignment instead). Public property declarations (aka "public class fields") are optional, but can help avoid shape changes in objects (which improves efficiency) and/or reduce the analysis JavaScript engines need to do on the object being created to avoid shape changes. Basically, they provide a declarative (rather than imperative [step-by-step]) means of saying (in this case) that Rectangle objects always have a height and width property. While the JavaScript engine can figure that out using analysis of the constructor code, the declarations mean it doesn't have to worry about that (for those properties).

Aren't the height and width outside of the constructor meaningless since they're always overwritten in the constructor?

The initializer (= 0) on the height property is pointless, yes, since it gets unambiguously overwritten by the code in the constructor and the assignment doing so is the first statement in the constructor. If it weren't the first statement, then code in the constructor would be able to observe the 0 in height prior to the assignment.

Are [the height and width declaration/initialization outside of constructor] used/reachable by any means?

They could be used by subsequent class field initializers. For instance, this is valid:

class Example {
    a = 2;
    b = this.a * 3;
}
console.log(new Example().b); // 6

It's probably also worth pointing out that there's a difference if the class is a subclass: When you use the declaration syntax, the property is created via "define" semantics (as though you used the Object.defineProperty function), whereas if you just assign to it you're using assignment semantics. That matters if the superclass also defined the property:

class Super {
    #example = 42;

    get example() {
        console.log("Getting example");
        return this.#example;
    }
    set example(value) {
        console.log("Setting example");
        this.#example = value;
    }
}

class Sub extends Super {
    example = 67;
}

const super1 = new Super();
console.log(`What kind of property is super1.example?`);
console.log(propertyKind(super1, "example"));

const sub1 = new Sub();
console.log(`What kind of property is sub1.example?`);
console.log(propertyKind(sub1, "example"));

function propertyKind(obj, name) {
    let descr;
    do {
        descr = Object.getOwnPropertyDescriptor(obj, name);
        if (descr) {
            break;
        }
        obj = Object.getPrototypeOf(obj);
        if (!obj) {
            break;
        }
    } while (!descr);

    return descr
        ? "value" in descr
            ? "data"
            : "accessor" // presumably
        : "none";
}

Notice that example is an accessor property on super1 (via inheritance from its prototype), but it's a data property on sub1 because it was redeclared by Sub. If Sub had just assigned to it, it would have just used the property Super created:

class Super {
    #example = 42;

    get example() {
        console.log("Getting example");
        return this.#example;
    }
    set example(value) {
        console.log("Setting example");
        this.#example = value;
    }
}

class Sub extends Super {
    constructor() {
        super();
        this.example = 67;
    }
}

const super1 = new Super();
console.log(`What kind of property is super1.example?`);
console.log(propertyKind(super1, "example"));

const sub1 = new Sub();
console.log(`What kind of property is sub1.example?`);
console.log(propertyKind(sub1, "example"));

function propertyKind(obj, name) {
    let descr;
    do {
        descr = Object.getOwnPropertyDescriptor(obj, name);
        if (descr) {
            break;
        }
        obj = Object.getPrototypeOf(obj);
        if (!obj) {
            break;
        }
    } while (!descr);

    return descr
        ? "value" in descr
            ? "data"
            : "accessor" // presumably
        : "none";
}

Notice that now, it's an accessor property on both sub1 and super1 (and that when Sub did its assignment, the setter code in Super.example ran).


TL;DR - I would keep the declarations for clarity and potential efficiency, but remove the = 0 initializer on height, since that value is clearly never meant to be used.

4
  • There is extra bit of semantics - public class fields would not be available to subclasses. Declaring the fields means they only apply to this object. This might not always have relevance but it might be worth keeping in mind.
    – VLAZ
    Commented Jun 24, 2022 at 11:52
  • @VLAZ - I'm not sure quite what you mean by "public class fields would not be available to subclasses"...? Commented Jun 24, 2022 at 11:53
  • Ugh, I messed it it up. If a public class field is declared in a child without initialising it, the parent initialisation is not taken for the field: jsbin.com/sopukacolu/1/edit?js,console I meant this behaviour
    – VLAZ
    Commented Jun 24, 2022 at 11:56
  • @VLAZ - That's true about the subclass not seeing the super's value if redefining. To be clear, though, it's not that the initialization doesn't happen, it's that the field is completely recreated by the subclass after being created by the superclass. Public class fields are created using "define" semantics (e.g., as though you used Object.defineProperty), not assignment semantics. So in your example, A creates foo as a writable data property with the initial value 42 -- and then B redefines the property entirely as a writable data property with the initial value undefined. :-) Commented Jun 24, 2022 at 12:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.