JavaScript References VS Copying
demo
On Day-14 of JavaScript-30 we discussed a very important concept of JavaScript or any...
For further actions, you may consider blocking this person and/or reporting abuse
Not exactly. Compare:
with
and consider JavaScript data types and data structures:
So
age
has a reference to the immutable100
value. Afterage2 = age
both have an identical reference to that100
value‡. Afterage2 = 200
the nameage2
has a reference to the new (immutable)200
value. So the separate copy doesn't refer to the100
value but the reference to the same100
value. Initially bothage
andage2
have a reference to the same100
value - just liketeam
andplayers
initially reference the same['Wes', 'Sarah', 'Ryan', 'Poppy']
array.Once you understand that,
const
makes perfect sense.const
makes the reference to the value (not the value itself) immutable.Primitive values are already immutable. So once what
age
can reference cannot be changed - nothing can be changed as100
is already immutable.Similarly objects (and arrays) don't hold values but only references to values [1].
const players
simply means that we cannot change the reference to that particular array - but it has no effect on the references stored inside the array.[1] There is a TC39 stage 2 proposal - Record & Tuple - where values are stored directly inside tuples (
#[1,2,3,4]
) and records (#{x: 1, y: 2}
).‡ Update: What actually goes on is entirely up to the JavaScript engine though there is an interesting historical perspective:
With that in mind
is correct. But what needs to be observed is that regardless whether
age
is primitive or non-primitive the same thing is "copied":This leads to:
From a historical perspective it seems to be perfectly reasonable to be able to overwrite an "immutable primitive value" wholesale in order to reassign the variable.
Thanks for pointing this out and the detailed explanation, the instructor never mentioned it maybe he wanted to keep things simple and that is how it works in other languages like C++ so it never occurred to me to get into depth.
In C++ :
i.e.
n
is bound to one specific memory location but the value inside that location can be changed.r
is an alias that refers to exactly the same memory location.Now from const:
This is where it leaks through that JavaScript doesn't have "variables" in the sense of
but instead implements
Many learning materials do this because they begin with primitive values and it is felt that the extra indirection introduced by references is just going to confuse the beginning student. Which makes sense but this shapes the incorrect mental model.
By the time arrays and objects are introduced the notion of a reference needs to be understood anyway - and it is at this point that the mental model regarding variables and primitive values needs to be adjusted - which rarely happens and which leads to confusion later.
As
const
demonstrates - variable( reference)s behave exactly the same for primitive values and objects because assignment doesn't change the value but changes which value is bound to the name."This is where it leaks through that JavaScript doesn't have "variables" in the sense of
the name that refers to one and only one memory location which contains some value that can change
but instead implements
the name that refers to one and only one memory location which contains a reference to the value which the name is bound to at this point in time"
I would like to understand this in more detail, about how variables work, can you point me to a source where I can learn about this in greater depth.
Look, there are lots of sources that will say that I'm wrong (and perhaps I am) - for example:
While this superficially works as a mental model (especially if you are trying to avoid talking about references) it makes no sense if all primitive values are immutable - duplicating immutable values is simply wasteful.
From What Does it Mean that Primitive Values are Immutable in JavaScript?:
The "content is copied" mindset fosters the view that "variables point to the same memory address for their entire lifetime" - for example:
Compare that to the "variables just point to values" mindset:
The thing is the "variables just point to values" view simplifies everything because now variables work exactly the same for primitive and non-primitive values and it also explains the behaviour of
const
-const
makes the reference used by the variable immutable, so you're stuck with the same primitive or non-primitive value for the lifetime of that variable; however that doesn't affect the internal mutability of non-primitive values.That was some great explanation, thanks for taking out the time to explain it so clearly.
After learning React and Redux and about State immutability I finally understand this immutability concept.
👍
Thanks this would helps other enlightening some core concept of programming
Welcome
Thank you for the article
great
thanks