Immutable Variables & Values

[00:00:00]
>> Now the question is, what happens when we use const to remember a value that itself is mutable? Like an array, we said an array can be changed, right? So let's take a look at this example, we have a line here in line one const operands, which is the fancy word for stuff an operator does stuff to.

[00:00:27]
[LAUGH] Technical terms here [LAUGH] so, operands is an array with 4 and 6 in it. And then, sum is gonna be operands[0] + operands[1], so what do you think the value of sum is going to be?
>> 10.
>> 10, okay, and both of these are consts, but when I am working with an array, we said that we can change the array, right?

[00:00:52]
So, I can replace something in the array, for example operand [0] = 5 what is that gonna do? This is the question, is it going to listen to the array being mutable, or is it gonna listen to the const being immutable? What is JavaScript gonna do here?
>> I figure it'll let it overwrite the 4 with the 5.

[00:01:16]
>> So, we have a couple of guesses that JavaScript is gonna be okay with replacing what was previously at index zero which was a 4 with the new thing we want which is a 5. Any other guesses to what's going to happen here? And then the question is if we asked for a new value newSum, it's doing the same operation as before.

[00:01:39]
It's looking at operands [0] and adding it to operands [1], question is what is that gonna be? So let's take bets, what are we betting on?
>> 11.
>> 11. All right, we got a couple of dollars on the 11 horse in the race here, any other guesses, anybody think it's gonna stay 10?

[00:01:59]
>> Maybe 15, it wouldn't matter [LAUGH] even though, would it?
>> I mean with JavaScript sometimes you never can tell when it's gonna do something completely unexpected. All right let's go through it line by line, so operands [4, 6] let's just double check, great. Okay, then we're gonna get our sum and we should expect it to be 10, all right, so far so good.

[00:02:21]
Now moment of truth operand [0] = 5, okay. The value of this whole expression is just evaluated to the value I was asking it to do. Remember we said before JavaScript will even do sometimes when it hasn't done anything. So, the question is, what is newSum gonna be?

[00:02:41]
Let's find out, it is indeed 11. So, let's go back to our whiteboard and talk about what happened here. So, we said, let me just erase that variable, we said that when we create const variables, we create an indelible link to the value. So, we had here, I can't remember what I called the operands, okay?

[00:03:13]
We had operands declared with consts that points to an array, with some stuff in it. And that association is immutable, operands is always gonna point to this array. But we say that arrays themselves JavaScript can do all kinds of stuff with, and it can make changes to what is in that array.

[00:03:38]
So initially, this was a sorry, I think it had just two things in it and it was 4 and 6. And then we said, hey, JavaScript, whatever was at index zero previously Right here, there was a little index 0, my goodness. Right here, there was little index 0 pointing to 4, whatever was there point it to something else.

[00:04:10]
In this case, there's a 5 over here somewhere in JavaScript land, and what I want you to do is forget what was at index 0 before and make the new thing at index 0 be 5 now. And you can just forget about that old index 0, so even though the array itself hasn't changed, we had the one there too, we haven't done anything to it.

[00:04:41]
Even though the array itself hasn't changed, the notion of what's inside of it has, so the array is mutable, we can still mess with it. But operands will always point to that particular array, we can't for example, reassign it to a new array that we've created with contact, for example, does that make sense?

[00:05:03]
So, we have to distinguish here between the immutability of const variables and the mutability of values that we might assign to them. So it is possible to have an immutable reference, an immutable pointer, immutable arrow to a mutable value. So we can still mess with the thing, the array in this case, cool?

[00:05:27]
Gotta love computers, they're super weird sometimes, yeah, all right. I will make this statement, [LAUGH] which is that, in general if you want your life to be as easy as possible when you have the choice keep things immutable. I have another course on Frontend Masters called functional programming first steps where we talk a lot more about this about why immutable data is generally a programmer's friend and why mutable data can be tricky.

[00:06:00]
Can anybody guess at why I might say that it is generally better if you have the choice. It is generally better to work with immutable data and variables as much as possible, any idea why that might be why might I say that?
>> Because it probably breaks a lot of processes, if an underlying value changes-

[00:06:26]
>> If an underlying value changes and you didn't expect it to change because you thought that it was gonna stay that way forever. And maybe your co-worker or you in the future that forgets what happened goes in and changes it in a way that you didn't expect. You're gonna have a bad time, you're gonna get bugs in your code, you're gonna have unexpected, undefined and things like that.

[00:06:50]
So, Immutability is really helpful in a lot of ways and that's why for example in functional programming which is something we're not gonna talk a ton about here. But you could take a whole bunch of other courses out there including mine on Frontend Masters, but there's other courses on Frontend Masters too.

[00:07:05]
Immutable data is a way to make sure that you're not accidentally gonna shoot yourself in the foot. It's a way to make sure that that things are not gonna change out from under you. Now we don't always have the choice, for example in JavaScript it's a little tricky to work with an array that you can't ever mutate.

[00:07:26]
There isn't really a built-in concept for that, there's an asterisk on that, there are ways that you can sort of make sure to freeze an array, put it on ice so that you can't mess with it. But in general, if you have the choice between, let's say, working with lead and working with const.

[00:07:46]
And it doesn't matter because you don't think this is ever gonna change this value, use const.