Understanding Pass by Reference within Objects through Extend in Javascript with underscore.js Library

Question

Understanding Pass by Reference within Objects through Extend in Javascript with underscore.js Library

When working with Javascript and using the extend function in the underscore.js library, I am curious about what happens in relation to memory. Consider this example:

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

I am puzzled by the fact that even after manipulating obj2, hola's value remains unchanged when inspecting obj. I expected the value to update because of pass by reference...

In my mind, here is a visualization of the process:

The extend function copies the key hola into obj:

obj = {hello: [2], hola: TBD}
My assumption is that hola now points to the value [4], hence I believe obj would be

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

This is why I expected to see a value of 5 under obj. Can you help me understand where my visualization might be going wrong?

Furthermore, could you explain why the above scenario differs from this simpler example (which I grasp conceptually)?

var obj2 = {hola: [4]};
var obj = obj2;
obj2.hola = 5; // Upon console.logging obj, it will display hola equals 5

javascript pass-by-reference

Answer 1

Answer №1

Perhaps this explanation will clarify things:

Let's differentiate between two fundamental concepts: values and bindings. A value represents data, such as a string, number, boolean, object, etc. Each value is stored in memory with a specific address.

A binding acts like a container or label that points to an address.

When we assign a value to a binding, we are actually assigning the address of the value
When we access a binding, we retrieve the value stored at that address

For example:

var a = 42;

a is a binding, and 42 is a value. Assuming 42 is located in memory at 0x1, then a essentially holds the address 0x1.

When we try to read the value, for instance:

console.log(a);

We look at address 0x1 to retrieve the actual value.

Now what occurs when we "assign a binding to another binding," like bar = foo?

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

The value 42 resides at 0x2. Thus, foo stores the address 0x2. When we assign one binding to another, we essentially copy the address held by the binding. Consequently, after var bar = foo;, both foo and bar point to the same address 0x2. If a new value is assigned to foo, like so:

foo = 21;

Then foo now holds a new address (e.g., 0x3).

This change does not impact the address held by bar.

The same principle applies to object properties as well.

Mutable values

You may be wondering why both foo and bar change in the following scenario:

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

Assuming [42] is stored at memory location 0x4.

Here's how this differs from the earlier example:

We did not assign a new value to foo.

Instead, we accessed the array (located at address 0x4) via foo and made changes to it. Mutable values can be modified directly, meaning the bits at that memory location can be altered.

Following the call to foo.push,

foo</code still retains the address <code>0x4

, as does bar.

Answer 2

Perhaps this explanation will clarify things:

Let's differentiate between two fundamental concepts: values and bindings. A value represents data, such as a string, number, boolean, object, etc. Each value is stored in memory with a specific address.

A binding acts like a container or label that points to an address.

When we assign a value to a binding, we are actually assigning the address of the value
When we access a binding, we retrieve the value stored at that address

For example:

var a = 42;

a is a binding, and 42 is a value. Assuming 42 is located in memory at 0x1, then a essentially holds the address 0x1.

When we try to read the value, for instance:

console.log(a);

We look at address 0x1 to retrieve the actual value.

Now what occurs when we "assign a binding to another binding," like bar = foo?

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

The value 42 resides at 0x2. Thus, foo stores the address 0x2. When we assign one binding to another, we essentially copy the address held by the binding. Consequently, after var bar = foo;, both foo and bar point to the same address 0x2. If a new value is assigned to foo, like so:

foo = 21;

Then foo now holds a new address (e.g., 0x3).

This change does not impact the address held by bar.

The same principle applies to object properties as well.

Mutable values

You may be wondering why both foo and bar change in the following scenario:

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

Assuming [42] is stored at memory location 0x4.

Here's how this differs from the earlier example:

We did not assign a new value to foo.

Instead, we accessed the array (located at address 0x4) via foo and made changes to it. Mutable values can be modified directly, meaning the bits at that memory location can be altered.

Following the call to foo.push,

foo</code still retains the address <code>0x4

, as does bar.

Understanding Pass by Reference within Objects through Extend in Javascript with underscore.js Library

Answer №1

Mutable values

Similar questions

Unable to successfully change the Span Class

The jQuery functions are unable to function properly when retrieving AJAX data

Tips for creating a zoomable drawing

What is the best way to show nested labels on separate lines simultaneously?

Unravel the ReadableStream object in nextjs 13 api route

Error in NextJS: Attempting to access a length property of null

What steps should I take to implement the features I want using Node.js?

Obtain the unique identifier of the chosen option using material-ui's autocomplete feature

What is the process for loading this image?

Customizing Magnific Popup: Changing showCloseBtn and closeOnBgClick settings during display

Importing multiple exports dynamically in Next.js

Storing JSON information within a variable

What is the best way to customize the functionality of the Done (node-dialog-ok) button in node-red when it is

Placing a Fresh Item into a Designated Slot within an Array

JavaScript - memory heap exhausted

Struggling to make React respond to button clicks without resorting to using addEventListener

Webpack fails to resolve paths provided by a JavaScript variable

Generate a blank image using the canvas.toDataURL() method

Performing an AJAX request to a form within a CSS modal

Next.js Pre-rendering Issue: Error encountered when trying to access properties of a null object