OK, welcome back to lesson three.
We're going to talk about variables.
So what is a variable?
If you're taking math classes and especially algebra and calculus, you've probably heard of variables,
basically what they are ideas for, just basically a shortcut that will refer to some other piece of
information in math.
It's usually numbers, but in programming it could be anything.
It could be some text, it could be a number.
It could be a true or false value.
It could be a set of other pieces of data, which are some of those other values as well.
OK, so in this context, a variable is going to be basically picture a box and you put stuff into that
box and then what, you label that box, that's what the variable is.
So another way to look at it is probably closer to what's accurate for JavaScript is that the variable
is a shortcut.
So if you think about shortcuts on your computer, that is a file that links to another file.
And so that's a lot like what variables are.
You're really just assigning some data to a specific variable name.
And then that variable name is used as the shortcut to arrive at the data that you assigned to it.
In JavaScript, we have three different types of variables, we have VAR, which is the one that's been
around since nineteen ninety five.
And we have let which has been around since at least twenty fifteen and Consed as well since twenty
fifteen with Essex.
Now the reason we added Let and Consed to JavaScript is that they are a lot more strict and specific
and they are block scoped as opposed to VARs which are function scoped.
Because let and our block scoped and they're more specific, they are much easier to use in a development
environment that is calling for strict typing and trying to prevent some common errors from happening.
So we're just going to use Lett and Consed for the rest of our time.
And a rule of thumb is that you should use CONSED until you can't and then you should use let the reason
const and let are different is that const is a constant variable.
It means once you set it for the first time and give it its first assigned value, it can no longer
be edited with a different value for the same data type.
Let is a little bit different, it can be reassigned, so that means you can mutate it and give it a
different value.
However many times you want to make some basic rules that apply to all of these is that you can't give
a variable name that starts with a number.
So you can't have a variable called three or something like that or even have a variable that three
test or something.
It also can't contain symbols except for the dollar sign and the underscore.
And it can't be a reserved keyword, like the word function or the word F or the word delete.
These are special keywords in JavaScript that need to be used and understood only in the context of
their special powers.
And the best practices for naming variables is simply use a semantic naming convention.
Semantics is just the study of meaning.
And so a semantic naming convention means have a meaningful name for your variable.
If you're variable is going to store a bunch of numbers, then maybe you should call it no list.
Or if you're variable is storing a person's name, maybe your variables should also be the name of that
person, or it should be person one or something like that.
Camel casing is a standard for variable names in JavaScript and then there are a few other standards
depending on the type of variable.
One common suggestion is that if you have a cost variable, it is a constant variable that's used as
a constant for your whole script that you do all caps for that variable.
These rules are not ironclad.
As long as you are consistent across your own scripts, then it's something that people can understand
well.
So to get started, if you don't have a preference, go ahead and use Camil case for your regular variables
and we'll just use Kemakeza Keys for all variables in our examples.
OK, so let's take a look at some of these variables in action.
OK, so as you can see, we're starting with the example that we ended with last time.
We have Animal is hungry and age shows you the examples, what it looks like when we consider this information.
We're going to talk a word wrap so we can see this easier, and then now let's look at another example.
OK.
I'm going to show you a few other things that we can use to manipulate our window as well.
OK, so let's add to this and add our first and last name.
And for the last name, we could make it specific or we could also do a prompt.
Prompt is going to tell our browser to ask us for what it's going to be.
And then we'll be able to store that value in that new variable, so then when we want to consider,
we'll be able to just say first name.
Last name.
OK, so then it's going to print out here the first name and last name.
Let's save that from this again.
What is his last name?
Elsworth.
That's my last name.
Paice, Elsworth, cool, so we told it with the first name was, and then we asked the script to for
a different last name.
Let's try that again.
Let's just do Case Jones.
As you can see, it's going to take whatever we tell it.
So that's the power of programming is some dynamic interactive information.
So this is what variable mutation is, is that we're actually changing the value of this variable depending
on something else, so we can change it manually in the code, we could have it change based on a user
input, and that's called mutation.
And so that was similar to an alert.
We could also alert the same thing.
We just do an alert with the same information, unlike a console, that it's not going to output this
information only to the console.
It's going to put it in a pop-up.
Let's do Smith this time.
So Smith going in the console because of line twenty two, but Psmith showing up here in this alert
because of this alert line.
OK, now you know that prompts do a pop up and ask for information and alerts, do pop ups that just
output information.
How to be more specific about the differences between the three.
Let's take a look at VA and let.
And Consed
and Consed.
So if I do a var.
Test bar, then I can set this to any piece of data that I want.
And then I can reassign it.
OK.
I can also specify this without using var, so because var is the default, if I just do test bar,
then it will understand it as a var type.
It won't understand it as a type.
OK, so this can be declared, it can also be redesigned.
So this is a declaration right here because I stated the variable type and the variable name and it's
an assignment OK, because I also assigned it this variable right here with this assignment operator
equals sign and the number.
This is just an assignment, so this is a reassignment also known as a mutation.
OK.
And this also is a declaration and assignment, but because it's a VA, it doesn't require me to state
the word VA, but unfortunately I can also read declare the same variable.
And this isn't necessarily a problem.
For JavaScript, so it's a re declaration and assignment, but the problem with this is that it's not
very clean code.
Unfortunately, what this means is you don't have very clean code when you reuse the same variable re
declaring it.
What you're saying is that you don't have a very semantic purpose for this variable.
It's not being used in a very specific way.
So instead we prefer to use let because it does prevent those types of errors from happening.
Let's go ahead and comment this out.
Let's clean this up a little bit.
So with let if we were to do a test for sea, equal for that would be totally fine.
There's a declaration and assignment there as well.
What if I tried to do it again?
We would run into an error.
And there would be a syntax error that test Farsi has already been declared.
So this is really good, let prevents us from reusing our variable names in ways that would cause our
code to be more confusing.
But we are able to very simply take this variable, however we like is totally fine.
Consed is the one that prevents us from modifying this variable.
It can be declared with a number, whatever variable we want to give to it.
But notice that the color is a little bit different on here, and that's by design in visual studio
code.
I can't modify this now with another number if I try.
And run it, it will say uncaught type error assignment to constant variable.
As a result of trying to assign this to a constant variable, it shouts at me and says, no, this is
a constant, constant means.
It does not change.
So therefore, I cannot reassign or redeclared.
You can reassign, but you cannot declare.
OK, let OK, so that is it for just to go into a little bit more depth here, if we were to set a new
variable up.
But we did not give it any value and then we canceled it.
And then we see what happens.
There is a syntax error at line forty five.
That we're missing in initialism in the declaration.
So that's not good.
What if we turn this into Aulet and it doesn't require an initial value, but it is undefined?
So it's going to start out.
Let's go ahead and clean this up, so it's going to start out undefined.
So as a result.
It doesn't have any information to start out with now, if we were to do know, it would have a value
of no, but that value would essentially be empty.
So we can change this to be null.
And that's a special keyword as well.
And if we do that.
Let's put that right here.
And save it, so now, instead of being undefined, it is null, it still means it's empty, but we're
explicitly telling it that it's empty.
So at this point, this is undefined at this point.
This is no, that is it for now.
So we learned about variables.
We learned about the difference between VAR Let and Consed and we learned that there are certain limits.
You can't start variables with numbers.
You can't have variable names that symbols other than the dollar sign of the underscore.
And they can't be special reserved keywords like function if or delete and best practice definitely
use a variable name that is meaningful.
So it's easy to read your code and we prefer to use Camil case and some other ways of.
Reading very clearly, as opposed to having everything lowercase.
OK, well, we'll come back and we'll see you next lesson.
We're going to talk about hoisting.