Transcript from the "Variables Exercise" Lesson
>> 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?
>> 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?
>> 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?
>> 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: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?
>> 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, beautiful.
>> Equals document.queryselector board.
>> Okay, just board like this?
>> No, I actually put the.
>> The hash?
>> 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: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: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:09:16] [LAUGH] Is what I would say about var at this point. Great question.