Traversing the parent-child relationship between objects

Looks like the examples you give don't work as intended.

> let myTree = new Tree({a:{b:{k:2}}}); undefined > myTree.a.b; // { k: 2 } Proxy [ { __isbranch__: true, k: 2 }, { set: [Function: set], setProxy: [Function: setProxy], get: [Function: get] } ] > myTree.a === myTree.a.b.__parent__; // true true > myTree.c = {d:{l:5}}; // {d: {l: 5}} { d: { l: 5 } } > myTree.c.__parent__ === myTree; // true false > myTree.a.b.__parent__ = myTree.c; // {d: {l: 5}} TypeError: Cannot set property '__parent__' of undefined > myTree.c.b.k; // 2 TypeError: Cannot read property 'k' of undefined > myTree.a.b; // undefined undefined > let anotherTree = new Tree({}); undefined > myTree.a.l = 3; 3 > myTree.a.l; // 3 3 > myTree.a.__parent__ = anotherTree; Proxy [ { __istree__: true, a: Proxy [ [Object], [Object] ] }, { set: [Function: set], setProxy: [Function: setProxy], get: [Function: get] } ] > anotherTree.a; // {l: 3} Proxy [ { __isbranch__: true, l: 3 }, { set: [Function: set], setProxy: [Function: setProxy], get: [Function: get] } ] > myTree.a; // undefined undefined > anotherTree.a.__parent__ === anotherTree; // true false > myTree.__raw__(); RangeError: Maximum call stack size exceeded 

I'm thinking of one thing: what if the objects you operate were immutable, yet it was possible to operate on parent nodes of any of them? For example, in DOM, if you get an element and pass it as an argument to a function, the function has access to this element's properties, one of them is "parent". So technically you can go up from that node, until you reach document. I'm totally sure it might be useful, but querying object properties shouldn't affect its context.

So, taking the metaphor of DOM element, I thought of this:

class Element { constructor(object) { Object.entries(object).map(([property, value]) => { if (typeof value === 'object') { this[property] = new Element(value); this[property].__parent__ = this; } else { this[property] = value; } }); this.__current__ = this; } current() { return this.__current__; } parent() { return this.__parent__; } get(property) { if (!this[property]) { throw new Error('No such property:', property); } return this[property]; } } 

Take note that there are no Proxy or Symbol things for simplicity of the representation. In fact, I see __parent__ property being reassigned in your example, too, so I assume there's no need to wrap it into a Symbol.

Given that, we can make an instance of Element object:

let e = new Element({ a: 1, b: { c: 2, d: { e: 3, f: { g: 4, h: { i: 5, j: {} } } } } }); 

so that it has the properties that we want to have:

> e.current() === e true > e.get('b').parent() === e true > e.get('b').get('d').parent() === e.get('b') true > e.get('b').current() === e.get('b') true > e.b === e.get('b') true > e.b.d === e.get('b').get('d').get('f').get('h').parent().parent() true 

We can safely pass a certain property within the object to a function and get the parent of that property. So given a function

function getParent(element) { return element.parent(); } 

we get

> getParent(e.b.d) === e.b true 

But the thing I was talking about was circularity. In case of this simplistic structure, we can make it circular easily:

e.e = e; 

so that

> e.e.e === e.e true > e.e.e.e.e.e.e.e === e.e.e.e true 

which supports your use case, too: we can assign another instance of this object to some property and enjoy the traversable structure:

> e.b.another = new Element({ abc: 'xyz' }) Element { abc: 'xyz', __current__: [Circular] } > e.b Element { c: 2, d: Element { e: 3, f: Element { g: 4, h: [Element], __current__: [Circular], __parent__: [Circular] }, __current__: [Circular], __parent__: [Circular] }, __current__: [Circular], __parent__: Element { a: 1, b: [Circular], __current__: [Circular], e: [Circular] }, another: Element { abc: 'xyz', __current__: [Circular] } } > e.b.another.e = e Element { a: 1, b: Element { c: 2, d: Element { e: 3, f: [Element], __current__: [Circular], __parent__: [Circular] }, __current__: [Circular], __parent__: [Circular], another: Element { abc: 'xyz', __current__: [Circular], e: [Circular] } }, __current__: [Circular], e: [Circular] } > e.b.another.e.b.another === e.b.another true 

as well as we can assign a certain position in our tree to another variable and check if they are the same:

> let copyOfE = e.b.another.e; copyOfE === e true 

However, you might have noticed that we operate on pointers here, so any assignment to a property is destructive:

> copyOfE.b = 2 2 > e.b 2 

I'm not sure if you're looking after this behavior, too, but if we go full on OOP, that's what we get by default.

Now, the raw thing. If you call this method toJSON, it will be guaranteed to be called by JSON.stringify. So we add this method to our class:

class Element { constructor(object) { Object.entries(object).map(([property, value]) => { if (typeof value === 'object') { this[property] = new Element(value); this[property].__parent__ = this; } else { this[property] = value; } }); this.__current__ = this; } current() { return this.__current__; } parent() { return this.__parent__; } get(property) { if (!this[property]) { throw new Error('No such property:', property); } return this[property]; } toJSON() { const reducer = element => { let output = {}; for (let property in element) { if (property.slice(0, 2) === property.slice(-2) && property.slice(-2) === '__') { continue; } else if (typeof element[property] !== 'object') { output[property] = element[property]; } else { output[property] = reducer(element[property]); } } return output; }; return reducer(this); } } 

and enjoy output without circular references:

> JSON.stringify(new Element({ a: 1, b: { c: 2, d: { e: 3, f: { g: 4, h: { i: 5, j: {} } } } } })) '{"a":1,"b":{"c":2,"d":{"e":3,"f":{"g":4,"h":{"i":5,"j":{}}}}}}' 

However, it's still prone to stack overflows:

> e.e = e Element { a: 1, b: Element { c: 2, d: Element { e: 3, f: [Element], __current__: [Circular], __parent__: [Circular] }, __current__: [Circular], __parent__: [Circular] }, __current__: [Circular], e: [Circular] } > JSON.stringify(e) RangeError: Maximum call stack size exceeded 

There's a good Q&A on StackOverflow about this topic, check it out.

All in all, I think you are right about being defensive and using proxy objects, but still the code could be simplified a little bit, split into separate small utility functions, organized in a way to be easy to read from top to bottom, and such.

If the structure is circular, like a tree, you can treat every node as a tree or as a branch, unless it really provides value to the user to distinguish between the two.

And if after a couple months you find yourself struggling to understand what your code does after reading it once or twice (just like I did), it puts you at potential risk of having real hard time maintaining the code. So hopefully I provided an idea or two on how it could be optimized for maintainability. Cheers!