Now I mentioned that variables
would be labeled data containers,
which allow us to save values
so that we can use them later
in a different line of code basically,
or possibly also multiple times.
And to show you the idea behind variables,
let's say we want to output
the same alert with the same text again.
This all doesn't make too much sense,
but we're just getting started here.
Now, of course, we can copy and paste this code line
as I'm doing it here.
If we do that and I reload this page,
I get "Hi, I'm Max!" and then I get this again.
And then I got the alert with the number
because that's the order of alerts we're defining here.
But this approach, besides the fact
that it's not doing too many useful things,
has one major downside.
I'm basically copy and pasting this text here.
And that means that if I want to output something else,
let's say, I want to say "Hi, I'm Max!"
with multiple exclamation marks,
I have to update it in two places.
And for this simple example here,
that's of course not too difficult or too bad to do,
but it's also a bit redundant.
That's where a variable could help us.
What if we could save this text in a variable
and then just reuse that variable for both alerts?
Then if we want to change that value,
we just have to do it in one place,
in that variable, instead of in multiple places.
And therefore, we can now add a new feature,
a new line of code to our script here.
We can add a variable.
And we do this with a special keyword in JavaScript.
JavaScript is all about special keywords
that give certain instructions to the browser.
We saw one keyword, one instruction here,
the alert instruction,
which told the browser to show an alert.
Now that actually was an instruction
that caused something that we can see.
There also are instructions
which we can't directly see
as a visitor of the page.
And one instruction that we can't see as a visitor
would be that we tell the browser to create a variable.
And we do this with the let keyword.
Now, unlike alert, let is not used
like this, with brackets,
but instead you type let, and then a blank,
and then you choose the label,
the name of your variable,
because let is actually a keyword
that tells the browser to create a variable,
and every variable needs a name.
So here this name is up to you,
and we could use greetingText
as a variable name here.
One word about the name though.
It is up to you,
but it has to follow certain rules.
Most importantly, it has to be one word,
which basically does not use any special characters.
There are some allowed characters like a dollar sign,
but most characters are not allowed,
especially dashes or forward slashes
or colons and so on.
That's all not allowed.
So this must not be greetingText with a dash
or anything like that.
A underscore would be fine,
but the convention for naming variables
in JavaScript is actually to use this notation
where your word starts with a lowercase character.
And if it includes other words,
where you normally would have a blank
or anything like this, which is not allowed,
those sub-words start with an uppercase character.
This notation is called camel case.
That's just a name developers gave it.
And that's the naming convention you should follow
when naming your variables in JavaScript.
Now the actual content of that name is up to you.
It should describe the kind of value
you will be storing.
And in this case, I plan on storing this text,
which we could say is a greeting text.
And hence I chose this name
following this camel case convention.
Now that creates a variable and gives it a name.
One important thing is missing though.
We're not assigning a value.
And we can, but don't have to do this
in the same line with an equal sign.
As I said, you don't have to do this.
Alternatively you can also do it in a new line
by repeating that variable name
now without the let though.
You only use this when you first introduce a variable.
Once you did introduce it,
you can always assign a value
in any other line of code
by repeating that variable name
and adding an equal sign.
But you can also do this in one step like this,
and now just copy your value and add this here.
And now we created our first variable,
which we gave a name of our choice
and into which we stored a value.
And now that this variable is created,
we can use it in other parts of our code.
For example, we can use it here for these two alerts.
And for that, we just use that variable name,
and we replace our strings here
with that variable name.
And with that, we're telling the browser
to send an alert or to show an alert,
and to show an alert with the value
that is stored in that variable.
So we won't show greetingText
as our text in the alert,
but instead the text stored
in that greetingText variable.
That's the idea behind variables.
We can now reuse that stored value in different places.
We can also assign a new value if we want to,
because it's called variable, because it's flexible.
We can overwrite the value stored in there.
We could say "Hi,
"I am really Max!"
And now I'm overwriting the value stored in greetingText
with a brand new value.
Again, without the let keyword here,
so we don't have that,
because I'm not creating a new variable.
Instead I'm assigning a new value
to an existing variable.
And now if I would, again, alert this
and show the greeting text here
after assigning a new value,
we should see the initial value twice,
and then that new value once
before we then see that alert with 32 again.
And the reason for that simply is
that all your JavaScript code
is executed top to bottom, left to right.
That's how it always works.
It's executed line after line, step by step,
and if you alert a variable with a value,
and then you change that value in a line thereafter,
the first alert still uses the initial value
because at this point of time,
when code execution reaches this line,
the value has not been changed yet.
But in subsequent alerts,
after we change the value stored in the variable,
we will of course output that new value
because again, it's executed top to bottom
so that change in the variable value
will have an impact on that alert,
which we execute thereafter,
not on the alerts before.
That should hopefully make a lot of sense.
And hence, if I save that and reload,
I get "Hi, I'm Max!" twice.
Then I get this new text,
and then I get 32.
And again, this is still a very made-up example
to introduce those basics,
but that is how you work with values
and variables.