Object structure visualized in memory

Question

I am trying to picture the way how Javascript object is placed in the memory. Since it is an object, it is stored on the heap part of the memory. It is also a collection of key-value pairs.

Now, I have a question, are Javascript objects implemented as a linked list structure? Or is it something else?

Here I have made a picture that maps into memory from this code:

var o  = {} 
var o1 = { a: 1, b: o }

So, focusing on the o1, there is a memory segment that has a reference to the value 1 and we have named that space as a. Also, the property b has an address to the other object.

My question is: Is this an accurate representation of the Javascript object mapped into the memory? If not, what am I missing?

Answer 1

Fundamentally, I think your diagram is basically correct, at least in the main idea that the object is a defined area of memory with slots for its properties.

The actual memory structure is not defined by the specification and can vary from JavaScript engine to JavaScript engine.

What the specification has to say is that

An Object is logically a collection of properties.

...where data properties like your a and b have a name and a value. 1 is a value, an an object is a value (more on that in a moment). The spec doesn't get into the question of how values are referenced from various places.

Actual modern JavaScript engines create on-the-fly classes to optimize property access, since property access is a very common operation. They also handle objects via object references, which are values saying where the actual object is elsewhere in memory from the reference. In a modern engine, it's likely that your object is implemented with a memory slots for a and b, both likely 64 bits in size (but I don't know, that could vary), and that the value 1 is stored directly in the slot, and the object reference for b (which, again, points to the object elsewhere in memory) is also stored directly in the slot. The details will vary from engine to engine.

So for instance, your code is likely to create something like this in memory (leaving out a lot of details):

                                    +??????????+
o: Ref33454??????????????????????+?>| (Object) |
                                 |  +??????????+
                                 |  +??????????+
                                 |
                +??????????????+ |
o2: Ref54612???>|   (Object)   | |
                +??????????????+ |
                | a: 1         | |
                | b: Ref33454  |?+
                +??????????????+

---

Side note:

Since it is an object, it is stored on the heap part of the memory.

That is not a valid assumption. If this is happening in a function, for instance, and the function is used enough that the JavaScript engine decides to aggressively optimize it, one such optimization used by V8 (at least) is to identify whether an object's lifespan is entirely contained to the function call and, if so, to allocate it on the stack, since stack allocation and cleanup is very fast. So it's entirely possible for an object to be on the stack instead of in heap (and, if I recall correctly, possible for it to be copied from the stack to the heap if necessary because in some code paths it survives beyond the end of the function call).