Check out a free preview of the full Introduction to JavaScript Programming course:
The "Values & Types" Lesson is part of the full, Introduction to JavaScript Programming course featured in this preview video. Here's what you'd learn in this lesson:

A Type in JavaScript describes the representation of a value. For example, 42 is a Number and “Hello” is a String. Kyle explains these primitive types and demonstrates how to convert a value from one type to another.

Get Free Access Now

Transcript from the "Values & Types" Lesson

[00:00:00]
>> Kyle Simpson: We've been throwing around some concepts, and we wanna come back and layer those in, if there have been some things that maybe were missed. If I have the value 42, and another way of expressing a value that looks very similar is to put some quotes around it.

[00:00:17] These two values look like they are, yeah, roughly the same. If we were to print out both of them, they would both print out in the same way. They'd both say 42. They'd have the literal characters 4 and 2 after each other. But they are going to behave differently in our JavaScript program.

[00:00:36] And that is because these values are intrinsically of different types. And that word type, we don't mean physically putting your fingers on keys on a keyboard. We mean it is an intrinsic behavior of the value as expressed. So this 42 that we see on line 1 is a number.

[00:00:56] And the 42 is what we call a string. And numbers have different behavior associated with them than strings do. So, for example, numbers are what we do math with. We can say 42 divided by 2, and that gives us 21. Strings are what we do input and output with.

[00:01:18] Strings are also how we deal with characters. So, if I wanted to say what is the first character of the string "42", that

[0] could tell me that the first character of it is the character "4". So the character "4" is the first character in the string "42".

[00:01:37] Just like if I had a string "abc", the character at the 1 position is the character b, okay? Strings are accessing things character by character. Numbers are what we do math with. These different intrinsic behaviors are important to keep in mind. Because if I express the number 42 in my JavaScript program, I am signaling that I intend to use that in a mathematic way.

[00:02:02] And if I instead express "42" in my program, I am expressing that I intend to use that in a string way, yeah?
>> Speaker 2: Is the use of single versus double quotes important?
>> Kyle Simpson: In JavaScript, strings can either be double quotes or single quotes. You can't have double quote on the beginning and single quote on the end.

[00:02:25] It has to match. But they can either be double quotes or single quotes in terms of your de-limiting of a string literal. There is no difference whatsoever functionally in JavaScript. In fact, stylistically the only arguments that can ever be made are some people prefer the single quote because it's less keystrokes for them, they do not have to hit Shift.

[00:02:46] Other people prefer the double quote because it's more natural that they've done that in other languages. And it's purely a stylistic thing. Here's what I would say, never, ever mix. Do not have part of your program using single quotes and part of your program using double quotes. Pick one, and I really don't care which.

[00:03:05] You can pick whichever one you want, there's no difference, but pick one and stick with that consistently throughout your program. You will see that I prefer double quotes. I use double quotes.
>> Kyle Simpson: Okay. [COUGH]
>> Kyle Simpson: These values have these different types. So if I said var a = 42, I've got 42 that's in an a variable.

[00:03:31] Let me take off the var part just to not confuse that now. So I'm just making an assignment. The a variable's gonna have the 42 in it. And if I wanted to print it out, I can say, console.log(a). And you'll notice that the JavaScript engine does print that out.

[00:03:47] If we try this program,
>> Kyle Simpson: You'll notice that see 42. But what happens if I send a = "42", and then I said console.log(a)?
>> Kyle Simpson: It's very subtle and difficult even on the projector to tell. But this one is printed in blue characters, and this one is printed in black characters.

[00:04:13] Because the console is giving you a very subtle hint that underlying what it's done, it was dealing with the different value type. So it's important to understand. And it's not really incorrect in the book, but there is a slightly misleading thing that I'm gonna correct in a second edition.

[00:04:32] When it talks about console.log, it suggests that console.log changes everything to a string. Actually, it doesn't really change it to a string when you're running inside of your JavaScript engine, it just prints out whatever thing you had. So that's why we see a slightly different representation there. Which is what I meant, there are other contexts that change things into strings.

[00:04:53] So, for example, saying alert(42), or a variable with that number in it, changes it into a string so that it can print it in the box. So we can't tell any difference inside of an alert box, whether it had a number or a string, but we know under the covers it needed a string to do it.

[00:05:09] So it actually converted into a string.
>> Kyle Simpson: So if I wanted the string representation of this value, if I had it as a number and maybe then I later did some division, I said a = a / 2. So now we know a is holding the value 21.

[00:05:34] And if I then wanted to do something string oriented with it, like output, or getting at its character, or whatever, I would need to convert it into a string. Convert from one type to another. And this conversion is common in all programming languages. All programming languages have a notion of conversion.

[00:05:56] In JavaScript, the word that we use is slightly different. It's not conversion, it is coercion. And some people like to nit pick and say, well, there's one thing that's conversion in JavaScript and another thing that's coercion. I find it much easier to actually distinguish between explicit and implicit rather than conversion and coercion.

[00:06:21] So, an explicit conversion, one that it's obvious that's what I'm trying to do, if I wanted to turn a into its string representation, I could literally use the string function. And that's gonna convert. And if you have any experience in another programming language where they do type casting or other forms of conversion, that looks very similar.

[00:06:45] So I'm explicitly saying, take the thing that's in a now, and if it's not a string, make it look like a string, and then assign that value back into a.
>> Kyle Simpson: So if we took this program, if we put a console.log on it, if we took that program and we ran it,

[00:07:05]
>> Kyle Simpson: Are we expecting a blue number for the 21, which would be that it's a number, or are we expecting black characters for 21 cuz it's a string? We'd be expecting black because it's a string. And in fact, we get black. Again, it's really subtle on the projector in the stream.

[00:07:22] But this is black 21, because it's actually a string representation that I printed out. Exactly the same as if I had said console.log("Hello World").
>> Kyle Simpson: Okay? All right, so strings serve a purpose in programs differently than numbers do, and converting between the two is almost always required. We saw that we could say a = String(a) to convert from anything into a string.

[00:07:57] If we wanted to go the other direction, like go from a string to a number, like if we had another variable called b and we said b, then we could do the same thing but with the number function. We could say Number(a). So now b is gonna be the number 21.

[00:08:10] And a is gonna be the string quote 21
>> Kyle Simpson: There's a question in the chat room about changing things. This is a subtle point, which I don't wanna belabor too much, which we'll actually get much more into when we talk in the morning session of day two. When we talk about coercions and all that stuff in much, much more detail.

[00:08:34] But, just as a brief answer, in JavaScript, variables do not have types. There's no such thing as a variable having a type. In JavaScript, the value has the type. So the value 42 or the value quote 42 is the thing with the type. And the variable, the thing that we call a or b, it has no type, it can have any value of any type in it.

[00:08:56] Whereas in other languages that are called static languages, those languages you don't declare a type on the value so much as you declare a type on the variable itself. So in C, for example, if I say int a, I'm saying this variable container must hold only ints, integers.

[00:09:16] So I'm typing the variable itself rather than worrying about the type of the value. So it's just a distinction in JavaScript. And in other dynamic value languages like JavaScript, we don't have a type for the variable, we have a type for the value.
>> Kyle Simpson: The return of a variable color code matters.

[00:09:40] The only point that we are making here is to understand if you're gonna program inside of the console, understanding what the console's doing. It has special behaviors that are outside of what JavaScript itself is doing. So here I'm just helping you understand that the console, if you see blue characters, then the console's telling you you had a number.

[00:09:58] And if you see black characters, the console's telling you you had a string. That's just a subtle nuance of working with the console, it does not matter actually to the JavaScript engine.
>> Kyle Simpson: Okay, so we're not gonna do much more about coercions except for me to suggest that those two that I showed you before, these are explicit, and there are ways to do implicit coercions.

[00:10:25] So a way to go from a number to a string that is sort of a side effect of some other operation, that's what I mean by implicit, it's not obvious that you're doing it. So if I said something like, right now we know a is the number 21.

[00:10:40] If I said a is equal to a + an empty string.
>> Kyle Simpson: Again, without getting too much into the weeds about how the plus operator works, in this case, the plus operator wants to do string concatenation instead of mathematic addition. And because one of these things is not already a string, it has to make it into a string.

[00:11:05] So under the covers it's gonna do that string a thing that I was showing you. But it's not obvious to us that that's happening. And yet, if we try this program and do a console.log on that a variable, if we try this program, we'll notice that we're gonna get those black characters cuz it's going to have made it into a string value.

[00:11:31] Try that in your own console to verify whether or not you have that third line end or not. You'll notice the difference between getting black characters in your console or getting blue characters. Your question back there?
>> Speaker 3: Would there ever be a time where you would want something to not change so it would be a final?

[00:11:48] And so even in an instance like that it would give you an error, let's say, instead of converting it behind the scene? Like you don't want that to change in your program?
>> Kyle Simpson: There's a question in the live room here about whether or not there's a notion of wanting a variable to have sort of a final value in it.

[00:12:09] That is, if you try to do something else and assign it a different value, it would throw you an error. And there is actually that notion. As of ES6, the newest, latest, and greatest JavaScript that's coming out. There's a notion, instead of using that var keyword that I've talked about a couple of times, you can use const to create what's called a constant.

[00:12:29] And other programming languages also have a notion of a constant. So that's getting a little out of our topic, but just to make sure we're clear on it. If I said var a = 42, I'm making an a that can be changed as many times as I want.

[00:12:42] But if I said const a = 42, I'm making an a that can never be changed again. And if I do a = 10, it will either silently fail or actually throw me in error. And that depends on strict mode, which we may cover later. But const is the way you make a variable that can't be changed later.

[00:13:02] And that's only in the newest versions of JavaScript.