How to simulate protected variables in javascript classes?

Question

What is the best way to simulate protected variables in javascript?

class Parent{

    #variable; // Private variable. This is not to be public.

    constructor(value)
    {
        this.#variable = value;
    }
}

class Child extends Parent{

    getNewVariable()
    {
        return (1 + this.#variable); // Uncaught SyntaxError: Private field '#variable' must be declared in an enclosing class
                                     // We want #variable to be accessible without making it public.
    }
}

Since javascript doesn't support protected variables yet,

What is the best option for accessing private variables from superclasses in extended classes?

I haven't been able to find much documentation on this, so any suggestions would be very helpful.

Hi @ClausBönnhoff: Thanks for the suggestion. Getters and setters definitely work, but I was hoping to cut down on syntactic sugar: Writing a get variable(){ return this.#variable; } For each variable is not ideal. However if this is the only option, then it will have to do. :) — Andrew Khassapov
– Andrew Khassapov, Commented Sep 23, 2021 at 11:10
A protected property is essentially public since everyone could extend the class. So just make it public in the first place. Do not try to simulate a different language, write idiomatic JavaScript instead. — Bergi
– Bergi, Commented Sep 23, 2021 at 12:03

Peter Seliger · Accepted Answer · 2021-10-31 21:13:52Z

2

+++ late answer, but here we go ... +++

A WeakMap based approach most probably covers what the OP is looking for ...

const protectedStatesMap = new WeakMap;

class Parent{
  constructor(foo) {
    protectedStatesMap.set(this, { foo });
  }
  getFoo() {
    return protectedStatesMap.get(this).foo;
  }
}
class Child extends Parent{
  constructor(foo, bar) {
    super(foo);

    Object.assign(protectedStatesMap.get(this), { bar })
  }
  getBar() {
    return protectedStatesMap.get(this).bar;
  }
}
const childA = new Child('foo', 'bar');
const childB = new Child('baz', 'biz');

console.log('childA.getFoo() ...', childA.getFoo());
console.log('childA.getBar() ...', childA.getBar());

console.log('childB.getFoo() ...', childB.getFoo());
console.log('childB.getBar() ...', childB.getBar());

.as-console-wrapper { min-height: 100%!important; top: 0; }

edited Oct 31, 2021 at 21:13

answered Oct 31, 2021 at 21:07

Peter Seliger

13.5k3 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Peter Seliger Over a year ago

@AndrewKhassapov ... check out the above solution of this late answer.

Andrew Khassapov Over a year ago

Thank you @PeterSeliger!

wihlke Over a year ago

This is really clever!

Rich Remer Jun 2 at 17:37

The primary issue with this approach is the child class must be defined in the same module as the parent class. So, it's not really a general solution.

Rich Remer · Accepted Answer · 2025-08-13 04:04:34Z

If you have complete control over all child classes, then Peter's response is probably the way to go. But if you expect your base class to be used in other projects, that won't work.

I find using Symbols can be a pretty good way of simulating protected properties. It's better than just using an underscore prefix on a public property, but it won't actually stop anyone from accessing the properties if they want to jump through hoops. It will protect against naive accidental access.

First, define your base class and a symbol that will be used by inheriting classes.

export const extend = Symbol("extend Base");

export class Base {
    constructor(value) {
        this.value = value;
        this[extend] = {default: value};
    }

    reset() {
        this.value = this[extend].default;
    }
}

Then, define a child class, using the symbol for accessing the properties.

import {Base, extend} from "./base.js"

export class Child extends Base {
    constructor(value) {
        super(value);
    }

    changeDefault(value) {
        this[extend].default = value;
    }
}

This approach keeps the protected properties out of any serialization (JSON.stringify()), keeps them from being overwritten by a simple Object.assign, and serves as an indication to the users of the API that this is not a normal property.

As long as you're not relying on this to truly restrict access, it should serve most needs.

david-err · Accepted Answer · 2021-09-23 11:56:50Z

-1

What about using TypeScript? TypeScript classes support the protected keyword (see docs), and has alot of extra benefits over vanilla JavaScript.

answered Sep 23, 2021 at 11:56

david-err

1,0811 gold badge8 silver badges15 bronze badges

1 Comment

wihlke Over a year ago

TypeScript supports the syntax but properties marked as private or protected are still fully accessible

Collectives™ on Stack Overflow

How to simulate protected variables in javascript classes?

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related