Declaring & Assigning Variables

[00:00:00]
>> Now, the next thing that we're gonna start to want in our JavaScript programs are variables. And like Sarah McLachlan, our variables will remember the values that we ask them to remember. So, so far, we've been working with a lot of values just in and of themselves, and that means we've had to repeat ourselves a lot.

[00:00:21]
Like when we had those examples of manipulating the DOM, and we would have to repeat document.query selector, blah, blah, blah, a bunch of different times to get the same thing out every time. Wouldn't it be nice if we could just remember that value and have JavaScript given to us whenever we want?

[00:00:41]
And that is exactly what variables are for. So for example, I could create a variable, and this is a JavaScript spell that's going to create a variable to remember a very important date, the 21st of September, do you remember? Anyway, [LAUGH] and this is an example of this one way we can create a variable in JavaScript.

[00:01:09]
So looking at this line of code, what do y'all notice about it? Just point out some things, what do you notice in this code? And chat, feel free to chime in as well, anything jumping out at us.
>> Purple.
>> Purple, [LAUGH] yes, in this particular syntax highlighting theme, something is purple.

[00:01:29]
What is purple?
>> Let function.
>> Let, this word let. What is this thing let?
>> Function.
>> TBD, is it a function? It is a special thing in JavaScript. We could call it a keyword, and we could also ask our friend, MDN, more information about let. So let is a keyword that lets us declare a variable.

[00:02:04]
We're gonna talk more about some of the other words on this page later. But let is a special keyword that indicates a statement, which we're gonna talk about in a second, that creates a new variable in JavaScript. So it's a special feature of the JavaScript language that allows us to create or declare a variable.

[00:02:28]
So let is what tells JavaScript, hey, on this line of code, I want a new variable, and I want to call that variable remember. And remember is something, it's not in purple. So purple in this scheme, but the syntax highlighting if you're using a text editor or you're looking at code examples on MDN, or something like that.

[00:02:48]
The syntax highlighting will often tell you what kind of thing each word on the page is. And in this case, it's telling us that let is a special reserved JavaScript keyword that means something special. In this case, it means, hey, JavaScript, I want a new variable. And in this case, remember is just a name that I chose for this variable, and that's up to me.

[00:03:12]
We're gonna talk a little bit about names in a second. All right, anything else you notice on this line of code or in this line of code? Anything else that may be new that we haven't really seen a lot yet?
>> Variable.
>> Well, yes, it's a variable, exactly.

[00:03:32]
So the remember is the variable name here, and we're gonna talk about that. What about in terms of the syntax or the symbols that are popping up in this line of code? Is there any character or symbol that is jumping out at us as maybe a little different than something we've seen before, Chu?

[00:03:54]
>> Equals.
>> So we have the equals, the single equals. Yes, so we saw that in a couple of the things that I just told you to write in the computer without explaining them. And the single equals is different than, let's say we just saw the triple equals for the equality operator.

[00:04:12]
So yes, the equal sign here, this is what we call an assignment operator. So what this equal sign is saying, hey, JavaScript, the let is saying create a new variable called remember. And the equals is saying, assign a value to that variable of the stuff after the equals.

[00:04:36]
So excellent point, the equals is doing a lot of heavy lifting here in this tiny line of code. And to the right of the equals, we have "Sept 21", which is something we've seen before. So what is that? Yeah.
>> A string.
>> It's a string, exactly. It is a string value, a literal value.

[00:04:58]
We said it's one of the primitive data types. So it's a string value that we're going to say, this is the value I want you to remember. I want you to remember the 21st of September, cuz Earth, wind, and fire said so. So [LAUGH] that is the value that we're going to be asking JavaScript to remember for us.

[00:05:17]
And then there's one other thing left that we haven't talked about yet, which is?
>> Semicolon.
>> A semicolon at the end of this piece of code. And we're going to talk a little bit later about where semicolons show up. But essentially, this semicolon is saying, I'm done talking, JavaScript, I am done.

[00:05:37]
That is the command I would like you to go carry out. Go remember this value, September 21, as a string in a variable called remember. And instead of using a period like we would in an English sentence, we use a semicolon to say full stop, JavaScript. [LAUGH] Okay, look at this.

[00:05:57]
We just unpacked so much stuff out of this one tiny line of code. So let us talk about, Declaring a variable. As Michael Scott from The Office once said, if you just shout, I declare bankruptcy. [LAUGH] Have you declared bankruptcy? I mean, are you now, as far as the government or what have you is concerned, bankrupt?

[00:06:29]
So declaring a variable in this case is separate from actually making a meaningful variable that you can use. And what this let keyword does that we just looked at, is, and it's not the only one, but it is one way that we can declare a new variable, is it says, hey, JavaScript, create a new variable, name it bankruptcy.

[00:06:55]
And so the question here is, if we go back to our previous example, and I say, let remember = "Sept.21" ; what do you think is the value of the remember variable?
>> A string.
>> A string, which string? Sept.21, yes. Okay, but if I just say let bankruptcy, as in I declare bankruptcy, and then put a semicolon, no equals, no value there, what do you think is the value of bankruptcy now?

[00:07:33]
>> Undefined.
>> Any guesses?
>> Undefined, undefined, I heard undefined a couple of times. Exactly, yes. So let's try this out. Before, We had let remember = "Sept.21" ;. Now, JavaScript console said undefined, we're gonna talk about that in a second. But if I now type in the word remember into my JavaScript console, no quote, nothing, just a name, it says, yeah, I remember, it's September 21.

[00:08:08]
If I do let bankruptcy;, again, JavaScript console says undefined, we'll talk about that in a moment, or a bit later. But now if I type in the name bankruptcy, the value that JavaScript gives me back is undefined. I haven't given it a value to remember, I have just said, hey, JavaScript, I want you to create a variable, and I haven't given it any value to remember yet.

[00:08:30]
>> Why is it undefined? I'm expecting it to be a null.
>> Interesting, so why do we have the, Why do we have the value of a variable that I've just declared, but I haven't given a value yet, why is it undefined and not null? And to this, I would say, let's go back and think about our Backstreet Boys.

[00:08:53]
[LAUGH] So a null value would be something where I'm like, hey, JavaScript, I want you to remember that, let's say, I'm not bankrupt, that there is no bankruptcy here. In which case, I could do let bankruptcy = null;. And now, if I ask JavaScript, what's bankruptcy? It's null, there's no bankruptcy, there has been no bankruptcy.

[00:09:23]
So this is sort of a way that I can say in my program, and usually, if I'm saying this, it's like I'm talking to another coder, maybe he was reading my code later, maybe that coder is me in the future. And I'm saying, I deliberately want this value to be empty, I deliberately want there to be no value here.

[00:09:42]
I don't want bankruptcy, I want a null value for bankruptcy. However, if I, and I'm refreshing my tab here to clear out my JavaScript context, that's gonna be important in a second. If I just say, let bankruptcy; without saying anything more, JavaScript is gonna say, hey, I don't know if you meant for there to be a value here, but there's no value here.

[00:10:06]
So that is the kind of ain't nothing but a mistake version of nothingness of maybe there is supposed to be something here, I don't know, you didn't tell me, programmer. But I can tell you that there's nothing here, so undefined, I don't have any definition for this. Does that make sense?

[00:10:25]
Awesome, great question. Okay, so when we declare a variable like that without giving it a value with let, we can use let to do this, we can later go in and give it a value. And so if just let bankruptcy here is called declaring a variable called bankruptcy.

[00:10:52]
In the second line here, what we're doing is assigning a value to that variable that we had declared on the previous line. So what this looks like is if I do, If I do let myDeclaredVariable;, and now I asked for myDeclaredVariable, which now my browser is getting smarter, because it knows that this might be a value that I want, so it has an autocomplete option for me.

[00:11:29]
It's undefined, same as the bankruptcy thing. But now, if I type myDeclaredVariable = "so value much wow", Now, if I ask again, what is my declared variable? Now, it has something it remembers at that variable. And so what we've done here is we have essentially split onto two lines, which maybe could be at two different places in our code, the same thing as if I were to say, let remember = some value all on one line.

[00:12:08]
So this line is doing both the variable declaration, saying, hey, JavaScript, make me a new variable, and the variable assignment, hey, JavaScript, remember this value as the value of that variable. So there's a separation, in this case, between the assignment and the declaration. Whereas on the first line that we saw, the remember September 21st, that all happens in one line of code.

[00:12:39]
The point to take away here is that in order for JavaScript to remember a value, you need two things. You need to declare a variable and you need to assign the value you care about to that variable. So we have now seen two ways of doing this. We can declare and assign separately using let variable, semicolon, and then somewhere later, the equals operator, single equals, as the assignment operator to assign a new value to that variable.

[00:13:08]
And this is also, by the way, what we did before when we said document.query selectorblah.textcontent =. That's also what we did, we assigned a new value to that text content. We'll talk a little bit later about what all those dots were doing. Or we can do it all at once, "such efficient, amaze"; wow.

[00:13:29]
Okey-doke, so let's talk a little bit about what is happening here when we declare and assign variables. And again, we're focusing on kind of our mental models of what JavaScript's internal mental model is of variables and how they work. So let's think about it in terms of a couple of things.

[00:13:53]
So when we're dealing with variables, we have the variables themselves that we could imagine JavaScript has kind of a little catalog of. We'll talk about exactly what's going on in a second. And then some kind of values that we care about in relation to the word. So when we have, let's say, our initial when we said, let remember equal September 21.

[00:14:23]
What we're doing essentially is with the let remember part, we're saying, hey, JavaScript, I want a new variable called remember. And then when we have the equals September 21, we're saying, and I care about a value called September 21. It's a string, has type string, what have you.

[00:14:50]
And JavaScript, I want you to connect that value to the variable that I've asked you to create called remember. When we declare a variable with just let bankruptcy;, What are we saying? What do you think? Maybe, Jason, I feel like you have a thought brewing. When I say let bankruptcy;, what am I telling JavaScript?

[00:15:26]
>> Let bankruptcy?
>> For example.
>> You're just declaring that variable.
>> I'm declaring the variable, exactly. So I'm saying, hey, JavaScript, I want a new variable, I want it to be named bankruptcy. And I haven't said anything about any values. And so that's where when JavaScript looks for a value, it doesn't see any value related to that variable, and it's like, undefined, don't have a value there.

[00:15:56]
As opposed to, for example, to go back to Chu's question, when we had, okay, what if we say let bankruptcy equal null? And so then maybe we're saying, JavaScript, actually, I want you to remember the value null, but that'll be different. So if we're just declaring the variable, then we aren't saying anything about any value.

[00:16:20]
And we're gonna come back to this in a moment to kind of understand what is happening with these variables when we manipulate them. But so I just wanna focus this as a way we can think about the difference between the variable and any values that may or may not be related to the variable.