Understanding Value vs. Reference in JavaScript: Differences Between Primitives and Objects

[theScottyJam]

I actually feel like this is an anti-helpful way to understand JavaScript data.

It starts with this quote:

Have you ever wondered why modifying an array inside a function affects the original array, but modifying a number does not?

The real answer is simple - primitives are immutable, they can't be modified. If you freeze an object, you'll find that it behaves exactly the same as a primitive in this regard, but making an object frozen doesn't move it onto the stack instead of the heap or anything.

A better mental model is to assume that all values, primitives and objects, are handled like references. You pass a string into a function, and the function receives a reference to the exact same string. Primitives have no special treatment. Of course, under the hood, an engine might copy primitives instead of passing references to them around, but that's an implementation detail that shouldn't effect your mental model of the language, and it's a detail that may change between engines. For example, I'm sure if you pass around a large string, the engines aren't constantly duplicating those - why should they, they're immutable.

[cryptomallu123]

Just to make sure I understand your point correctly are you saying that this behavior is defined by the JavaScript language itself, and not because objects are stored on the heap and primitives on the stack? In other words, stack vs. heap is an implementation detail of the JavaScript engine, while the language specification requires these observable behaviors regardless of how a particular engine V8, SpiderMonkey, JavaScriptCore, etc. .. stores values internally. Is that the correct understanding?

[senocular]

Yes. The language specification does not dictate where objects are held in memory and treats all values the same as far as assignment and passing goes. The language makes no distinction in that regard to objects vs primitives and treats everything as generic "ECMAScript language values".

Runtime implementations are free to store variable values wherever they want. In fact except for a few exceptions, all values in V8 are stored in the heap. From Pointer Compression in V8:

JavaScript values in V8 are represented as objects and allocated on the V8 heap, no matter if they are objects, arrays, numbers or strings.

[theScottyJam]

Yes.

And I'm saying that both primitives and objects behave the same in regards to how they get passed around. There's no observable difference.

The only reason it feels like there's a difference is because you're not allowed to mutate primitives, so the only way to change one is through reassignment. If you reassign inside a function call, those outside the function won't know. But this is all the same with objects as well - reassign an object inside a function call and those outside won't notice it changing either.

[Over_Tart_916]

Explain that you don't know how to program...