So there’s a point to be made here, I think. And it can be confusing, until you run into the problem and tear it apart, as it seems you’re doing right now. This is a round-about conversation, but if you stick with it, this will make sense.
First, there is a consideration of “immutability of data”. When you create a variable, regardless of what gets stuck in that variable, it is assigned a place in memory. Doesn’t matter if it’s a primitive value (a String, Number, Boolean, undefined, to name a few) or a non-primitive (non-primitives are Arrays, Objects, Sets, Maps, and the like). Once something gets put in memory, that particular place in memory is that thing. If we do
const myVar = "A proper copper coffee pot";
… we have created that variable myVar, and we have pointed it at a particular part of our system’s RAM where the given string has been placed, and (because we used the const keyword) we told javascript that this variable can’t be pointed to a different place in memory. If we had done
let myOtherVar = 'Which wrist watch is the Swiss wrist watch?";
… that one, we can re-assign. And in changing the value of the variable, what we’re actually doing is telling it to point to a different place in memory. Once it’s been connected to a new value, the old value is no longer being referenced, and the browser can clean it up, making that reference available elsewhere.
Now, I said there was a point, and this is it. If we’d done
const myArray = ['I', 'am','the','very','model','of','a','modern','major','general'];
… that does the same thing - it creates a variable, and it points to a specific point in the browser’s RAM, which references the array (non-primitive). But the pointer is slightly different. While we cannot change the reference to the array itself (we can’t do myArray = []; and assign the entire thing a new value), we can change the array. The const only affects what the variable itself points to, the array “container”, not its contents. We can change that inner array, or an object, or any non-primitive, because its inner workings are an entirely different set of memory locations.
It’s a long-winded explanation, but if you’ve stuck with it, here’s the point: when we pass a variable (or a value) into a function, we aren’t passing that value. What we are passing is a pointer to that memory location.
If we pass strings into a function, then we’re passing a memory location that points to a fixed, immutable chunk of memory. If our function changes the string, it’s a new thing, and it’s a different position in memory. Thus, the original primitive value isn’t changed by our function.
If, however, we pass an array, or an object, or an HTMLCollection into our function, what we’re passing is a reference to that non-primitive things object container. If we change anything in our function, without using some mechanism to clone that into a new memory location, we’re working on the original reference. We can do that, because we aren’t altering the original, immutable, memory position.
So, looking at the function you showed, lines 9, 10 and 11 are (it seems) where you’re asking the question.
In line 9, we tell console.log, “get whatever’s in the memory position that testArray points to, and pass it into this JSON.stringify() function, and display the result”. It isn’t changing the array, JSON.stringify() simply takes that array and creates a new, immutable String that describes it. A new memory location, completely new data, the original untouched.
Line 10, we tell the browser “Hey, now take that same memory location, and pass it into our function, and show me the result.” We don’t know that it’s going to change the array. When it does, because we passed in the memory location (rather than a new copy of our array), we are editing the internals of our original Array (we aren’t changing the primary reference, only editing internal references, which is okay). But the original variable outside the function still refers to that same memory location, thus keeping a reference to our changed Array.
And line 11 says “hey, I know you just got the stuff in the memory location testArr points to, but get it one more time and pass it into JSON.stringify() and show me what that does again.”
So the reference in testArr has stayed consistent, pointing at a given memory location that contains an array. When we change that array in our function, the memory location hasn’t changed, so testArr still points at the same Array container, even if its internal data has changed.
If I read your question right, I think that’s kind of the confusion you’re encountering. The function and the variable both share a reference to the same place in memory, and if one changes it, the other can see it.
