DEV Community

Cover image for JavaScript Getter Factory ~ Properties from thin air ~
Adam Crockett ๐ŸŒ€
Adam Crockett ๐ŸŒ€

Posted on

1

JavaScript Getter Factory ~ Properties from thin air ~

Ive been looking back at one of my favourite library creations, which I still use in my projects and have a whole methodology around it, Reactive CSS Properties, but I want to talk today about a technical aspect of the library which I find very interesting, a little magic but still very cool and imperative.

const BLANK = {};
const getterFactory = new Proxy(BLANK, {
    get(tar, prop, value) {
        // no matter what return an object
        return {
            imANewThing: 'woo!'
        }
    }
});

export { getterFactory }; 
Enter fullscreen mode Exit fullscreen mode

What we have here is a blank object that ideally you would not reference so it isn't accessible, its just a placeholder, when you access a property like this

import { getterFactory } from 'thinAir';
getterFactory.foo
// or
const { justAboutAnythingYouWant } = getterFactory;
Enter fullscreen mode Exit fullscreen mode

You will always give you a new instance of an object with imANewThing. Thats quite cool if for example you want to conveniently create something in a library. for example in my reactive css properties library:

import rCSSProps from "reactive-css-properties";

// rCSSProps object has no undefined properties and will always yield a class-like callable object.
// The name of your destructured variable is the name of the css variable in snake-case
const { themeTextColor } = rCSSProps();

// insert `--theme-text-color: #000;` into the root element `style` (<html> in this example).
themeTextColor("#000");

// or provide a fallback for browsers which do not support css custom properties
themeTextColor("#000", "#000");
Enter fullscreen mode Exit fullscreen mode

I was just destructuring css custom properties out of nowhere, the rCSSProps is our getter factory and it is a function which can then configure the output of all of the getters.

nice huh?

Well I hope you like the idea and maybe you can think of a sweet web server using something like:

const { homeRoute, someOtherRoute, byeBye } = route('/foo');

homeRoute.get = () => {

}


byeBye;
Enter fullscreen mode Exit fullscreen mode

ps, for the geeks like me, how is this working?

Simple, in any attempt to get any property on our object through ['squareBrackets'], .dotNotaiton or { destructure } we divert the usual return value of the get in the proxy get trap handler thing, and disregard the usual undefined in favour of a value we control.
In a way its like a class in that we instantiate it by proxy, but its actually no different to a regular variable reference.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Googleโ€™s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more