Mutable & Immutable Data Exercise

[00:00:00]
>> Do these do the same thing? And now, these are a couple of things that we've seen so far, push and concat. So let's take a couple of minutes and think about it, and then we'll come back and talk about it. And feel free to try it out in your console.

[00:00:23]
In this first example where we're pushing something onto the array, we kind of saw this before, so I'm maybe not gonna type it all out. But, Let's find out, what is the value of numbers1 after I push(4) onto the numbers array that previously had 1, 2, 3? What does the value of numbers1 then look like, yeah?

[00:00:49]
>> It's an array of 1, 2, 3, 4.
>> Okay, so as expected before, we saw examples of this, right? When I call numbers1.push(4), it put something into the array that I had with numbers1, right? So numbers1 now is different than it was on the first line, numbers1 now has 4 in it, also, so it has 4 things.

[00:01:15]
And result1, did folks look at the value of result1? What did we say push returns? Yeah, so in this case, it returns 4, which is a little confusing, cuz it's also the number that we pushed in there. But it returns the new length of the array after it did the change that you asked for, after it added something to it.

[00:01:38]
Okay, now numbers2, this is a little bit different, so let's talk about it. All right, so I've got my numbers2 array, let me just declare this. So we said concat does what? Concat, we said it concatenates two arrays, or it kind of merges them together. Okay, so now, if I run this concat, the question is, what is the value of result2 gonna be now?

[00:02:14]
So push returned the new length of the array, what does concat return? Let's try it out, let's ask for result2. So result2 gave us this array with four things in it, which is what we were trying to get. Question is, what happened to numbers2? Was numbers2 changed or unchanged?

[00:02:37]
>> Unchanged.
>> Unchanged, so if I ask for numbers2, it still is just 1, 2, and 3. So concat did not actually change the original array that I called it on, instead, it created a new array. So let's go back to our whiteboard and talk a little bit more about variables.

[00:03:08]
So yesterday, We discussed how variables points to values, yeah? So when we Created our, what did I call it, numbers2, all right, when we defined it, we said, let numbers2 equals 1, 2, 3. Can anybody walk me through what happened? So we said, let numbers2 equal array 1, 2, 3.

[00:03:44]
The let part is going to tell JavaScript, hey, Make me a new variable, call it numbers2. Okay, then what happens? Paul, do you wanna, maybe, walk me through?
>> Yeah, so, it actually enters a new value in there of an array of 1, 2, 3.
>> Okay, so it's gonna conjure up a value somewhere, an array value, that has some stuff in it, in this case 1, 2, 3.

[00:04:13]
>> And then it's gonna do a pointer from numbers2 to that new array.
>> And then it's going to point from numbers2 to this array. Okay, so this is essentially what is happening when we think about it usually, in our kind of our everyday lives. Another way, though, that we could think about what's happening, is that actually, when I say, hey, JavaScript, make me a new array.

[00:04:49]
It's kind of creating an array object with, I don't know, maybe just kind of a notion of an array here. And then we're saying, in that same line, we're saying, what we want in the array is 1, 2, and 3. And so there, it's kinda saying, okay, now I have some indices in the array.

[00:05:14]
And this is going to correspond to some numbers that I'm conjuring up elsewhere in my concept of values. So, what we have is kind of an array that each of the indices is going to point to a different value. And in JavaScript, it sees this array as kind of one value, one mutable value that could be changed.

[00:05:38]
So, what happens then, when I say, numbers2.push(4)? Well, JavaScript is gonna say, okay, numbers2, let me go see what that is, follows the arrow, finds this array, and then it says push. Okay, let me add on a new index for a new last thing, and insert a reference to whatever this new value is, that I just pushed on.

[00:06:12]
This is not going to change the object, the array object here, though, array value that numbers2 points to. It's still pointing to the same array, we've just changed the values inside of that array. What happens when I call numbers2.concat is different. In this case, when I call numbers2.concat, JavaScript is sort of saying, okay, numbers2, let me go find that.

[00:06:42]
Okay, this is this array. Sorry, so in our example, we haven't added anything on. So numbers2 was 1, 2, 3. When I call concat, JavaScript is going to conjure up a new array object, put in all of the stuff that was there before in the numbers2 array. In this case, that's going to come up and be these values, 1, 2, and 3, that were in the array before.

[00:07:18]
And then we're going to concatenate that with this little array that we had created, which just had 4 in it, which only really exists in the time that I'm running this code. And JavaScript is going to say, all right, now point me to whatever value was in that array.

[00:07:38]
So now we have a new object that has, at index 0, 1, at index 1, 2, at index 2, 3, and at index 3, 4. But it is a different object than our original numbers2 object. And so, what we then did on the rest of our line was we said, call that results, what did we call it?

[00:08:04]
result2, And now result2 is gonna reference that new object that JavaScript created. So this is getting a little bit complex here, but suffice it to say, that in our JavaScript's brain, these are two totally different operations. To us, they both result in an array that has 4 things in it, but for JavaScript, these are two totally different things.

[00:08:30]
And it's important to note that concat is not going to change anything about our original array object, it stays the same. Whereas push is going to manipulate that original array to be something else. If this is not feeling super natural, that's because computers don't think like us, and that's totally normal.

[00:08:56]
So we will get more and more used to this as we work with more complex objects. But this has implications for what happens when we call certain spells on these arrays. We need to make sure we know whether we are manipulating the initial array, the original array, or whether we're creating a new one.

[00:09:19]
So push, for example, is one that mutates the array. Or another word you might hear for this, is that it changes the array in place. Meaning it changes the array without touching it, the array stays in place, the array stays where it was. But other actions like concat, create kind of a new, we could say, copy of the array.

[00:09:43]
Well, there's a little asterisk on that, it's a little complicated. But, essentially, they create a new copy of the array that gives us a new thing in the value universe, as opposed to messing with the original thing that we had. And so, our good friend MDN is gonna be the place to go if you wanna find out whether one of these string operations changes the array, or gives you a new one.

[00:10:11]
So, for example, if we go through our concat documentation, it says, this method does not change the existing array, but instead returns a new array, cool? We can have variables that can or cannot be changed, themselves. The variable itself can or cannot be reassigned to a new value.

[00:10:35]
So let's walk through, when we declare a variable with let, in the first example on line 1, as we saw before, where we're creating a new variable, we're assigning it to the string, original value. And then on the second line when I say, letVariable equals string, "new value", after that runs, what is the value of letVariable gonna be?

[00:11:02]
>> New value.
>> New value, okay, now what happens in the second example, if I declare a similar variable with const? What do you think is gonna happen when I run that second example code?
>> Error.
>> Maybe an error. So we said that const creates a variable that can never be changed, variable itself is immutable.

[00:11:27]
Or if we go back to our whiteboard, we could say, when we had, Earlier, We had a letVariable, That we wanted to point to, I don't know, some string. We'll just call it the string let, and we created a pointer from letVariable to that string. And then when we reassigned letVariable to, let's say, what's called new string, I think, what happens?

[00:12:05]
JavaScript conjures up the new string, and then what happens? Can anybody remind me, Paul?
>> Moves the pointer, so it's pointing at that new variable.
>> Exactly, so it gets rid of the old pointer, and now, it's gonna create a new pointer or a new link, we could say, between the letVariable name and the new value.

[00:12:27]
But we said that if we create a variable with const, We have to declare and assign the variable at the same time. So in this case, maybe we assigned it to a string, or I think we called this original or something like that, doesn't really matter. We created an association between the constVariable and the, let me, sorry.

[00:13:03]
We created an association between the constVariable and the value that we assigned it to, that is sort of like an indelible fact about this variable, it's kind of like part of the variable's existence, that it points to that value. And so, if then I try to reassign the variable, JavaScript is gonna say, I can't do it, not gonna happen.

[00:13:30]
This value is always gonna be the value that it was when I assigned it, originally. So we could almost say that letVariables, themselves, the variable and what it points to, is mutable. Whereas in constVariables, it is not, we cannot change it. So the question is, what happens when we try?

[00:13:50]
And that's where we can find out by messing with stuff in our console, our good old-fashioned trick here. So we have constVariable, then we're gonna try to reassign it, and we're gonna get an error. JavaScript is like, I can't do that, I can't reassign to a constVariable. It's just not gonna happen, cool?

[00:14:11]
So JavaScript, in programming in general, the notion of mutability or whether or not things can be changed, is really important to keep in mind and to think about.