Javascript Object.create: what happens to memory when data is set?

Question

Let's say in Javascript a new Object is being created with a method to set data to the created instance.

I am wondering, when that data has been added, will that data exist twice in memory or do newObj.data and data simply point to the same address in memory?

let data = {text: 'a text'};

let newObj = Object.create({
  setData(argData) {
    this.data = argData;
  }
});

// is data and newObj.data twice in memory now?

I apologize in advance if similar questions might have been asked already (that's what the editing hint at the time of writing this indicated). I so, I haven't found them. May be they were formulated differently, but I don't know how to ask this question in any other way.

if you call function setData both data and this.data will point to the same object, in JS they passed by reference. — jcubic, Feb 03 '19 at 13:13
@jcubic - Best to avoid "passed by reference." It's a term of art meaning something else. It's just that the value is a reference, and that value is copied. — T.J. Crowder, Feb 03 '19 at 13:28

T.J. Crowder · Accepted Answer · 2019-02-03T13:43:34.013

I am wondering, when that data has been added, will that data exist twice in memory or do newObj.data and data simply point to the same address in memory?

The latter. What's held in newObj.data and data is something called an object reference, not the object itself. The object is elsewhere in memory (just once); the reference is a value telling the JavaScript engine where the object is.

That's assuming that you ever actually call newObj.setData(data). Just the Object.create itself doesn't set the data property on the newObj.

Let's throw some ASCII-art at it. After you do this:

let data = {text: 'a text'};

let newObj = Object.create({
  setData(argData) {
    this.data = argData;
  }
});

...you have something like this in memory (various details omitted):

                                               +−−−−−−−−−−−−−−−−+
data:[Ref54611]−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−>|   (object)     |
                                               +−−−−−−−−−−−−−−−−+
                                               | [[Prototype]]  |−−+
                                               | text: 'a text' |  |
                                               +−−−−−−−−−−−−−−−−+  |
                                                                   |
                     +−−−−−−−−−−−−−−−−+                            +−>(Object.prototype)
newObj:[Ref74135]−−−>|   (object)     |                            |
                     +−−−−−−−−−−−−−−−−+    +−−−−−−−−−−−−−−−−−−−−+  |
                     | [[Prototype]]  |−−−>|      (object)      |  |
                     | text: 'a text' |    +−−−−−−−−−−−−−−−−−−−−+  |
                     +−−−−−−−−−−−−−−−−+    | [[Prototype]]      |−−+
                                           | setData:[Ref55462] |−−−−>(function)
                                           +−−−−−−−−−−−−−−−−−−−−+

Then after:

newObj.setData(data);

...you have something like:

                                            +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
                                            |                                                |
                                            \    +−−−−−−−−−−−−−−−−+                          |
data:[Ref54611]−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+−−>|   (object)     |                          |
                                                 +−−−−−−−−−−−−−−−−+                          |
                                                 | [[Prototype]]  |−−+                       |
                                                 | text: 'a text' |  |                       |
                                                 +−−−−−−−−−−−−−−−−+  |                       |
                                                                     \                       |
                     +−−−−−−−−−−−−−−−−−−+                             +−>(Object.prototype)  |
newObj:[Ref74135]−−−>|   (object)       |                            /                       |
                     +−−−−−−−−−−−−−−−−−−+    +−−−−−−−−−−−−−−−−−−−−+  |                       |
                     | [[Prototype]]    |−−−>|      (object)      |  |                       |
                     | text: 'a text'   |    +−−−−−−−−−−−−−−−−−−−−+  |                       |
                     | data: [Ref54611] |−−+ | [[Prototype]]      |−−+                       |
                     +−−−−−−−−−−−−−−−−−−+  | | setData:[Ref55462] |−−−−>(function)           |
                                           | +−−−−−−−−−−−−−−−−−−−−+                          |
                                           |                                                 |
                                           +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+

Note that the conceptual value "[Ref54611]" is in both data (the variable) and newObj.data (the property). You never actually see the value of an object reference in code, but you can think of them as numbers telling the engine where the object is.

score 0 · Answer 2 · answered Feb 03 '19 at 13:16

0

It's a classic reference vs. value question. With JS, the case is the latter as objects are always referenced.

You can find examples here: Javascript by reference vs. by value

answered Feb 03 '19 at 13:16

silicakes

6,364
3
28
39

Javascript Object.create: what happens to memory when data is set?

2 Answers2