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

Incorporating interactive buttons within Leaflet popups

When the component is initialized, the computed property is not being evaluated

I am looking for a way to add some color to the text within a div on my HTML page. Can you help me

Why am I encountering http://localhost:3000/api/auth/error?error=AccessDenied when implementing Google signin in my Next.js application?

Rails application experiencing difficulties in displaying the Raty JS plugin

Extract Information from a Website

Guide on retrieving the content type field value in Drupal and transferring it to a JavaScript file

Updating or swapping images using JavaScript and HTML

PHP: the images uploaded are not located within the designated folder

How can I retrieve the word that comes after a specific word in discord.js

Guide to setting up Firebase pagination in a NextJS 13 server component

Tips for emphasizing specific sections of text in CodeMirror utilizing substring positions

Understanding the JSON output received from the Servlet

The timeouts persist in firing and running even after being cleared and the component has been unmounted

Implement an AJAX function to prompt a save dialog before initiating the download process

What is the best way to retain the leading zeros when creating a new Number() in JavaScript?

Is there a way to prevent undefined properties when using .each in jQuery with a JSON object?

Unexpected request causes a dilemma during the karma test for an Angular directive

Employing parseFloat() and parseInt() functions together with regular expressions in JavaScript for converting a Comma Separated Values (CSV

Implementing Default Language in Next.js 14 for Static Export without URL Prefix: A Step-by-Step Guide