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
– jcubic, Commented Feb 3, 2019 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
– T.J. Crowder, Commented Feb 3, 2019 at 13:28

T.J. Crowder · Accepted Answer · 2025-03-24 09:16:44Z

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)      |  |
                     +−−−−−−−−−−−−−−−−+    +−−−−−−−−−−−−−−−−−−−−+  |
                                           | [[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)      |  |                       |
                     | 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.

You seems to have one typo that newObj doesn't have text property.
@An5Drama - Thank you! Yeah, copy and paste error. Nice catch!

silicakes · Accepted Answer · 2019-02-03 13:16:55Z

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 3, 2019 at 13:16

silicakes

6,9323 gold badges32 silver badges40 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related