Javascript - Pass by Reference in an Object using Extend (underscore.js library)

Question

In Javascript, when I use the extend function in the underscore.js library... can somebody please conceptually / visually describe to me what happens in the back-end in regards with memory - with this example:

var obj = {hello: [2]};
var obj2 = {hola: [4]};
_.extend(obj, obj2)
obj2.hola = 5;
console.log(obj) // hola still has a value of `[4]`

My issue is if I console.log(obj), for some reason, hola still has a value of [4]. I fully thought I would get the value 5 (via pass by reference)...

For the above example, here is what is visually / conceptually going on in my head:

1. The extend function deeply copies the key hola into obj:

   obj = {hello: [2], hola: TBD} ]btw - is obj storing only one memory address for this object?

2. Then I suspect that hola stores a memory address to the value of [4] (so at this point I suspect obj would be

   obj = {hello: [2], hola: #0x93490234}

Which is why I fully expected to see a 5 under obj. Can you tell me what's wrong with my visualization above?

Lastly, with the explanation, can you point out how the above example is any different than the following example (I understand how / why the below example works - just not the above example and would like to hear why the below works and the above doesn't).

var obj2 = {hola: [4]};
var obj = obj2;
obj2.hola = 5; //console.log(obj) will say that hola equals 5

Answer 1

Maybe this helps:

Lets distinguish between two concepts first: values and bindings. A value is a piece of data, like a string, number, boolean, object, etc. Every value is stored in memory and has an address.

A binding is like a container or label that holds an address.

• when assigning a value to a binding we are assigning the address of the value
• when accessing a binding we get the value stored at that address

Example:

var a = 42;

a is a binding, 42 is a value. Lets say 42 is stored in memory at 0x1, then a really holds the address 0x1.

When we are trying to read the value, e.g.

console.log(a);

we need to look at address 0x1 to get the actual value.

Now what happens when we "assign a binding to another binding", i.e. bar = foo?

var foo = 42; // 0x2
var bar = foo;

42 is stored at 0x2. So foo holds the address 0x2. When we assign a binding to another one, we simply copy the address that the binding holds. So after var bar = foo;, both foo and bar hold the address 0x2. If I assign a new value to foo, e.g.

foo = 21;

then I'm making foo hold a new address (e.g. 0x3).

This does not change the address that bar holds.

Exactly the same applies to object properties.

---

Mutable values

Now you might wonder "why does foo and bar both change in the following example:

var foo = [42];
var bar = foo;
foo.push(21);
// bar also has [42, 21]

Lets assume [42] is stored at memory location 0x4.

Here is how it is different to the previous example:

We did not assign a new value to foo.

Instead we referenced the array (at address 0x4) through foo and mutated it. Mutable values are values that can be changed in place, i.e. the bits at that memory location can change.

After calling foo.push, foo still holds the address 0x4 and so does bar.