Variables & Arrays

[00:00:00]
>> Couple of good questions came up that I wanna address around arrays. When we, Declare variables pointing to arrays, We said that JavaScript creates, conjures up, let's say, an array object and then does whatever we tell it in terms of what should be pointing to that object. So let's look at an example and think through what's gonna happen.

[00:00:32]
So let's say I declare a variable called array1 that's an array with 1, 2 and 3 in it, yeah? Okay, so the value of array1, hopefully, unsurprising, is gonna be this array 1, 2, 3. Now, what happens if I declare a new variable array2 and assign it to array1?

[00:00:51]
What do you think the value of array2 is gonna be after I run this line? The value of array2, we're gonna guess it's gonna be-
>> The same array, the one, two, three.
>> An array 1, 2, 3, yeah. Okay, great. Now where things get tricky is what happens now if I change or mutate array1, let's say I put at array1 index 1, right now it's 2, as we expect, but let's say that I change whatever is at index 1 and I make it 4.

[00:01:25]
So now what do we expect array1 is gonna be?
>> One, four, three.
>> 1, 4, 3. Now the question is what is array2 gonna be? What do you think? Guesses? 1, 2, 3, so maybe, which we saw before, we saw earlier that array2 was 1, 2, 3.

[00:01:49]
So maybe it's gonna still be that. Any other guesses? Let's find out. Array2 has changed also. Array2 is 1, 4, 3, not 1, 2, 3 as it was when we asked earlier. So what is going on here? Let's go to the whiteboard. So when we said let array1 equal array 1, 2, 3, JavaScript is gonna make an array1 variable.

[00:02:32]
It's gonna conjure up an array. And for now I'm just gonna put some values in it with 1, 2, 3. This is shorthand for all that stuff that we drew out earlier. Let me go back. Let's not do shorthand. Let's really talk about it. So JavaScript is gonna declare variables, it's gonna create a variable array1 and then it's gonna conjure up an array.

[00:02:58]
And that array is gonna have certain indices, 0, 1, 2. And it's going to put whatever we said to put in there, like the numbers 1, 2 and 3. Sorry, It's gonna point array1 at that array. So far so good. Now, when we say let array2 equal array1, what's gonna happen?

[00:03:35]
JavaScript is gonna create a new variable array2. And then we're gonna say equals array1. Now what we said that happens after that assignment operator, that equal sign, is that JavaScript is going to evaluate the expression to the right of the equal sign. So whatever we put after the equal sign, JavaScript is gonna evaluate it and figure out what that value is.

[00:03:59]
And in this case, it's gonna say, array2 equals array1. All right, let me go find array1, okay? It's a variable here, it points to this array. And let me now create a new association, a new link, a new pointer from array2 to whatever the value of array1 is at this moment that I am assigning this variable.

[00:04:32]
So this means now that we have two variables pointing at the same array value. Since arrays are mutable values, they can be changed. So that means when I now say array1, brackets 1 equals 4, what is JavaScript doing? Well, it's going in, it's changing what is at array index one and it is making it, Now be the number four instead of the number two.

[00:05:17]
What happened though is that I manipulated that same array that both of these variables are pointing at. So now array2, we haven't done anything to this arrow here that links array2 to this same array. That's still there, we didn't change that at all, it's still pointing to the same array that we have now messed with.

[00:05:42]
And this is where mutable data gets tricky, right? So this is part of the reason why working with immutable data can be less dangerous, [LAUGH] let's say, because in this case maybe I meant to only change the array that array1 is pointing to. So maybe what I should have done is actually created a whole new array for array2 that had the same values.

[00:06:05]
And there are a few ways in JavaScript we can do that. We're not gonna have time to talk about the details, but suffice it to say that in this case, since I pointed both variables at the same array, whenever I change it, that means that whatever the value is of both of those variables is also changing.

[00:06:23]
Now, interestingly, what do you think happens if I use const instead of let? Do you think anything changes? I'm seeing some shaking heads. No, exactly. So remember all const does is it changes whether or not we can change these arrows. So if I had declared const array1 and const array2, that means I can never reassign those pointers.

[00:06:48]
I can never change what those arrows point to but they still point to the same object, and I can mutate that object because it's an array, and arrays are mutable. So even if I had used const, the same thing would be true. Cool, awesome, awesome question asked in the classroom.

[00:07:07]
We also had another question asked which was about const and let. Too, would you mind re asking, you had asked me a question around const and let.
>> I've always been told to use const for arrays,
>> So, should we always use const for arrays? The thing about const and let affects the arrows, it doesn't affect what they point to.

[00:07:32]
So whether it's a string or whether it's an array or whatever, the rules are the same. I would not say that there is a rule that if you're working with arrays, you have to use const, not true. Sometimes you might want a variable that you need to change what it points at throughout your program.

[00:07:50]
But I would say that in general, with let versus const, unless you have a good reason to expect that you're gonna need to change one of these arrows later, that you're gonna need to maybe, based on decisions you have to make in your code, which we're gonna look at later when we talk about conditionals.

[00:08:08]
That maybe at some point you might need to change what array1 points at, unless you have a good reason to expect that you're gonna need to change those arrows, don't use let, use const instead. So I would say default to const unless you have a good reason, in which case let is fine.

[00:08:26]
But what the values are that you're assigning those variables to don't really matter, let and const affect the variables and their arrows. They don't affect the different types of values you're working with cuz as we said, JavaScript does not have a concept of a variable only for a particular type of value as some other programming languages do in JavaScript.

[00:08:48]
It doesn't care where those arrows are pointing to, what type of thing it is. What it does care about is whether or not you're gonna need to change those arrows later. So unless you expect you will use const and make those arrows permanent, make them immutable.