Memory of Reference Values in Javascript

Question

JavaScript stores Reference Values in Heap memory and thus variables stores to a pointer/address. So, if we change original variable, it changes the assigned one as well:

var cols = ['red', 'blue', 'green']
var newCols = cols

cols.push('orange')

console.log(cols) 
// returns ["red", "blue", "green", "orange"]
console.log(newCols)
// returns ["red", "blue", "green", "orange"]

However, when I experimenting for reference types, I find out that, when I am using indexing for assignment and push method they act in not same logic which I did not expect:

var cols = ['red', 'blue', 'green']
var newCols=cols[1]
cols[1] = "pink"
console.log(cols)
// returns > ["red", "pink", "green"]
console.log(newCols)
// returns > "blue"  WHY?

But:

var cols = ['red', 'blue', 'green']
var newCols=cols
newCols[3] = 'orange'
cols.push('yellow')

console.log(cols)
// returns > ["red", "blue", "green", "orange", "yellow"]
console.log(newCols)
// returns > ["red", "blue", "green", "orange", "yellow"] WHY?

So, what is the logic ('the idea under the hood') here that, in one sample, it affects original, but in another it does not?

newCols in the second code is assigned the value - it does not "point" to a value — Bravo
– Bravo, Commented Nov 24, 2020 at 1:16

CertainPerformance · Accepted Answer · 2020-11-24 01:20:28Z

1

When you do

var newCols=cols[1]

you essentially take the reference to the value that cols[1] currently holds, and have newCols point to it too. For example, say cols[1], currently the 'blue' string, is at memory location #5432. Then doing newCols=cols[1] has newCols also point to #5432.

The array that cols is is also an array of references to memory locations. So ['red', 'blue', 'green'] could be thought of as [#987, #5432, #123]. Reassigning one of the indicies puts a new reference at that spot. After cols[1] = "pink", you can think of cols as now containing [#987, #333, #123].

The original item at #5432 - 'pink' - is not affected. newCols, which points to #5432, still points to 'pink'.

When you do

var newCols=cols

the whole array container is pointed to from two variables. Eg, both cols and newCols point to #55555. So mutating one will result in the other appearing to change as well.

(The "memory location" is a useful visualization, but it's not necessarily how it isn't how things work under the hood - this is just an easy way of thinking about it)

answered Nov 24, 2020 at 1:20

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Enzoenzo Over a year ago

it is much more cleaner for now, but its hard to grasp the idea in crystal clear. Is there any visual source that can explain graphical way exactly this issue? Thank you for your answer by the way.

CertainPerformance Over a year ago

I guess one could take the above information and make a video of it instead or something, or maybe one already exists, but I'm not going to make one - if anything isn't clear, just ask

Collectives™ on Stack Overflow

Memory of Reference Values in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related