Check out a free preview of the full JavaScript: From First Steps to Professional course

The "Declaring & Assigning a Variable" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:

Anjana walks through the second TODO task of the DOM exercise, declaring and assigning a variable called fact. The fact variable is a constant object containing the properties fact, answer, and explanation.

Preview
Close

Transcript from the "Declaring & Assigning a Variable" Lesson

[00:00:00]
>> TODO 2, we're gonna declare and assign a variable called fact that's going to be an object that represents a statement, an answer that's true or false, and an explanation. The one that I had in here looked something like a statement of 1 plus 1 equals equals equals 2.

[00:00:25]
The answer of true, I can't remember which version we're looking at if it's the text or the numbers. And then the explanation of what the plus operator does to strings, I think it was. So, hopefully you all chose totally different facts. Can somebody walk me through what they did for their statement object?

[00:00:49]
So let's start with, we're gonna assign a variable and again, this statement now. In this case, the statement is just gonna be, sorry, the fact is just gonna be one fact for this page, so we're not gonna change it. It's just gonna be this page, your page always has one fact.

[00:01:07]
In my page's case, it was always the fact string 1 + string 1 === string 2. And so, if we look at my solution, hopefully, no spoilers, let's see. We saw that what I did, scrolling down, was something like this. Ignore that, something like this, okay? So a fact, I have statement, and so an explanation.

[00:01:42]
Now, let's look at what you all did. So who can walk me through their solution? OJ, did you wanna share?
>> Sure I did, I tried to do const fact equals and then I do the squiggly lines.
>> Curly braces, yep
>> Squiggly braces statement, colon,
>> Statement, colon.

[00:01:57]
>> Arrays are just like objects.
>> Arrays are just like objects, love it, okay?
>> Comma, answers, colon, an array, yes, no.
>> Interesting, okay. So in this case, what we want, we're gonna have two options here. In fact, where in this case, we're not gonna change the options from true false.

[00:02:17]
So we're just gonna keep all of our questions like true/false questions. And we already have buttons set up to say true and false. So could we edit those to say yes or no instead? Absolutely, we could. In this case, what we wanna do is represent, for this particular fact, what is the correct answer?

[00:02:35]
So in this case we probably just want answer singular, and in this case it could be false, or I mean depends what you, this is a philosophical question here. Let's say, maybe we move this arrays are just objects, we'll maybe make it a little trickier. But arrays are like objects in that they actually are objects with some special properties, then our answer would probably be true.

[00:03:07]
Okay, so now the value of your answer here, you could have had two options. You could have had the boolean value true or false as a boolean value. Or you could also have a string value of the word true or the word false. Both are valid. Later, we're gonna have to deal with the fact that we may have had a choice of whether to put a boolean here or a string.

[00:03:38]
And so, both are valid, we're gonna have to be conscious of the fact that answer is a boolean here, if we used the boolean, yeah?
>> And then explanation, colon, changed my mind.
>> [LAUGH] Okay, so in this case, changed my mind could be, it's your page, you can put whatever you want.

[00:03:58]
But maybe we could say something like to explain in a little bit more detail why the answer is true. So we could say like arrays are a kind of object or something like that. Or arrays are type object or whatever it is, right? So depending on what your fact is, you get to decide what this explanation is, yeah?

[00:04:27]
Okay, so I'm just gonna say arrays are kind of object with special properties. And are we done? Yes, question.
>> Okay, so when you showed us the one that you did, all of the IDs, the keys there, were in quote.
>> Quotes, that is a very astute observation.

[00:04:50]
So, when we're looking at the coding here, and it's really difficult to read inside the inspector here. Which is why we appreciate syntax highlighting and IDEs and how they space everything out nicely. But you may have noticed that there were some quotes around the property names. And in fact, let's go back to our new tab.

[00:05:22]
In JavaScript, we can do, myProperty, some kind of value. We could also do, Strings that have a little bit more going on here, like my longer property, that has spaces in it and then other value. And if we look at now at the object o2, we'll notice that its property key here or the kind of the name of that property is now wrapped in strings.

[00:06:06]
String quotes, double quotes, [LAUGH]. Because what we said before is that when JavaScript is making these objects, it's creating these arrows as it were, these pointers, to values and it's giving them a name. And actually, it's kind of expecting strings for those names. So what we're usually doing is working with property names that are just all one word, no spaces, no symbols, no other stuff that wouldn't usually go in a variable name, this is the convention in JavaScript.

[00:06:37]
But actually, we can use whatever string we want. So if we do you want spaces or fancy characters or things like that in our property names, we can do it. Now the problem is we can't then, I can do o.myProperty and get my value out. Or as we saw before, we can do o, the string name of the property, which is a little hint that actually JavaScript is seeing these as strings.

[00:07:07]
And those both give us the same thing. But with o2, if we were to do my longer property, we can already tell from the highlighting that something is going wrong here. And JavaScript is like, what are you saying? I don't understand what this is, because that space means something when I do a dot, right?

[00:07:27]
Because we're expecting something else there. However, I can still use the brackets notation to say my longer property and still get out the value. So, great question and revealed a little hidden trick that properties can do. And so, I think what's happening here is in the browser, how it's displaying it, it's just kind of indicating the stringiness of those property names for us, even though those quotes don't exist in my actual source code.

[00:07:58]
Good eye. And I just put a semicolon at the end of this declaration because even though it's split up on multiple lines, as we often do with objects, we've just told JavaScript to do something. JavaScript, create a variable fact and assign it to this object, full stop. And so, we're using the semicolon to indicate that.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now