JavaScript Magic Objects

[u/noeldemartin]

https://noeldemartin.com/blog/programming-patterns-magic-objects

I just published a blog post to my website about a pattern I've been using for a while that I think you will find interesting (and probably very divisive!): Magic Objects.

class Parrot extends MagicObject {
    __get(property) {
        return `${property}! ${property}!`;
    }
}

const parrot = new Parrot();

console.log(parrot.foo); // "foo! foo!"
console.log(parrot.bar); // "bar! bar!"

Basically, I'm borrowing the idea of Magic Methods from PHP and porting them to JavaScript. You've probably seen something like this done with proxies before, but I still like to use some OOP in my JavaScript, and I also came up with a way to make it work nicely with TypeScript.

It may seem a bit over the top at the beginning, but I've been using this for a while and I've found it very useful.

Let me know what you think!

[u/javascript]

Proxy Objects (getters and setters) have been around for a while but I've yet to come across a use case where they were the right choice. They tend to work more as an escape hatch.

[u/ic6man → u/javascript]

I used a proxy object around a pre-existing API implementation to provide retry and consistent error handling + short circuit.

I don’t know that I would call that an escape hatch. It’s just a nicer way of building on top of something you don’t have access to modify yourself.

[u/javascript → u/ic6man]

I would absolutely call that an escape hatch. And a very useful one to have available!