Variables

[00:00:00]
>> Kyle Simpson: Now I've said this several times, so let's get into what is a variable? A variable is like a place in memory, you know in your computer that it has memory, what we call RAM. And as a program is running, it uses up and it stores bits of information all over the RAM.

[00:00:15]
And we don't know where it's being stored. As a matter of fact, our program has no idea where it's being stored. The system, like our Mac OS or Windows, it's figuring all that out for the program. And so we need a symbolic representation, kind of like a pointer or an address or whatever sort of metaphor you want to have in your head.

[00:00:35]
It's a representation of some place in memory, we don't really care where it is, but we know that our number 42's gonna be over here. And we know our string tile is gonna be over here, and the way we do that inside of our program is we give those things useful names.

[00:00:51]
So we already saw this at the outset in the intro, but if I say var name = "Kyle Simpson", name is going to point to somewhere in memory. We don't know and we don't even really care where but somewhere in memory and it's gonna say, the equal sign there is going to take that string and put it in that place in memory.

[00:01:10]
And then later if we want to access that, we would use the variable name again, and it would give us that string back, it would go and find it in that particular place in memory and give us the string back. By the way, just a quick note on operators.

[00:01:25]
You'll notice here we have a single equals, that's called the assignment operator. And the single equals being used for assignment is why we have to do double equals for comparison. I know some of you might have been thinking, why don't we say a equal b, or 42 equal 42?

[00:01:42]
Well it's because we have the single equals reserved for assignment in our language and that's why we have double or a triple equals two comparison. Okay, sometimes trip people up where they meant to do one equals and did two, or they meant to do two and did one, so something to be aware of.

[00:01:58]
Line 3 and 4 are slightly different than line 1 because in line 1, I both said that I needed a variable of the name name, but I also assigned it a value, right away. I said, go and create this location in memory, and give it a value. Line 3 does something slightly different.

[00:02:15]
It says, hey, go give me some area in memory, but I don't know what I want to put into it yet, so just give it one of those empty values. In particular, it's gonna give it the undefined empty value. And then later which just happens to be line 4, we're gonna give it a value of 39.

[00:02:31]
That's how old I am at the time right now. So we're putting in the value 39 into that location of memory that is referred to in our program as age. Line 6 does something very similar but it takes an array of values. And so, the program and the operating system would have to go figure out a bunch of places in memory, one for the quote Brandon and one for quote mark and for any other values that were on that array.

[00:02:56]
And I've got a section off all this memory and then have one reference to that whole section of memory. And that reference is what we call friends here. Now line 8 does something interesting and it's tempting to sort of skip over. But before we even look at the friends.length or the friends with that square brackets of 1, let's look at the console part.

[00:03:17]
Because that's also a variable, console is referring to a special built in thing that the JavaScript environment is given by the browser or by Node.js or wherever you're running your JavaScript, it's given this thing called console. It's a special area in memory with a very special set of behaviors attached to it.

[00:03:39]
And when we do that dot operator there on line 8, we're basically saying, I want to go and access something in that location at a certain name called log. Well, log happens to be a method, a function, that can print things to our developer console. So we're actually saying go find console, wherever that is in memory, and then access it.

[00:04:01]
And then when we say .log, we're saying now access something inside of it. And then we are telling it what to print to our console and that's why it says friends.length, we're saying go find the friends thing which we know is an array from line 6. Access something at that location which isn't just like a position like zero or one, but it's called the property.

[00:04:27]
Remember arrays are objects so they can have properties. And one of those special properties is the length. And that length would tell us that our friends array at this time has two element, it would say length 2. So we're saying print whatever that value is, and in this case, it would print the value 2 to the developer console.

[00:04:48]
And then line 9, we do something very similar, we say console.log. And then we say friends[1]. Remember I've referred to the idea of arrays and we declare an array like line 6 with square brackets, but when we say a variable and a bracket immediately after that, now we're saying access.

[00:05:07]
Line 6 is creating an array and line 9, the bracket 1 there that's accessing something inside of that, kind of like the dot operator, but in this case, we're accessing in the numeric position. So friends[1], that's gonna return Marc, not Brandon because the array is zero indexed. So these are how we refer to these values, even though they're gonna be stored in all kinds of random places in our memory.

[00:05:36]
These are how we refer to them and keep track of them. How we deal with them and how we manage them inside of our programs. A couple of other operators that I just highlighted here, you’ll notice on line 8 that parenthesis, the open parenthesis, that's also kind of technically an operator and it means function call.

[00:05:58]
Actually parenthesis can be used, it's another one of those overloaded cases. It can be used to mean lots of things, when it comes immediately after a variable like log, it means execute a function. But it may show up in another operation where it's just grouping things together like, you might put parentheses around 1 plus 3, and then do something else with that number like multiply it by 6.

[00:06:23]
And that's a grouping, and you may remember that from math class, kind of grouping things together to decide what things happen before with other things. So we have the parentheses operator. And then up on line 1, we have that little, bizarre semicolon. What's the semicolon about? Well, that's an also kind of an operator.

[00:06:41]
In this case, it's not really doing anything to a value. But it's just a part of the syntax that is denoting that we finished a statement. It's very similar to if I just used an English sentence and then I finished, and there would have been a period at the end of the sentence when I finish.

[00:07:00]
And it's very similar in programming, we are telling the program, I don't have anything else to say in this particular sentence, so this sentence is done. Before we move on, let's actually execute that code and make sure you understand how those values are being pulled out of that array.

[00:07:17]
So I've got it loaded up here in RunJS and I click run. And you'll notice that the first console log statement says, two because there are two elements in the array, that's the length of the array, and friends[1] gives us Marc. But if I were to change this array, if I were to add my friend Alex to the beginning of this list and then we run the code again, you notice now we are going to get three as the length of the friends array.

[00:07:44]
And now friends[1] is pointing at Brandon because we've changed the relative position of the values in that array. So again, this re-emphasizes why it's so important for you to be able to run the code and see how it works, that concretely see means in your head how JavaScript is actually executing the things that you're writing.

[00:08:03]
Now there are other kinds of operations that we're gonna do that can only be done with actual variables. So we talked about some operators before like the plus and the minus, and the exclamation mark, those can be done even with values like you saw with the number 42 or the Boolean false.

[00:08:22]
But we have some operators which can only be used if there’s a variable. And it’s because these operators not only do something but then they reassign, they set a value back into that location. So line 3, we have the ++ operator and it is saying, go in increment, add one to whatever is in age, but also, you should reassign that value right back to age.

[00:08:48]
So it would have been similar to if we had said, age is equal to age plus 1. Go compute whatever age plus 1 is, which in this case would be 40. And then assign that back into the variable age. Line 4 does something very similar except instead of only incrementing by 1, the += allows it to tell it how much we wanna increment.

[00:09:11]
But because the equals is there, you can see very clearly there's gonna be a reassignment back. So now, we will have moved age from the value 39. We will have reassigned the value 40 on line 3. And then on line 4, we will reassigned it a new value which will be the value 42.

[00:09:29]
Which is why on line 6, when I just have a variable reference there, I’m just basically saying, what’s in the variable at this place and at this moment in the memory somewhere, what value is in that location? Well, it’s the value 42.