Private variables of Parent Class able to access in Child Class in JavaScript

Question

class ClassWithPrivateField {
    #privateField;

    constructor() {
        this.#privateField = 42;
    }
}

class SubClass extends ClassWithPrivateField {
    #subPrivateField;

    constructor() {
        super();
        this.#subPrivateField = 23;
    }
}

new SubClass();

//Object { #privateField: 42, #subPrivateField: 23 }

Question 1 - Why Parent Class private variables are able to access in the Child Class in JavaScript.

Issue is replicating in both Chrome and Firefox.

MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields

Is it a bug in chrome browser and Firefox browser?

Question 2 - In Chrome browser, I am able to access the private variables, where as in Firefox Browser, I am not able to access the private variables.

In the above example:

var subClass = new SubClass(); 
subClass.##privateField; //value is printing in chrome and Firefox is throwing "Uncaught SyntaxError: reference to undeclared private field or method #privateField".

Is it a bug in chrome browser?

Please provide a detail explanation with an example for both Question 1 and 2.

*"Why Parent Class private variables are able to access in the Child Class in JavaScript."* What makes you think you can? Nothing in your code is doing that. — T.J. Crowder, Apr 02 '23 at 07:28
a small correction. It is not `subClass.##privateField`, It is `subClass.#privateField` (Only single hash is present). — Krishna Chaitanya, Apr 02 '23 at 07:28
`subClass.##privateField;` will ***ONLY*** work in the dev tools in Chrome. It's a convenience feature for debugging code. Had you tried this in an actual script, you'd see the same behaviour in FF and Chrome. — VLAZ, Apr 02 '23 at 07:30
@T.J.Crowder `subClass.#privateField` [works for me in Chrome dev tools](https://i.imgur.com/lELrdkg.png). My version is 111.0.5563.147 — VLAZ, Apr 02 '23 at 07:39
@VLAZ - Thanks. Looks like they must have just added that feature, it's not in v110. — T.J. Crowder, Apr 02 '23 at 07:42
I am able to access the private variables in chrome dev tools (subClass.#privateFeld) - using Chrome version 111.x — Krishna Chaitanya, Apr 02 '23 at 07:42
@T.J.Crowder yes, it's very new. I wasn't sure when it was released but only heard of it through a question here this week, The question asked why private fields were accessible and somebody pointed out that it's a Chrome feature. — VLAZ, Apr 02 '23 at 07:43
Related: [Why is JavaScript private method accessible from console.log](https://stackoverflow.com/q/75837140) and [Private class fields: support in Chrome developer tools / Visual Studio Code](https://stackoverflow.com/q/58834372) — VLAZ, Apr 02 '23 at 07:51

score 2 · Accepted Answer · edited Apr 02 '23 at 07:48

Why Parent Class private variables are able to access in the Child Class in JavaScript.

Nothing in the code shown for Question 1 does that, and if you actually try it, it doesn't work:

class Parent {
    #privateField = 42;
}

class Child extends Parent {
    method() {
        console.log(this.#privateField); // SyntaxError: Private field '#privateField' must be declared in an enclosing class
    }
}

You've shown //Object { #privateField: 42, #subPrivateField: 23 }, suggesting that you're doing this in the console. All that's showing you is that the object created by new SubClass has both private fields in it. Which it does, because that object is both an instance of SubClass and an instance of ClassWithPrivateField. But that doesn't mean SubClass's code has access #privateField.

Question 2 - In Chrome browser, I am able to access the private variables, where as in Firefox Browser, I am not able to access the private variables.

It's a feature of Chrome's devtools (a fairly recent one introduced in version 111), letting you do that as a debugging aid. Devtools lets you do things you can't otherwise do. It's neither a bug in Chrome (that you can do it) nor in Firefox (that you can't), just different choices/feature sets in their debugging environments.

In general, don't read too much into what you can and can't do in devtools. If you want to know if something works in real code, try it in real code.

Private variables of Parent Class able to access in Child Class in JavaScript

1 Answers1