How to generate getters and setters in Javascript?

Question

I have the following code, which is very repetitious:

const flags = {
  get logged() {
    return localStorage.getItem("logged") === "true";
  },
  set logged(val: boolean) {
    if (val) {
      localStorage.setItem("logged", "true");
    } else {
      localStorage.removeItem("logged");
    }
  },
  get notificationsMuted() {
    return localStorage.getItem("notifications-muted") === "true"; 
  },
  set notificationsMuted(val: boolean) {
    if (val) {
      localStorage.setItem("notifications-muted", "true");
    } else {
      localStorage.removeItem("notifications-muted");
    }
  }
}

As you can see, the get and set for each flag type is identical, save for the property names. I would like to do something like this instead:

function getter(prop: string) {
  return localStorage.getItem(prop) === "true";
}

function setter(prop: string, val: boolean) {
  if (val) {
    localStorage.setItem(prop, "true");
  } else {
    localStorage.removeItem(prop);
  }
}

const flags = {
  get logged: getter("logged")
  set logged: setter("logged")
  get notificationsMuted: getter("notifications-muted")
  set notificationsMuted: setter("notifications-muted")
}

But I'm not sure if Javascript / Typescript has support for this sort of thing. Is such a thing possible, and if so, how? If not, is there any other way I can cut down on the repetition here?

Your `getter()` and `setter()` functions should return functions that do what you want. — Pointy, Mar 04 '22 at 19:22
https://stackoverflow.com/questions/7891937/is-it-possible-to-implement-dynamic-getters-setters-in-javascript — epascarello, Mar 04 '22 at 19:24
@Pointy I tried that as well, but it still is erroring out saying the expression is not callable. — Ryan Peschel, Mar 04 '22 at 19:24
If you're working in Typescript, you have to provide the type information for the return values also. — Pointy, Mar 04 '22 at 19:26
@jonrsharpe huh? I did show my attempt in my original post. I didn't know proxies were required for something this basic. I'll just use those if there is no other way — Ryan Peschel, Mar 04 '22 at 19:27
@Pointy I supplied the return values as well and it's still giving the same error — Ryan Peschel, Mar 04 '22 at 19:27
I have an example in this repo https://github.com/bluebrown/reactive-effects. One way is defining the props and the other is using object proxy. — The Fool, Mar 04 '22 at 19:36

Ori Drori · Accepted Answer · 2022-03-06T06:17:29.860

2

You can use a proxy with get and set traps, use TS types to allow only props you wish to handle (TS playground)):

interface Flags {
  logged: boolean,
  'notifications-muted': boolean;
}

type Prop = keyof Flags;

const handlers = {
  get(_: Flags, prop: Prop) {   
    return localStorage.getItem(prop) === "true";
  },
  
  set(_: Flags, prop: Prop, val: any) {
    if (val) {
      localStorage.setItem(prop, "true");
    } else {
      localStorage.removeItem(prop);
    }

    return true;
  }
};

const flags = new Proxy<Flags>({} as Flags, handlers);

edited Mar 06 '22 at 06:17

answered Mar 04 '22 at 19:34

Ori Drori

183,571
29
224
209

Updated answer to use TS to block props that are not part of `Flags`. – Ori Drori Mar 04 '22 at 19:40

score 1 · Answer 2 · answered Mar 04 '22 at 19:31

All you really need is to use Object.defineProperty with an object with a get and set properties. Or, with multiple properties, use Object.defineProperties to define them all at once.

One approach which will help with code organization is to not use lots of local storage keys, but instead use a single object that gets stored.

const props = ['logged', 'notificationsMuted'] as const;
const defaultStorage = Object.fromEntries(props.map(prop => [prop, false]));
const getStorage = () => JSON.parse(localStorage.getItem('settings') || JSON.stringify(defaultStorage));
const flags = Object.defineProperties(
    {},
    Object.fromEntries(
        props.map(
            prop => [
                prop,
                {
                    get: () => getStorage()[prop],
                    set: (newVal: boolean) => {
                        const store = getStorage();
                        store.prop = newVal;
                        localStorage.setItem('settings', JSON.stringify(store));
                    }
                }
            ]
        )
    )
) as Record<(typeof props)[number], boolean>;

score 0 · Answer 3 · answered Mar 04 '22 at 19:32

This is the current "best" solution I can come up with. Open to anyone who can provide an improvement over this:

function getter(prop: string): boolean {
  return localStorage.getItem(prop) === "true";
}

function setter(prop: string, val: boolean): void {
  if (val) {
    localStorage.setItem(prop, "true");
  } else {
    localStorage.removeItem(prop);
  }
}

const flags = {
  get logged() { return getter("logged") },
  set logged(val: boolean) { setter("logged", val) },
  get notificationsMuted() { return getter("notifications-muted"); },
  set notificationsMuted(val: boolean) { setter("notifications-muted", val); }
}

How to generate getters and setters in Javascript?

3 Answers3