Welcome back.
Let's now start to really learn the JavaScript language
starting with values and variables.
And let's start
by getting rid of some of the code that we have here.
So this one here, isn't doing anything.
And let's also delete this one
so that we don't get that annoying popup all the time.
So in this section, I will be using persons as examples
for example, a person's name, a person's age or a job.
All right?
But anyway, let's talk about values now.
So a value is basically a piece of data.
So it's the most fundamental unit
of information that we have in programming.
For example, this text, Jonas, is a value.
All right?
So this here is a value.
And again, if we want to actually see this in the console
let's say console.log and then open up the parenthesis
and then close them here and then the semicolons.
So if I save and reload, then of course we get Jonas.
Okay?
And so Jonas here is the value
or we can, of course, have different values
for example, here 23 as the value,
right?
And so now we see 23 in the console.
And the same is true, here.
So in this line of code where the values are actually 40
and eight and 23 and 10.
So all these four are different values.
And then these mathematical operators here
joined them together to form just one value.
And that value is then 61.
Okay?
And so a value is basically the smallest unit
of information that we have in JavaScript.
Now, one extremely useful thing that we can do with values
is to store them into variables.
And so this way we can reuse them over and over again,
for example we can say, let,
and then the name of the variable
and then assign a value like Jonas to this variable.
Okay?
And so what we did here is called declaring a variable.
Okay?
And so this will actually create a real variable
in your computer's memory
and we'll store this value inside of that variable.
And actually that is exactly what we did up here,
right in the beginning.
So here we declared a variable called JS
and assigned the value of amazing to that variable.
Right?
And so now it hopefully makes sense to you
what we did back then.
So I like to imagine a variable, like being a box.
So in the real world, a box can hold some object
for example, a book,
and we can then write a label on the box
to describe what's in it.
And then we can find the object later when we need it
by using that label.
And variables actually work in the exact same way.
So here, basically we have a box called firstName
and into that box, we put the value of Jonas.
And now if we want to use this value
all we have to do is to basically use this label
or in other words, this variable name.
So first name in this case.
And so let's use it actually.
And for that, once again, I will use console.log
and you will see me using console.log
throughout this entire course, actually.
So whenever we need to output something from our code
to the browser, we always use console.log like this.
And so here now, instead of passing a literal value
like we did here and here and here,
now we can pass in,
So we can write here, the variable name,
so first name.
Okay?
And if I save and reload, it let's see what happens.
Indeed, we get Jonas.
So from line number eight.
And so that's right here.
And that means that indeed
or variable declaration up here worked.
And if we now change this
to Bob, let's say, then here we should get Bob.
Right?
And indeed, now it's Bob.
Let's put it back.
And of course we can now use this variable name many times.
So let's just copy and paste this here a couple of times
and give it a save.
And so now we have it three times
and that means that whenever JavaScript sees
this variable name here it will basically replace it
with the original value that we assigned to the variable.
So again, that's Jonas and this is extremely useful
because now if I want to change the first name
to something else, I only have to do it in one place.
So just here.
So let's change it here to Matilda
and if I save it now and reload,
of course it will change in all the three places.
So this is one of the big advantages of variables.
Without variables, I would now have to manually change
the value everywhere to Matilda.
But like this everywhere where I reference this variable
it will automatically changed to Matilda.
So that's one of the most important things
to keep in mind about variables.
Great.
And now that we know what a variable is
let's just very quickly talk about conventions
and rules for naming variables
because we shouldn't just give random names to variables.
So first, the way that I named this
variable here is called camelCase,
camelCase means that whenever I have multiple words
in a variable name, I write the first word with a lowercase
and then all the next words with upper case, like this.
So if it was just first, we would write it like this.
But if we had more than one word, like first name person
then you'll see that all the subsequent words
are written with this uppercase letter.
And this is kind of a standard in the JavaScript world.
But of course, there are other ways of naming variables.
For example, we could write
first_name
with an underscore like this,
and this is very popular in other languages
like Ruby or like this.
Okay?
And you can use whatever you like most
just keep in mind that it's kind of a standard
in JavaScript to write variable names like this.
So usually whenever you see other people's code
the variables will usually be written
using a the camelCase notation.
So that's kind of a convention of
how to name variables in JavaScript
but there are also some actual hard rules in JavaScript
about how we can name variables.
For example we cannot write something like this
like three years and set it to the value of three.
So this is an illegal variable name
and VS code actually warns us right away here.
And again that's because this variable name
starts with a number.
And if we try it to load this
in JavaScript, we would get this error.
So that's an invalid or unexpected token here.
And it's important to actually start reading
these error messages right from the beginning of the course.
So we see that this is a so-called syntax error
which means that we did a mistake in writing or a code.
So that's a mistake in the code's syntax
and we can also see the line where the error occurred.
So line 13 so that we can then go ahead and fix it
and notice how this error was shown in the console.
Even though we didn't use console.log in this case.
Okay?
So we don't need to use console.log
for the console to show errors.
All the errors that we make
will always end up in the console.
And also here with this, well, error icon.
Now anyway, back to our naming conventions here.
So we already learned
that variable names cannot start with a number.
And in fact, variable names can only contain numbers
letters, underscores, or the dollar assign.
So for example, if we try to write
Jonas and Matilda
equals JM
we would, once again,
get a syntax error.
Right?
And this time it's telling us unexpected token, &.
And, and again that's because this symbol here
is illegal in variable names.
They can only contain numbers,
letters, underscores, or the dollar sign.
So this here, for example, would be allowed.
So if we reload now, we get no more errors here.
Another error might occur when we try to name a variable
using a reserved JavaScript keyboard.
For example, if we did this, so new,
for example set it to 27,
then this would also not be allowed.
So you see unexpected token new.
And that's because new is a reserved keyword in JavaScript
as we will see a little bit later.
And the same goes for something like function.
So again unexpected token here,
if we wanted to fix that we could,
for example, start this variable name with an underscore
or with the dollar sign.
So that's the only two symbols that are allowed
besides letters and numbers.
Another variable name that's kind of reserved
but still actually allowed to use is the word name.
So we could do this.
And it would actually work.
But in some cases, this creates some problems.
Because again, this is kind of a reserved keyword
but it's still legal to use.
But since it is a keyword,
never call your variables just name.
Okay?
That's why I always call them first name, like this.
Let's actually get rid
of this one because we already have first name up there.
Now another convention is
that we should not start a variable name
with an uppercase letter, so we should not
do
this.
So that person, Jonas.
Now again, it's a convention, so that's not illegal.
It's just that we use this kind of variable names
with an uppercase letter for a specific use case
in JavaScript, which is object-oriented programming
as we will see later in the course.
So for now never do this, but instead you should write it
like this, with a lower case letter starting.
On the same note variables that are all in uppercase
are reserved for constants that we know will never change.
For example, the number PI
which is like 3.1415, and so on and so forth.
So we know that this number is never gonna change.
And so that's a constant.
And for that, we have a convention of writing it
in all upper case.
and VS code actually marks this variable name
with a different color
because it knows about this convention that we use.
Of course you could also write it like this,
but then this would be kind of weird actually.
So if it's a real constant, write it in uppercase
like this, so that's a pretty normal convention there
in programming as a whole.
Finally, to finish this lecture
let's talk about one final convention,
which is to make sure
that our variable names are descriptive
and that's very important to write cleaner code.
So when you name your variables
it should be really easy to understand
exactly what value the variable is holding
just by reading the name of the variable.
And that's kind of what we did up here
by calling this one first name.
But let me show you another example.
For example, let's say my first job,
programmer
and then my current job,
teacher.
So this is much, much better than writing this.
So job one programmer
and job two a teacher.
So which set of variables
do you think is more descriptive?
Is it these ones or these ones?
And it hope that you agree with me
that it's much easier to understand
what programmer and teacher are in this case here
by simply looking at the variable name.
So we know that my first job was a programmer
and that my current job is teacher.
While down here, well, we would simply know
that these are two different jobs.
We don't know anything about them.
And so this approach up here is a lot better.
So keep that in mind,
whenever you write your own variable names
and actually keep all of this in mind,
that we just talked about,
for naming your variables.
Okay?
So just to quickly recap what a variable actually is,
it is basically a box into which we can store a value.
So we give that box a name
which in this case here is first name
or in this case here, it's my first job, for example.
And then into that box, with that label,
we can store a value
which in this case is this programmer string here.
Then later into code,
we can reference that variable over and over again,
for example, like this,
my first job.
And if I save this, then of course here we see programmer.
Once again you probably saw
my code changing here automatically
from the single quotes, two double quotes
but that is just my automatic formatting doing its work.
And now if we want it to change this here, let's say coder.
Then it would change across the entire program.
And now we get coder here.
And that's what variables are all about.
They're one of the most important things of programming.
And so make sure to really understand them
before you move on.