Values & Data Types

[00:00:00]
>> We are well on our way. We've taken some of our first steps and we have more steps to take. So, what we're going to do now is pause a little bit and look at some of the things we've been writing these spells. I've just been like, say this thing into your browser console and magic will happen.

[00:00:19]
And we've been getting to know some of the spells. And how to say them and what like circles of candles we need to arrange around ourselves in order for things to do what we expect. What we're going to do now is take a look at some of the things that we've been working with that we didn't even really talk about or think about and drill into what they are.

[00:00:39]
Namely, I'm talking about chunks of information that we call data. And that we can call values of certain types. So we've seen things like this so far for example, in quotes, double quotes we've seen the word Tic Tac Toe, as like the title or the header of the page.

[00:00:59]
We've seen numbers like 9. Don't have quotes around them. We've seen other things in quotes, like the #board, right? That we said was a CSS selector. But what are these things that we've been working with, that we haven't really named or talked about? So, these are values in JavaScript.

[00:01:18]
These are chunks of information. We could call them data in terms of units of information that have certain characteristics. So they represent different types of information. They represent different kinds of things in the world. And they literally are two JavaScript different kinds of things. So the information or the values that we're working with in JavaScript can be of different types.

[00:01:49]
And JavaScript has a certain defined set of different types that it knows how to work with one example that we've seen a lot of today is textual data. So things like Tic Tac Toe or #board or andina or any of these things in the quotes that we've been seeing a lot today these are pieces of text data or we could also call them strings.

[00:02:15]
I like those little friendship bracelets with the little letter beads, if you've ever seen these, that's kind of how I personally remember like strings as being textual pieces of data. And this is a general concept in computer science and programming. Often different languages will consider textual data to be of the type string.

[00:02:33]
So we're gonna talk more in detail about strings later. But just for a sort of preview, all of these are examples of strings in double quotes, Hello, with an exclamation point that's a string in single quotes. I like single-quotes. That is also a string. And even without the quotes but with these little what we call backticks those little angled marks, that is also a string.

[00:03:00]
So in JavaScript we have three different options for how we can at least three different options for how we can represent strings inside double quotes, inside single quotes, or inside back ticks. All of those are valid strings in JavaScript, and you'll notice also in our back texturing we have something else in there.

[00:03:19]
We have an emoji, right? So strings don't have to just include ASCII letters or kind of the letters that you might see on your keyboard right in front of you. They can also include unicode characters of all different types including emoji and characters from different writing sets from different scripts and things like that.

[00:03:40]
So we can have all kinds of stuff in there, we can also have numbers, right? Like for example, a phone number 867-5309. If anybody catches the 80 song reference could be a string if it is in quotes or just a regular number, like 42. If it's in quotes, it is a string.

[00:03:58]
We're gonna talk a little bit more about that later because, so what does that mean? What do I mean when I say a number can be a string? So this is a question for y'all. Do you think that 42 in quotes and 42 without quotes are the same thing in JavaScript.

[00:04:14]
I'm seeing some heads shaking. No, they are not the same thing. And we can prove it to ourselves if we use a fun little JavaScript spell, keyword called typeof. So typeof is what's actually an operator, which we'll talk about later. Typeof is a little spell we can cast on a value to find out its type.

[00:04:37]
So let me go back over and we're gonna go back into our JavaScript console. And I just wanted to point out that your JavaScript console earlier, we were looking at it in the context of the tic tac toe page. But we can even open a console without even having any page loaded, just in the new tab in the browser.

[00:04:56]
Usually there is a keyboard shortcut that I can use, but I can also go into the menu of my browser and this is going to be slightly different in different browsers. But usually there is some kind I have options for tools or developer tools or more tools in this case.

[00:05:11]
And here I can open web developer tools and this will give me my inspector my console a whole bunch of other stuff that we'll talk about later in the course. But for now I just need the console and I can actually just use the console without having any page really loaded.

[00:05:26]
I don't really care about the page, I just want the console. Cool, and usually there is a shortcut to open and close this which like in Firefox on Mac, it's I think option Cmd + I to open and close. But this will be slightly different on every system and in every different browser, that you can look up what the shortcuts are if you wanna be speedy.

[00:05:46]
So, [COUGH] in this case, we said all right, what about 42 versus 42? That didn't even sound like it made any sense because the first one was in quotes and the second one was not in quotes. And if I just type them into the console, it doesn't really like tell me much information.

[00:06:02]
But if I use this type of spell in front of them, I can find out what type of value is. So, type of quotes 42 tells me string is the piece of text data but type of 42 no quotes tells me number. So JavaScript sees two totally different things when it looks at these two different values.

[00:06:27]
One is a string value with the double quotes around it. One is a number value with no quotes. So typeof is our friend if we're not sure what something is. So we just tried it out and you can try it out, you can mess around with other things that you can try typeof on.

[00:06:45]
[COUGH] And what we found out is that we now know of at least two different types of data. We know of strings, which we've been working with already today, and we know of numbers. Like Count Von Count always showed us on Sesame Street, just me? Okay, so numbers in JavaScript, these are all examples of numbers.

[00:07:02]
We can have an integer or a whole number like 9, or we can have really a larger still an integers like 525,600 which may or may not be a unit of minutes. Anyway, we can also have decimals points in the numbers so we can have things like 3.45.

[00:07:23]
We can have negative signs, and that still is all still a number, right? We're just talking about different in this case, different sign of whether the number is positive or negative and a different precision of how many decimal places we actually care about in this number. We can even do big numbers like with the E, and then a certain number of a basically decimal places that we want to multiply whatever's to the left of the.

[00:07:52]
So just like in math class, you might have encountered these kind of exponents where you're saying 1.21 raised to 9 decimal places out would be like a big number. I don't know exactly how many. And JavaScript even has a number called infinity which is pretty fun, you can just invoke infinity in your browser console whenever you want, if you're feeling lonely, infinity.

[00:08:18]
So all of these are examples of numbers in JavaScript. And what we've seen so far, we've been talking about strings, and numbers, those are examples of what in JavaScript are called primitive data types. So JavaScript distinguishes two different, I guess you could say, meta types, or like types, of types of data, there are primitive data types, of which strings and numbers are two examples.

[00:08:43]
And then there's objects and so primitive data types are kind of special where they work a little bit differently in JavaScript. And then pretty much everything else is an object meaning it follows certain rules that we're gonna talk about later, we're gonna talk about how objects work. And we've already seen an example of an object, remember how we called it DOM, it's the document object model.

[00:09:08]
Document that word document when I invoke it in the JavaScript console give me object that represents the HTML document. So that's an example of something that's an object type. So in JavaScript, we basically only have two kinds of things in the world. There's primitive values. And there's objects.

[00:09:26]
We're gonna dig into all of that. In JavaScript, we said we have we already know a couple of the primitive data types. There's strings and numbers. And there are a few other data types that we're gonna care about. Namely, we have Boolean data types undefined, which we saw earlier and null, which we also ran into earlier.

[00:09:47]
And then there are a couple of other primitive data types we're not going to talk about, but guess where you can go if you want to read all about them. Yes, exactly, so we're not gonna talk about, there's a couple more, but these are the ones we're gonna care about.

[00:10:00]
Strings, numbers, Boolean, undefined, and null. Okay, so we talked about strings and numbers. What about Boolean? So Booleans, as you may know if you've encountered them in some other programming language are true/false values, or in other words, the dual states of Dwight Trou [LAUGH]. So there are literally only two values of the Boolean type there's true and there's false and we can we can invoke them by just using the word with no quotes true and if I type Typeof true.

[00:10:36]
We'll see it's a Boolean and similarly it's opposite is false. Now, keep in mind, we could also have a string, for example, of the word true, which is in quotes that's different. So Boolean values are only true and false. There's only two. There's not a lot to worry about there.

[00:10:58]
Then we have our friends undefined and null. So you could think of both undefined and null as like a blank void of nothingness. Undefined and null both mean sort of, this is a value which represents the absence of a value. This is nothingness as a value, getting very philosophical here already, and it's only like the middle of the day, but [LAUGH] but so there is however a difference between undefined and null.

[00:11:28]
And I think that difference can be best explained by our friends the Backstreet Boys. So, [LAUGH] so do you remember the song, I want it that way by the Backstreet Boys. There's a line in that song ain't nothing but a mistake and really what they were singing about is not some girl that they may or may not have wanted it that way with.

[00:11:51]
But they were talking about values in JavaScript namely the undefined value being often sort of used as a way of saying there was supposed to be something here. But accidentally oops, like there's nothing here and nothing but a mistake. However, null also means there's nothing here. But usually it and this is, there's an asterisk on this because these are not always the case but usually null means I meant for there to be nothing here.

[00:12:21]
I want it that way. I want there to be nothing here and I want to tell you that there is and should be nothing here. Undefined often crops up when like, we thought we were supposed to have something, but we didn't have anything. Like we ran into it earlier, right?

[00:12:36]
When we saw like, we thought that we were gonna have an element selected by this, but null, there's not. And null, for example, when we ran a query selector, and we said, give me the element on this page with this ID, and it comes back and it says, null.

[00:12:55]
It's saying, yes, there is nothing. You asked me what is the element at that idea, and it is nothingness. Congratulations, you've received nothingness. So this is one way we can think about undefined and null. They are two different types, though. They're two different values, but they crop up in different ways.

[00:13:11]
So yeah, thanks, Backstreet Boys, for writing a song about JavaScript.