Primitive Types & Operations

[00:00:00]
>> WebDevSimplified: Without further ado, we've kind of covered the free-face stuff that we need to talk about, and now we can actually finally start diving into what the heck JavaScript even works like, like how do we actually write our code because so far I've only showed you code we've copied and pasted between here and our JavaScript file. Now the first thing we need to talk about is types inside of JavaScript. Types are essentially a classification for what something is.

[00:00:21]
So you can think about in the real world, I have a dog, I have a cat, I have a table, I have a computer. That's what these things are. In JavaScript we have the exact same concept. A type represents what something is, and there are three specific primitive types that I want to talk about, and a primitive type just means it's a very simple type that's built directly into JavaScript. There's quite a few primitive types, but the three main ones we want to talk about are going to be numbers, strings, and booleans.

[00:00:46]
Now a number represents literally any number out there. It can be a negative number, a positive number. It can be zero. It can be a decimal. It doesn't matter what type of number it is. If you write out a number inside JavaScript, it'll be using the number type. The next type is going to be strings. Strings represent any type of data that is text-based, so this could be a single character, this could be a name, this could be the entire script to a movie.

[00:01:09]
It doesn't really matter as long as it is text, it is going to be a string, and when you create a string inside JavaScript, you need to wrap it inside of quotes. Now there's technically two ways to create strings. We have a single quote method which uses just a single quote, or we can use the double quote method. Both of them work exactly the same. The only thing is you can't mix and match. If you start using a single quote at the beginning of your string, you must use a single quote at the end.

[00:01:33]
To show you a quick reference here, we have this Hello World 2, and I could do this with single quotes by just saying Hello World like that, and if I save, you can see it automatically shows up over here, and you'll also notice technically my quotes were changed to double quotes. That's because Prettier by default converts all your quotes to one of the two types. You can choose what you want. By default it'll choose double quotes, but again, it doesn't matter what you use.

[00:01:55]
The only important thing is you can't mix and match. If I have a double quote and I try to end it with a single quote, this is an error. When I save my code, you notice we get an error. You must always use single quotes at the start and end or double quotes at the start and the end. Doesn't matter which one you choose, they both work exactly the same. There's also a concept of an empty string. This is just a string with no content.

[00:02:15]
So you can see here I have an empty string using single quotes, and here I have an empty string using double quotes. Essentially, again, this is text that has no content at all inside of it, something that you'll somewhat see commonly inside of code. Now the final major type is luckily the easiest of them all, and that is a boolean, and a boolean only has one of two values. It is either true or false, on or off, whatever you want to call it.

[00:02:36]
Essentially, it's just going to be something that represents a state of true or a state of false, and you just write out the words true and false. The important thing is they are case sensitive. You must use lowercase true and lowercase false. If we take a look at that, we can actually print this out. We can come in here and say true, and now it'll print out true to our screen, or we can type in false, and that'll print false to our screen.

[00:02:56]
But again, it's case sensitive. If I type a capital F here, I'm going to get an error because it must be all lowercase false or all lowercase true. Now with these different primitive types, we can do operations on them. Numbers obviously make a lot of sense, we can add numbers together, we can subtract, multiply, divide, we can do tons of different things with our numbers. The important thing to note though is that JavaScript follows the common order of operations you're used to.

[00:03:24]
So if we write out 2 + 3 times 4, it first multiplies 3 and 4 to give you 12, and then it adds 2 to the number. If you wanted to do it in a different order, you would need to use parentheses around 2 + 3 to make it add up to 5 first before it did the multiplication. Again, your normal basic order of operations you're used to in math applied directly inside of JavaScript. Now you can also do comparisons between different numbers, and when you do a comparison, it'll return to you a boolean of true or false if that comparison works.

[00:03:50]
So to check to see if two numbers are equal to each other, you can use two equal signs next to each other, and that's important. You need to make sure not one equal sign, but you use two equal signs next to each other. So to show you a quick example of that, I can say 4 equals equals 4, and if I give that a quick save, you can see that returns true because these are both the exact same number. If I change one of the numbers to 6 and I save, you can see it returns false because these are two different numbers.

[00:04:14]
Now I can also do the opposite. I can check are two things not equal to each other, and inside of JavaScript that is done using the exclamation syntax, so we use exclamation followed by an equal sign. Essentially you just replace one of those equal signs with an exclamation. Now when I save, since these two numbers are different, it returns true, while if these two numbers were the same, it is returning false.

[00:04:33]
And this exclamation symbol is a very common thing in programming that essentially negates something. So it's telling you to do the opposite of something, and we'll see a few other places that it's used. Now some other comparisons we have is like less than, greater than, less than or equal to, greater than or equal to. The common syntax that you're used to for number comparisons, they're all going to work inside of JavaScript and they'll return true or false depending on if that evaluates to true or false based on the numbers you pass in.

[00:05:01]
Now the rest of the different types we have have slightly different operations. For example, strings, when you use a plus symbol on strings, instead of trying to add them together like their numbers, since that doesn't make sense, instead it combines these two strings together into one single string that we can render on our page. So inside of here, let's say that we wanted to get a string for a name.

[00:05:20]
We have Kyle, and I wanted to add my other name, last name Cook onto that. That's going to combine these two strings together, Kyle and Cook, and now we get one string, Kyle Cook. You'll notice there's no space between them, so I could just throw a space inside of here if I want, and now you can see it combines them together directly. So just know there's no spaces or anything automatically added for you.

[00:05:40]
Everything is just directly added one string to the other, just combined together. How about nested quotes or escaping? Yes, so inside of strings, let's say we wanted to put an apostrophe inside of our string. We can say like it is Kyle's something. If we have double quotes, we can put a single quote directly inside of here. You can see when we print our output, that single quote shows up just fine.

[00:05:59]
If I wanted to put a double quote inside my string, well then I would just use single quotes to wrap it, and now I can put a double quote inside my string, and that's going to work just fine. You can see that places that double quote inside of there. You can also do escaping if you need to. There's certain cases where maybe I want to have single quotes out here and a single quote inside of here like this, you could use, I believe it is this backslash, there we go, and now when I save, you can see by putting that backslash in front of there, it allows it to show up over here.

[00:06:25]
You'll notice though, Prettier automatically formatted this for me to use double quotes on the outside and single quotes on the inside because for the most part, if you want to have a quote inside of the different type of quote, it's better just to use that alternative quote on the outside and then the one you need on the inside. So that's pretty much the only reason you would use one style of quotes or the other for writing out your strings is if you wanted to nest one type of quote or the other inside of each other.

[00:06:51]
Does that answer your question? Perfect. Any other questions about strings, variables, anything like that? How do you do multi line if you're? Yeah, so multiple line strings. The best way to do that is going to be with the back ticks that we're going to be talking about later. But you could also, if I wanted to add a line break in here, I can use this backslash symbol plus an N that represents a new line character, and now if I save, you can see it uses a two line string inside of here.

[00:07:11]
But again, generally when you're working with multi line strings that are going to be more complex than this, back ticks are going to be the way to go, which again I'll talk about later inside the workshop. And we can talk about other string comparisons. We have the same equal equals and not equals. This works exactly the same inside of strings as it does for numbers. So if I wanted to compare these strings to see, are these two strings equal?

[00:07:32]
Well, obviously they're not. If I want to check to see if they're not equal, you can see that returns true because they're not equal to one another. Lastly, something that you may see but is not super common is you can technically do comparisons using the less than and the greater than symbols on strings, and this will do a purely alphabetical based comparison. So we just copy this code and we come over here, paste it down, you'll notice that since an apple starts with A and banana starts with B, apple is technically before banana, so it'll return true.

[00:08:00]
The important thing to note about this though is that capital letters behave slightly differently inside of JavaScript, so you can see here when this is a capital B, it now returns false. So this is something important to understand that this type of comparison is not always the best way to compare strings to see if they're, you know, earlier in the alphabet or later because capital letters behave differently than lowercase letters, so that will just give you a little bit of something to worry about.

[00:08:21]
Now booleans have a few additional operations that you can do to them, but luckily since it's only true or false, there's only a few different ways you can do operations, and these operations are specifically the AND and the OR operation. So if you use two ampersand symbols next to each other, this represents AND inside JavaScript, and essentially I'm saying true AND false, and the only way that AND is ever evaluated to true is if both values are true.

[00:08:48]
So is this true and is this true? If so, return true. Otherwise return false. So true AND false will give me the value of false because one of those two values is false. If I did false AND false, both those values are false, so again it would still return false. The only way AND ever returns true is if both values, the left hand side and the right hand side are both true. Now OR is a little bit different because it only requires one of the values to be true.

[00:09:13]
So if I did true OR false, this will return to me true because one of those two things is true. If it was false OR false, both of those are false, so it's going to return to me false. So it's really just a way to compare are both of these things true or is at least one of these things true? That's kind of the way you can think about AND and OR. Finally, that exclamation point that I talked about, how it kind of negates different things.

[00:09:35]
If you use an exclamation point with a boolean, it just gives you the opposite boolean. So if I say exclamation point true, that gives me false. Exclamation point false will give me true. So it allows you to flip a boolean from one value to another value. You can also do all the exact same comparisons with booleans with equal to see if they're equal to each other and not equal to see if they're not equal to each other.

[00:09:56]
Those type of comparisons of equal and not equal work on pretty much every single type inside of JavaScript. Now, the final thing we can do with types is actually determine what the type of a variable is, and there's a fancy keyword called typeof. This allows you to check to see if a type of something is one type or another, and it'll just return to you a string of that type. So if we come in here and let's just close out all the code we have inside of here, I can say typeof and then just paste in any value I want.

[00:10:21]
Let's just say a number. You can see that prints out the text number. I could then check the type of a string, and that's going to print out string, and finally I could test the type of a boolean, and that'll return to me boolean. So anytime you have a variable you don't know what type it is, you could throw that typeof keyword in there and check to see what that type is. It's a handy keyword for certain scenarios.