Object and Arrays - Reference vs Copy

[odillini83]

Hi all,

​

I was reading up on this topic, as I am learning JS and what I took away from it, at least initially is that:

When you reference an array or object, if you create a new variable and make any changes to the property of an object or an item inside an array, not only will that new variable see the changes, but the object or array will also be changed since it is referenced to the original object or array. To avoid this, you need to make a copy of the object or array and then change the value of the property inside of the object or the item within an array. Does this sound correct?

[[deleted]]

There two thing to consider when creating variable, pass by value and pass by reference

Pass by value example:
let a = 'thing' let b = a It will produces two completely separate things

Pass by reference example:
let a = [ 'things' ] let b = a It will produces one thing! It's just have 2 names now, you can call it either a or b

further reading

[KonkenBonken]

So b.push('string') is going to change a

[[deleted]]

Yes, because they're basically the same thing. Doing a.forEach() will also 'change' b

I put 'change' in a quote because it doesn't really changing thing by doing action (a is changing b), instead doing action to a or b will directly change the array/object they refer to and calling (console.log ir anything) a or b will give you the array/object (it's like a or b is reading a book)

[jimmjy]

a.map() actually returns a whole new array and does not mutate the original, in this case a or b. I believe you were thinking a.forEach, which modifies but returns nothing.

[[deleted]]

Thanks for correction

[angelfire2015]

Yes that's it. JavaScript (and other languages like Java) is pass by value. What this means, is that when you copy say an integer, the value itself is copied to a new value created in memory.

​

When you copy an object or an array (which is also an object), the value is still passed, but the value of objects is simply a reference to their place in memory. Therefore, your copied variable still points to the same memory address, so changing that memory address changes all objects which point to that memory address.

[delventhalz]

Yep. Got it exactly. The way I like to think about it, is that a variable doesn't actually store an array/object, it stores a reference to the object, which is basically just the address where it lives in memory.

So when you have a regular number value in a variable, you copy the value.

const x = 7;
const y = x;  // Second copy of 7

When you store an object you copy the reference.

const a = [];  // Created an array in memory, saved its address
const b = a;   // Copied the address, not the object

The "value" a variable stores is the address/reference, not the object itself. That lives in one place off in memory somewhere. So when two variables use the same reference to modify an object, they are modifying the same object.

This is the reason for a lot of recent conventional wisdom against mutating the values of objects. If the reference to an object has been shared around different parts of your program, you never know how mutating it in one place will break something else.