Variables Exercise

[00:00:00]
>> Okay, well, what we're gonna do now in our console is declare and assign some of our own variables. So your mission, should you choose to accept it, is to declare and assign variables to remember a few different things. Number one, your name, whatever nickname for yourself you so choose.

[00:00:22]
Number two, the combined age of your parents. I'm gonna ask you to use an expression when you declare this variable as an extra little challenge. And then, number three, the thing that we really could have used earlier, a variable to remember the element with ID board on our Tic Tac Toe page.

[00:00:45]
So let's go back to our Tic Tac Toe page, open up the console again if you had closed it, and declare some variables to remember these things. All right, so how we fill in with our new-found variable powers? Pretty good, seeing some confident nods, okay. So our name, we could maybe use a let or did anybody use a const for this one?

[00:01:18]
No, in my case, I'm maybe gonna use a const because my name is not gonna change, I have no plans to change it. So it could be maybe your first name if you chose your full name, whatever you did. We have a pretty standard a declare and assign a string, cool.

[00:01:40]
Okay, now, the next question was the combined age of your parents, and I asked you to use an expression in your solution to this. So, can anybody walk me through what they did? Chu, you wanna walk us through your solution? You look like you have a, confident thought?

[00:01:57]
>> I don't know if I did it right.
>> [LAUGH] That's okay, we can talk it through.
>> I just say lag combinedParentsAge is equal to.
>> Did you spell it like this?
>> Like combinedParentsAge in our favorite little new camel case, naming equal to?
>> Two numbers?

[00:02:19]
>> Two numbers. Okay, so how did you combine those two numbers? We can choose random numbers, you don't have to disclose your parent's personal identifying information, but let's pretend that they're, I don't know. Let's make them nice and young, like 23 and 24, I don't know, [LAUGH]. How did you assign this to two numbers?

[00:02:44]
>> Plus.
>> Plus, exactly, so that is exactly right. So again, we can use expressions where we would use values. So instead of using the value at 47, here, I can use plus to create an expression that evaluates to a number which then is on the right-hand side of my assignment operator equals.

[00:03:09]
So that now when I ask JavaScript for combinedParentsAge, it remembers the sum, it remembers the value to which that expression, that addition expression evaluated. So am I going to be able to get back out the original 23 and 24 from this variable? No, cuz what JavaScript does is it's going to evaluate the expression, add the numbers together, get the result, and then remember that as the value for combinedParentsAge.

[00:03:43]
Excellent, thanks so much Chu. Okay, now, what about this last one? This one that was just like so annoying earlier, we had to keep typing document dot blah, blah, blah all over. Can anybody walk me through their solution for storing or remembering the value of the ID board element, Stephen?

[00:04:04]
>> Sorry, declared a variable board.
>> Okay, how, walk me through it.
>> That's equal to document.queryselector.
>> Okay, so the declaring part which you're like yeah, I just declare a variable, no big deal, but let's walk through it in specifics, what keyword did you use?
>> Let.

[00:04:22]
>> Let, beautiful.
>> Board.
>> Board.
>> Equals document.queryselector board.
>> Okay, just board like this?
>> No, I actually put the.
>> The hash?
>> Yeah.
>> Yeah, exactly because we're gonna look for the element with the ID of board as opposed to a tag board which we probably don't have in our page, right?

[00:04:51]
Great, okay, so now, board is a div, it is that element, so now we can work with board like we did before, like, We can do board.children.length instead of document dot, blah, blah, blah. So variables make our lives easier cuz now we can capture this value once as it were, remember it as a shorter thing, board, and then use board, the word, the name board, in our code wherever we want.

[00:05:25]
The document.queryselector.blah, blah, blah, blah. Cool, excellent work, great job, everybody. Any questions? Yeah.
>> I was just playing around and instead of lad, I use var, and that still worked, is that an acceptable alternative to let?
>> I was wondering when this question was gonna crop up, all right, excellent question.

[00:05:50]
There is a third keyword that we can use to declare variables in JavaScript, and it is var. So var, I don't know, var title, let's say it could be document.title, and now, this works a lot like let. So for example, unlike const, if I do const h1 and do document query selector h1.

[00:06:27]
If I try to define this to something else now, we said with const, I can't do it, const can't be changed, let can, right like parents, what did I have combinedParentsAge, okay? CombinedParentsAge can be changed to whatever we want because we declared it with let. Const does not let us, var does or does not let us reassign the variable.

[00:06:57]
What do you think? It does, exactly. So I could do title equals whatever I want. So in some ways, var is similar to let, are they the same? No, what is the difference between them? I'm gonna put a pin in that, we're gonna talk about it tomorrow. So the difference between var and let, well, there's one difference is that var is older than let.

[00:07:24]
Let and const, are kind of new kids on the block, relatively speaking, they both came into JavaScript in a version of the language that was called Es6. Sorry, Es2015, Es stands for ECMAScript, this is a complicated JavaScript trivia, the standards body that says this is valid JavaScript. It captures that validity in a specification called ECMAScript, so we talk about versions of JavaScript with this ES nonsense.

[00:07:55]
So ES 2015 or ES6 introduced let and const as new ways of creating and assigning variables with new rules around them. The older way going back to 95, it was var. So you will still see var in code that you find around on the web. I am going to say just right now similarly to how I said don't use the double equals loosey goosey equality operator.

[00:08:30]
Generally, you're not gonna wanna use var, tomorrow, we're gonna talk about scope in JavaScript, and we're gonna talk about the difference in scope between var and let which is kind of its equivalent. Previously, there was no const type thing, all variables were read declarable. So I'm gonna put a pin in that, but I will say that in general, these days, almost always you're gonna want a let instead of a var.

[00:08:55]
Because let is more predictable, it's easier to predict what it's gonna do based on the scope rules of JavaScript, which we're gonna talk about later in the course. So, var is a thing, it is out there, it is a keyword, it works very similarly in many ways to let, not the same, try to avoid it.

[00:09:16]
[LAUGH] Is what I would say about var at this point. Great question.