Reference vs Value

[00:00:00]
>> WebDevSimplified: Now this next topic that I want to talk about is, like I mentioned, either the most confusing or the second most. It's kind of hit and miss with the other one, but that is understanding reference versus value. And you may have seen at one point where I used variables that were arrays or objects defined as constants, and I was still able to change certain things about those arrays and objects. And this is because of the way that reference versus values work inside of JavaScript.

[00:00:22]
So we first need to understand what a value type is because in JavaScript you either store something as a reference or as a value. And a value type is relatively straightforward. That's what all the primitive types in JavaScript work as. So when we create a variable A, we give it a value of 10. Create a variable B, we give it a value of high. So here's a little table kind of referencing what that looks like.

[00:00:40]
We have a variable A and we have a value of 10 defining what the value of that is. And value types in JavaScript are simple because whatever the value is is just the thing that's in this value column inside of our table. So it's very easy to see what the values are. And if we copy values, for example, I create a variable called A, set it to 10, and I create a variable B and I set it to A. All that happens when you create a variable from another variable is it takes whatever is in this value column and it copies that and puts it in the value column for the new one.

[00:01:09]
So now the value of B is 10 at this point because that's the same value as A. Then when I add 1 to B, B now becomes 11, but A still stays as 10 because they're not the same variable. They're two different variables with two different values. So the important thing to remember is when you create a variable from another variable, all you do is you take whatever is in this value column, copy it into the new variable location.

[00:01:32]
Now this is the same for how reference types work, but unfortunately what they store in that value column is different, which makes them work much different. And arrays and objects are the two main reference types you're going to be worrying about inside of JavaScript. So here we're creating an array called C with the value of 1 and 2, and you'll notice my table down here is a little more confusing because now we actually have 2 tables.

[00:01:52]
First, we have our variable and value table. Our variable is C and this value here you'll notice is something entirely different. This is just essentially a location in memory where we're storing this value, and you can see at that memory location, these two sections match each other. That's going to be where the actual data is stored. You could almost think about this as a hotel. For example, I have a hotel key and that hotel key references a room in that hotel.

[00:02:17]
I can go to that room and I could open up that room and see what's inside of it. So the hotel key is essentially this variable C and it references a single room that I could open. This is that room that I can open. Then whatever's inside that room, maybe the bed, the shower, the bathroom, all that stuff, that's going to be the data stored at that location. So this memory location thing is almost like a room inside of a hotel that you have a key to access.

[00:02:42]
Now, like I said, when you assign a variable to another variable, we copy what's in this value column right here. So if we come down a little ways, you can see that we have this variable C set to the array 1 and 2, and I have another variable called D set to the value of C. So what happens is when I create D, I take whatever in the value column for C, which is this key for my hotel, and I copy that into D.

[00:03:05]
That's essentially the same as creating a second key for the exact same room. I now have two hotel keys that open the exact same room. So if I go into that room with key C and I change something in the room, I get rid of the bed, and now someone else goes to that same room with key D that we just created, the bed will not be there for them either because they're both going to the exact same room. So the way that these reference types work is we copy the value, but the value just points to somewhere else.

[00:03:32]
We never actually change what the data is over here. So when C changes or when D, I'm sorry, becomes the value of C, it just copies the reference to where all that data is stored. So if I change D, it not only changes what D sees, but it also changes what C sees because they both point to the exact same location inside your computer's memory. And again, it's just like the hotel analogy. If two people have keys to the room and one of them changes something in that room, when the other person goes up to that room, it's going to be changed for them because they both reference the exact same place in memory.

[00:04:03]
Now the way that you get around this is if you create a brand new array. For example, here I have an array 1 and 2, and D is an array 345. These are two brand new arrays that I created, so they reference two different locations in memory. It's two different hotel rooms. One person's in hotel room A, one person's in hotel room B. They're entirely different from each other. So you can see here the value for these are referencing two different room locations, and at that room location or memory location is where we have the actual data being stored.

[00:04:32]
So this can be quite confusing to understand because you may think, OK, I'm copying over this value, it should just copy the array 12, but instead it's just copying a reference to that array, so they can both modify the exact same thing. This also comes into confusion when we start comparing things because the way comparisons work in JavaScript doesn't matter if you use double equals or triple equals, is it compares what's in this value column.

[00:04:53]
It never checks anywhere else. It only checks that value column. So we have two arrays, both of them have a value of 1 and 2, just very simple, 2 arrays that are almost exactly the same. But since when you create an array in JavaScript, it creates a brand new piece of memory, A and B have different values. While the data stored in both of them is the same, they're pointing to two different locations.

[00:05:12]
Back to the hotel example, many hotels have different suites or types of room, and each room is going to look exactly the same, but they're different rooms. For example, room 510 is going to be different than 512, even if they have the same content inside of them by default. So while they both have the same content, they're technically pointing to different rooms. So when I do a comparison in JavaScript to compare, is A equal to B, again, it checks this value section.

[00:05:37]
So is my room the same? Someone in room 510 is in a different room than the person in room 512, even if all the stuff in their room is exactly the same. So when you do these comparisons, JavaScript says, hey, are your values the same? And since they technically have different values, this is going to return to us false. And again, it doesn't matter what type of equals comparison you do, it'll always return false.

[00:05:58]
And this is again because we only check this value column right here. Now the only time you can get equality to return true is if they both have the exact same value. So for example, if we create an array with 1 and 2 as the values, and then we take that same A array and set it to B, we know that that copies that value column, so they still point to the same location in memory. The values on both of these are exactly the same, so now our equality is actually going to return true.

[00:06:24]
And the important thing to note is this works the exact same way with objects or with the arrays that we already talked about. You can see here person one has a name of Kyle and person 2 is set to person one, so they both are pointing to the exact same location and memory or essentially they have the same key to the same hotel room. If I change person 2 to make the name Joe, I not only change person two, but I also change person one cause they're both referencing the same location and memory.

[00:06:52]
They also have the exact same reference so that value columns the same, so they will be equal to each other. If I created a brand new person though that has the same name and it looks exactly the same, technically it's still a different location in memory, so this is going to return false when I do that reference comparison. We're going to move on to talking about how constant with references work because you've seen that constants are for defining constant variables that cannot be reassigned.

[00:07:16]
But the key is it only prevents you from reassigning the value column. It doesn't care about anything else. So if I create an array that's a constant array, constant array equals 12, I can actually change what's inside that array by calling .push 3 because by pushing values to my array like this, I'm not changing this value column. I'm not changing what room in the hotel I have. Instead, I'm just putting something in my hotel room, and they're perfectly OK with that because constant just says you have to stay in the same hotel room in our reference case.

[00:07:45]
So if I have a key to my hotel room, I can go up there, I can drop my backpack, and I can leave, and that's perfectly OK because I have the same hotel room still. But if I try to change my hotel room, for example, here, I'm redefining my array with a brand new array. Well, now I'm trying to completely change what that memory address is because whenever I create an array, that creates a brand new memory reference.

[00:08:07]
So that's trying to update this value column. In JavaScript, the only time the value column ever changes is when you use this equal syntax to redefine or create a variable from scratch. So that's the important thing to know is const just prevents you from redeclaring a variable as a new value, but it doesn't actually prevent you from changing the inner workings of that value. For example, adding to an array or changing the properties on an object.

[00:08:31]
Functions also work similarly with how these references work. So if I pass an array to a function, it doesn't just copy the array and pass it up. Instead, it passes a reference because it passes that value property up, so it still references the exact same array that I had before. So here I have a numbers array 123, and I want to add an element to that array. I pass in numbers and I pass in 4, so you can see here that array is being passed in and I'm just adding an element to it.

[00:08:56]
Rather straightforward, I'm adding an element to my array, but what happens is it actually modifies this numbers array directly because they both reference the same location. Even though I'm passing this numbers array up into array here, it's just passing that value, that reference that says, here's a new key to your hotel room. So now when I go up into that hotel and I add something inside of it, everyone that accesses that hotel is still going to see that brand new item inside of it.