Instructor: In this video, you will learn
about the fundamental concept of variables.
Variables are a fundamental concept of
every programming language in the world,
but what actually is a variable?
Well, we can say that a variable is like a container
in which we can store a value in order to use it
over and over again in our code, instead of having
to write the value each time that want to use it.
So let's actually get rid of this code here,
and let me show you how to declare
a variable for the very first time.
We have to use the var keyword
and then the name of the variable
and I'm going to call this one firstName,
then equal, and then the value that you want
to assign to the variable.
In this case, what I want to assign is a
text string called John,
and then again, our semicolon at the end.
And so with this, we just declared our very first variable.
The variable name here is firstName, and the value that
we assigned to that variable is John.
So you can basically think of this variable,
this firstName variable here, as a piece of memory
in your computer in which this John string here is stored.
I use these quotes here to declare
this text here, so this string.
I could also have used the double quotes, like this,
but I think it's a bit more modern to
simply use these single quotes.
When we declare some text, we usually just use
the single quotes just like this here.
Throughout the section here, I will be using variables
about persons for all the examples, so stuff like
names or jobs or age or something like this.
So, something we find: persons.
Let's now do again a console.log
and what we're gonna log now is
simply the firstName variable.
And so what do you think will happen
when we reload our page now?
Let's take a look at that.
And indeed, you see John now logged to our console
and that's because we assigned John to this variable
and then JavaScript can retrieve the value
of this variable here, which we declared as John.
And so firstName here is effectively the same as John, okay?
Did that make sense?
Let's all declare another one, and again, we have
to use var and now let's say
lastName, equal, then again I use these quotes,
and then let's say that it's Smith.
So John Smith.
That's the lastName, amd let's declare another one
called age and let's say that John is 28 years old.
So you see that now it's no longer a string
like we had here, but it's now a number.
And so that means that it's a different data type.
Here we have text, but here we have numbers.
This is a good time to actually talk about
different data types in JavaScript.
In JavaScript, there are five different data types:
Number, String, Boolean, Undefined and Null.
So far, we have already seen the Number and the String.
Now primitive data type just means that it's not for
objects, unlike most things in JavaScript.
So they are just simple, primitive, non-object data types.
First off, we have Numbers, and JavaScript numbers
are always floating point numbers, which simply means
that they always have decimals, even if we
sometimes don't see or even don't define them.
For example, five, it's like having five point zero.
In other programming languages, many times it
doesn't work like this and you have different
data types for integers and decimals, but not in JavaScript.
So here, all numbers are simply float numbers
even if they look like integers.
Next up, we have Strings which are simply
a sequence of characters and so they are
just used for text like, with the example before,
with the last name and the first name.
Next up, the Boolean data type is a logical data type
that can only take one of the logical values true or false.
To make it simple, a Boolean is always either true or false.
And we will see why this is very important
over the next lectures.
The next one is a bit more difficult to understand.
Basically, Undefined is the data type that is
automatically assigned to a variable
that doesn't have a value yet.
Sounds a bit more complicated than it actually is,
and don't worry, I'm gonna show it to you a bit later.
What matters here for now is that, basically,
Undefined means non-existent.
And finally, there is another data type which is
quite similar to Undefined and that is Null.
Null also means non-existent,
but it's slightly more specific.
Again, we will talk more about this later on.
Before we move on, there's something very important
to note here which is that
JavaScript has a feature called dynamic typing,
and this means that we do not have to manually define
the data type off a variable like in
many other programming languages.
Basically, JavaScript automatically figures out if a
variable is a string or a number or if it's undefined
or Boolean, and then assigns the data type to the variable
without us having to do anything.
And if we then later assign another value
to the same variable but with another data type,
then JavaScript will automatically change
the data type of the variable as well.
This can, of course, be very useful and save us
some coding time, but it can also be the source of
some difficult-to-find bugs, which means errors in our code.
So we almost have to be careful
with what we do with our variables.
All right, and that's it, now let's actually see these
things in action again, and move back to our code.
To show you the Boolean data type, let's create a variable
here called fullAge,
so var, fullAge,
and then say true.
Remember that Booleans can only be true or false,
so in here we can simply say true or false.
I could of course also have written false,
but in this case, well John is of course
of full age which is 28 age.
Now let's take a look at the console
when we log this variable here.
So fullAge, semicolon, and then reload it.
Now you see here that it's true.
It also appears in this lively different color here,
this one is blue, and the John string here is black.
Here it also looks a bit different, so this of course
is not in quotes, we simply write out true like this
because it's a reserved JavaScript keyword.
Now before we move on in this lecture, I wanna
quickly talk about these variable names here.
It's a best practice in always giving our variables
meaningful names, instead of simply writing
something like x or abc or something like that.
We should never do that, we should always say in our
variables what we actually want, or what this
variable actually means, so in this case here we have
John and that's a first name so we called this variable
firstName, and not just some random sequence of characters.
And the same, of course, for lastName, age, and fullAge.
So again, that's a best practice.
Of course it would work the same if we say a,
for example, and a here.
If we now log it through console, then of course
John is still here, but again, we want our
variable names here to really have some meaning.
Then this way of writing the variable name with this
first word here, and then the name, where I separated
them with a capital letter, that's the
so-called camelcase notation.
So we could have done it like this, so firstname
all together, but then it would be kind of difficult
to find where the second word starts.
We could also have done it like, with an underscore,
but in JavaScript it's kind of a convention
to use the camelcase notation, like this.
So we start with a small letter in the beginning,
and then when we have a second word,
then that one starts with a capital letter.
In the case of age here, for example, that's not the case
because we only have one word, but then here again
in fullAge, we have the second word with this capital A.
That's not about the JavaScript functionality itself,
that's more of a programming convention and a best practice.
Moving on, let's define yet another one,
and this one I'm going to call job.
Now the difference here is that I'm
not going to assign anything to this variable.
So I can declare a variable but not assign a value to it.
So let's see what happens when we
now take a look at this variable.
Can you guess what's going to happen here?
I hope you can.
Indeed what we see here is now undefined
coming from script dot js at line 11.
So this line here prints undefined to the console,
and remember that when I showed you that slide,
I mentioned that undefined means non-existent,
and so that's the case.
So, we declared the variable but we didn't assign
any value to it, and so therefore, job is simply
undefined, and so that's what we see in the console.
We can then later go ahead and assign something to it.
So let's say job is teacher
and if you do the console log then again,
and let's just copy it here,
well, then we should see the Teacher.
And here we go.
So, from line 14 comes the teacher after
we have declared it here in this line above.
So we have strings here, we have numbers, we have a Boolean,
and we have also the undefined right here.
These four are the most important data types
that I wanted to show you.
Just to finish off this lecture very quickly,
I want to show you some rules that we have to
keep in mind when we name our variables.
I already talked about the best practices when
naming them with this camelcase notation that
I explained before, but that was not really a rule,
that was more of a best practice.
Actually there are also some rules
that we have to keep in mind.
Don't worry, they're actually very simple.
All you have to know is that variables cannot
start with numbers or symbols, except for
the dollar sign or an underscore.
Let's try to break some of these rules to see what happens.
So, var, and I'm going to start a variable with a three,
so, with a number,
so let's try to say 3years equals 3
and then we load the console and now you see that
we get an error here in line 16.
So this is here, not valid, and again, because
we cannot start a variable name with a number.
So I'm showing you this in case you start naming
your own variables, you don't run into these errors
and then cannot figure out what this here means.
So always take care and use these rules
that I'm showing you here.
Now if you wanted to fix this here, we would either have to
start with a number or with a dollar sign or an underscore.
These are the only symbols that can appear
in a variable name here in JavaScript.
For example, with the underscore, it would work just fine.
With the dollar sign as well, but as soon as I start
putting something else like this,
well, then again we get the error here.
And the same actually happens if I use a symbol
in the middle of a variable name.
So, something like john/mark, for example,
John and MArk, and you will see that
this here is not going to work again.
Okay, so we have an error here at line 17 now.
Now, of course, but I want the error now on line 18
so let's take a look at that.
And of course, it says unexpected token which is this one,
so in this case, we would of course, use the
camelcase notation here to make it a lot better,
and so now we don't have any error here anymore.
That was the first rule that, again, all variable names
must start with either an underscore,
a dollar sign, or a letter here.
And in the second, and last rule, is that we cannot use
reserved JavaScript keywords as variable names.
Something like function, for example, is not going to work.
So function equals 23, for example,
and this will not really work.
So you see, unexpected token function.
We can also not use something like delete
which is also reserved keyword.
And you will meet many of these keywords here
throughout the course, of course, but right now
just know that any of these keywords that we're
gonna use later, something like if, for example,
you'll not be able to use these as variable names.
So variable names really need to be our own made-up words,
and not the words that JavaScript
already uses in its language.
And, all right, that's actually all there is to know
about the fundamentals of variables and data types.
That's already a huge step forward and a very important
concept in any programming language of the world.
In the next video, we're gonna dive a bit deeper
into variables and do some more stuff with them,
so stay tuned for that next video.