Variables

[00:00:00]
>> WebDevSimplified: Now when it comes to variables, we obviously need a way to create our own variables, and we've hard coded everything. We wrote out true, we wrote out the number 42, whatever it is, we're hard coding all of our different numbers, and oftentimes you want to be able to store these values to use them in multiple places inside your code. This is the idea where variables come in. I like to think of a variable as like a box.

[00:00:18]
It's a box that you put a label on, and then you put something inside that box. So imagine you have a shoebox, you put a label on it that says decorations, and then you throw some decorations in that box. You've essentially created a variable called decoration that has some content inside of it. That is the whole idea of variables in JavaScript. Now there's technically three different ways you can create variables inside of JavaScript.

[00:00:40]
We're going to be focusing on the first way, which is let, and essentially that's a keyword that lets you create a variable. So how you do it is you type out this keyword let, you put a space afterwards, and then you type in whatever the name of the variable you want is. That variable name can be just like this on its own, or you can give it a default value. So to give it a default value, you use this equal sign followed by whatever value you want to use.

[00:01:03]
So let's take a look at creating a variable. We can just say let myName equal, and we can pass it in any value, which in our case is going to be Kyle. I have now created essentially a box with a label, myName on it, and I put the string Kyle directly inside that box. And now I can use that variable anywhere else in my code. So to use that variable, I just type out the name I give it, so I can say console.log, and I can pass in myName, and now you can see it prints out that name.

[00:01:30]
Essentially it takes whatever the value of that variable is, and it inserts that anywhere you use this name. You can almost think about it as like a find and replace. It replaces every instance of myName with whatever this variable value I define is. This makes it really easy for you to essentially use the same value in multiple different places inside your code. Now an important thing about naming variables in JavaScript is they follow a specific naming convention.

[00:01:53]
It's not required you follow this convention, but it is a general convention that most programmers use, and that is that if you have multiple words in your variable name, for example, myName is two separate words. The first word is always going to be all lowercase, and every word after that, the second, third, fourth, and so on, is going to start with a capital letter. This is often referred to as camel casing because we start with a lowercase, and the start of every word after that is going to be an uppercase letter.

[00:02:19]
Again, I don't have to do that. I can spell it myName like this, and if I spell myName like this, you'll see there's no errors inside my code. It still works, but it's a general convention that most people follow, which makes it easier to actually read what the variable names are inside of your code. Now it's important that you also don't put spaces or anything in your variable name. You may think, okay, myName is two words, I'll put a space inside here and I'll put a space here, but when I do that, it's going to break.

[00:02:43]
Variable names must be all one single word with no spaces at all inside them. We'll fix this code back to what it was before, and now we can kind of talk about the rest of how these variables work. First of all, if you don't want to give a variable a value, you can leave that equals portion off, so I can just completely leave this portion off, and now my variable has no value to start with, which is perfectly okay.

[00:03:03]
Generally, you're probably going to have a value for your variable though. Now you can also update a variable value. So for example, myName is Kyle right now, but maybe I changed my name. I can come in here and I can update that variable name. All you do is you type the name of the variable you want to update, followed by the equal sign, followed by the new value you want to give it. So I'm going to say my new name is Sally.

[00:03:23]
Now when I print myName out down here, it is Sally. Well, if I print myName out up here, you'll notice it's Kyle. Then I change it to Sally, and it prints out Sally down here. So it allows me to keep track of what my variable is, and I can update that variable when certain things change. For example, if I have like a count variable, I can initialize that count at one, and then later I can add one to my count, so I can say that my count is equal to count plus one.

[00:03:45]
So let's just come in here, we can log this out just to show you that this works. You can see we log out one, then since we add one to our count and resave it back to our variable, we now get the value of two. So updating variables works perfectly fine, and it's a great way to keep track of things that change over time inside of your code. Now the big benefits of using variables: first of all, it's much easier to read what your code is.

[00:04:06]
For example, I have this really nice name that tells me exactly what this value is. It is count. If I just had the number one somewhere in my code, I don't know what the number one means. It could mean anything, you know. So having this well-defined variable name is nice. I can also reuse this variable in multiple places, as you can see here. I'm reusing that variable, and it saves that same value, and you can update that value as it changes.

[00:04:26]
So variables are just a great way to store information, update it, and then reuse it throughout your code in various places. You're going to be defining variables all the time. Now const is another way that you can create variables, and this allows you to create variables that don't change. It's essentially the exact same thing as let, but const variables do not change. So if we come back into our code and I change this variable to const, just replace the word let with const, otherwise everything is exactly the same, we're actually going to get an error because I'm trying to change the value of this const variable, but it's a const, so it cannot change.

[00:04:57]
So we're going to get an error. Const variables are great when you want to create something that you know will never change. It allows you to essentially tell that to the world, saying, hey, this will not change. So if I'm writing code and I try to change it, it'll give me an error, which makes it easier to understand how my code works. Another difference between let and const is that you must give a const variable a default value.

[00:05:18]
So if I were to leave off a default value here and save, I'm going to get an error, and that makes sense because defining a variable and then not giving it a value, and it's a variable that can never change, that doesn't really make sense. So you must give a const value some type of default variable or default value that it can fall back on. Otherwise, besides those two minor differences, they work pretty much exactly the same.

[00:05:37]
You just need to make sure you give it a value and that you never reassign it. Now you're probably wondering, okay, there's two different ways to make variables. How do I know which one I want to use? You know, why don't I just use let because it's the more flexible of the two? Personally, I try to default to using const pretty much whenever I can. The reason that const is really nice to use, because if I see a const variable in code, I know it'll never change.

[00:06:00]
So I don't have to worry about keeping track of what the value is here and what the value may be later. I know it'll always have the exact same value everywhere inside of my code. While let, I don't actually know that is going to be the case, so I try to use const any time that I can, but as soon as I have a variable where I need to keep track of something or it's going to update, then I swap from a const variable over to a let variable.

[00:06:19]
Now this is personal preference. You don't have to do it this way. There's plenty of people that just use let all the time and don't care, or there's plenty of people that do it like I do where they use const more often, and some people just do whatever they want and don't really care either way. It's really more of a personal preference, and there's no one industry standard for this type of way of doing things.

[00:06:38]
It's just the way that I prefer to do things. Now something you'll also see in code is you may see variable names like this that are all uppercase with underscores between their variable names. This is essentially used to define variables that are constant and they're more global to your entire application. It's not like a required thing, it's more of a naming convention that is an industry standard, but if you have a variable that is a global variable that's going to be used multiple places all over your application and it's never going to change, such as like the name of your app or what the version of your application is, this all uppercase version of declaring your names is a common standard.

[00:07:10]
You don't have to follow it. It's just something that you may see inside of code, and when you see that, it generally means a global constant variable that never changes. And again, everything is uppercase, and then you put underscores between your different words to make it easier to read because obviously if there's no underscores, it would be hard to read some of these longer variable names. Now the final thing I want to talk about when it comes to variables is going to be how do we represent nothing.

[00:07:33]
So far we've made variables that represent the values for numbers, strings, and booleans. But what happens if I have a variable that represents nothing? Well, unfortunately in JavaScript, there are actually two ways to do that, and that's kind of the theme with JavaScript. There's usually lots of ways to do the exact same thing, and these are called null and undefined. They both represent nothing.

[00:07:52]
Essentially, I have a variable with no value at all, but they're technically slightly different. Undefined is used to represent a variable that exists. We have this variable, but we have not given it a value yet. This is very common if I create a let variable, for example, myName, and I don't give it a value. By default, the value of this is going to be undefined. If I log out myName, you'll see this prints out undefined.

[00:08:17]
So by default, when you create a variable and do not give it a value, it's undefined, relatively self-explanatory. So what is the whole purpose of this null type, a second way of doing essentially the same thing? Well, null is meant to essentially emphasize the fact that we have a variable and it has no value, but we intentionally gave it no value. Thinking about the box example again, if I have a box and I put a label on it, but I haven't put anything in that box yet, we would represent that as undefined inside of JavaScript.

[00:08:45]
But if I have another box, maybe it had some stuff in it at one point, but I took all that stuff out of the box and now my box is empty, we'd represent that as null because I have a box that is intentionally set to be empty. So the difference you can think about is undefined just happens automatically on its own. A variable just becomes undefined because you didn't give it a value. Null will never happen by default.

[00:09:06]
You specifically say, hey, this variable has no value, so I'm going to set its value to null specifically. And we can do that inside of code. I can come in here and I can say that this value is going to be null, just like that. Give it a quick save. Now you can see it's printing out null instead of undefined. I can do the exact same with undefined. I can set a variable to be undefined. It's not something you're going to see happen super often just because undefined usually is something that happens by default, but you can use it directly if you want to.

[00:09:33]
Really, I like to just let undefined happen automatically, and null is something I specifically set when I have no value for a particular variable. And if we kind of scroll down, we can see these best practices talking about that null is for intentionally empty states, undefined happens naturally, and null is also a great way to clear out a variable. For example, if I have a variable with some value and then I want to remove that value, you can set it to null to say that this value has disappeared.

[00:10:05]
And again, undefined essentially means I don't have a value yet, and null means I have a value, but my value is that I have nothing at all. Yes. If you're comparing a null, like, say you haven't set name to anything, and later on you said, is this null or is this undefined? How would you check to see if that would be? Yes, that is a great question. That is actually something we will be covering a little bit later in the course, but I'll give you a little bit of a sneak peek.

[00:10:26]
So essentially, if I do null == undefined, that is going to return true by default because they both essentially represent nothing. So you can kind of think of as interchangeable in that particular sense. Yeah, JavaScript is really confusing. They're two different things, but they actually equal each other, and we'll get into some of the complexities of why that works a little bit later when we start talking about something called type coercion.

[00:10:49]
Yeah, null and undefined, since they both represent the same thing behind the scenes, they are technically equal to each other in this particular sense. Yep, and that's a very common thing. Not everyone follows the specific syntax of undefined means, you know, default value, and null means it truly has no value. Some people use undefined always. Some people use null always. So it's nice that you can check for both at the exact same time.