DEV Community

JavaScript-30-Day-14

KUMAR HARSH on June 14, 2021

JavaScript References VS Copying demo On Day-14 of JavaScript-30 we discussed a very important concept of JavaScript or any...

Read full post

peerreynders • Jun 15 '21 • Edited

This tells us when we created age2 using the age then a separate copy was made for age2

Not exactly. Compare:

const age = 100;
let age2 = age;
age = 200;

with

const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
let team = players;
team = ['Wes', 'Sarah', 'Lux', 'Poppy'];

and consider JavaScript data types and data structures:

All types except objects define immutable values (that is, values which can't be changed).

So age has a reference to the immutable 100 value. After age2 = age both have an identical reference to that 100 value‡. After age2 = 200 the name age2 has a reference to the new (immutable) 200 value. So the separate copy doesn't refer to the 100 value but the reference to the same 100 value. Initially both age and age2 have a reference to the same 100 value - just like team and players 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 as 100 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:

The first JavaScript engine represented JavaScript values as 32-bit words. The lowest 3 bits of such a word were used as a type tag, to indicate whether the value was an object, an integer, a double, a string, or a boolean (as you can see, even this early engine already stored numbers as integers if possible).

The type tag for objects was 000. In order to represent the value null, the engine used the machine language NULL pointer, a word where all bits are zero. typeof checked the type tag to determine the type of value, which is why it reported null to be an object.

With that in mind

This tells us when we created age2 using the age then a separate copy was made for age2

is correct. But what needs to be observed is that regardless whether age is primitive or non-primitive the same thing is "copied":

for a primitive value that thing is the value
for a non-primitive that thing is the reference to the non-primitive value

This leads to:

All primitives are immutable, i.e., they cannot be altered. It is important not to confuse a primitive itself with a variable assigned a primitive value. The variable may be reassigned a new value, but the existing value can not be changed in the ways that objects, arrays, and functions can be altered.

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.

KUMAR HARSH • Jun 15 '21

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.

peerreynders • Jun 15 '21 • Edited

that is how it works in other languages like C++

In C++ :

  int n = 5;    // this declares a variable, n 
  int & r = n;  // this declares r as a reference to n

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:

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable—just that the variable identifier cannot be reassigned.

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

maybe he wanted to keep things simple.

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.

KUMAR HARSH • Jun 28 '21

"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.

peerreynders • Jun 28 '21

Look, there are lots of sources that will say that I'm wrong (and perhaps I am) - for example:

When assigning a primitive value to a variable or passing it as an argument to a function, its content is copied.

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?:

Variables just point to values.

The "content is copied" mindset fosters the view that "variables point to the same memory address for their entire lifetime" - for example:

let x = 123;

// Content for variable `x` will always 
// live at address `#a` so:
// #a: 123

let y = x;
// Content for variable `y` will always 
// live at address `#b` 
// and content is copied, so:
// #a: 123
// #b: 123

y += 1;
// We only change the content for `y`, so:
// #a: 123
// #b: 124
//
// Note that the value at `#b` changed. 
// This violates the assertion 
// that primitive values are immutable.

Compare that to the "variables just point to values" mindset:

let x = 123;

// Create a new immutable value at memory location `#a` 
// and have `x` point to it: 
// #a: 123
// x: #a

let y = x;
// `y` needs to point to the same value as `x` 
// so just _copy the reference_:
// #a: 123
// x: #a
// y: #a

y += 1;
// Primitive values are immutable 
// so we create the new value `124` 
// and store it at memory location `#b` 
// and have `y` refer to it: 
// #a: 123
// #b: 124
// x: #a
// y: #b

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.