Jonas: Welcome back.
In this video you're going to learn
how to mutate variables
and also how and why JavaScript does type coercion.
But before we talk about any of that,
I want to show you something else that we also have
in any programming language in the world,
and that is comments.
So with comments we can really comment, like piece of code
and describe what they do.
Okay, so let's try it out and in JavaScript
there are two types of comments.
There are single line comments,
and we work them just like this,
and also multi line comments,
and I'm going to show you in a second how they work.
But with single lines we simply write // like this,
and then we can do any text that we want after that.
So in here I'm simple going to write
that these are the variable naming rules.
Okay, because that's actually what I did
here in these lines of code.
So I showed you how we have to name our variables.
And so now with this comment here I can very simply
describe that this is what we did here.
Okay, we can also do multi line comment
and that is /* and then * and / again.
And then on multiple lines,
and everything we put here in between will be a comment.
So one line of comments, two lines,
and so on and so forth.
Okay, and here I'm going to use this multi line comment
to say that this lecture here
was about variables and data types.
So variables and data types and this is also a comment
like pattern where it then adds some asterisks here
just like this, basically just to separate these lectures.
Okay, so variables and data types, that was the last lecture
and now in this lecture we will have
variable mutation and type coercion.
Alright, now just in order to get rid of this code here
so that it doesn't get in my way I can also comment out
this entire piece of code, just like I did before.
So that's another common use case of comments,
is where you basically comment out some code
that you don't want to get in your way for some time.
Okay, and so now I commented it
and now it will no longer be executed.
So I can reload this now and then we don't have anything
logged to our console because all of this here is gray,
and so it's really commented out.
Okay, anyway let's continue with our persons example here
and learn all about variable mutation and type coercion.
Okay, so I'm going to reuse some of these variables,
so firstName is still John,
and has also defined the age as being 28 again.
So we have here two different data types, string and number,
but let's see what happens if we want to print
them together to the console.
Okay, so let's give it some space here,
I prefer when this text here is a bit more at the top.
So console.log and so let's basically do a string
which contains John space 28.
Okay, so we can say firstName,
then we can use the + symbol,
and we're going to explain to you later
that this is an operator,
so for now let's just simply use this here
to join these strings.
Then we can do a space and then another + to add the age.
Okay, so we are hoping that this here will then become
John space 28 to the console.
Okay, so let's check that out.
And indeed we have John 28.
So, how did this work, because remember that age here
is actually a number and not really a string
but still it logged it here as a string
in this entire John 28 string.
And so this works thanks to something called type coercion.
Okay, so what this means is that JavaScript
automatically converts types
from one another as it's needed.
And in this specific case it converted this number here
to a string in order to be able to join these three strings.
So John is a string, then the space here is also a string,
and then age the number will automatically be converted
by JavaScript also into a string so that it can then
join all of this string into one bigger string.
And so automatically JavaScript does this work
for us here by a process called type coercion.
And other programming languages are not like this
we would have to convert our variables
but JavaScript is easier,
it takes all that work away from us,
and does it automatically.
And joining strings like this here
is just one of many examples of type coercion
that we will encounter throughout the course.
So type coercion here happens all the time in JavaScript.
Alright, let's now try out another example
here with joining strings
and so let's create some more variables.
So, job, and now I'm going to show you something different
which is basically to declare many variables
on the same line and then define them later on.
So, job to say Johns job, and then we can also define
a variable called isMarried.
So, basically like marriage status saying true or false
whether he is married or not.
And now we can say job is teacher
and then that isMarried is false.
Okay, so we declared both of these variables here
and they are then undefined, remember.
So that's what we had here,
so I declared the variable here, job in this case,
and it was then undefined, remember,
and only later in this line here I then assigned
a value to that variable.
So that's exact same thing that we do here,
so here we declare multiple variables on the same line
then I assign values to them here in these different lines.
Okay, and so that's also actually like a common practice,
in case we wanted to declare many variables,
it's a bit cleaner to do it like this,
all in one line and then simply
assign them the values a bit later.
Now what happens if we want to log to the console
a variable that has a Boolean in here included.
So let's try it out with console.log
firstName and then let's say so John is a,
and then the age here, year old
and then finally the job.
And if we then want to include the Boolean
that we defined before well then we can also like
let's say, Is he married?,
so we kind of ask a question here,
and then let's see what happens when we try to join
the isMarried variable here into this string.
Okay, so that looks a bit confusing here,
but what should happen is that John is a 28 year old
teacher, is he married, false.
So let's take a look at that and we get this error here,
and that's just because I was missing this + sign here.
Let's try it again, and so John is a 28 year old teacher,
is he married? False.
And so you see that even the Boolean here gets converted
to a string, so JavaScript also does type coercion
with Boolean's.
And if you now actually away this variable here
and so I'm commenting it out here,
well let's see, then it should say undefined.
Okay, so even the undefined is coerced into a string.
So basically converted into a string.
Okay, let's take a look again
and so now it says false.
Alright, so this is type coercion
and now again I can write a comment here
saying what we did in this particular section here.
Okay, and now let's actually look at variable mutation.
So variable mutation basically means
to change the value of a variable.
And so that's something that we didn't do
up until this point but of course that's something
that we can do with JavaScript variables.
And so let's now redefine the age.
So we can say age =
twenty eight, for example.
And so this time we don't use the var key word,
so this part is not necessary because the variable
was already defined before it, it's already declared
here in this place with the var keyword.
And so when we want to change it
we no longer need the var keyword.
So all we say is age and then the new value,
and in this case here it is twenty eight
as a string this time.
And so as explained to you in the last lecture
JavaScript automatically figures out the data type
and can change it on the fly.
So before it was a number and now it is new
and it's a string.
So that is the magic of the JavaScript dynamic typing.
Okay, we can also of course change something else,
let's change the job here.
So, job and let's say a driver.
Alright, and so let's now log it again to the console,
or instead of logging I want to show you something else.
So we've been logging these values to the console
all the time, but now I want to use alert.
So let me show you what alert is going to do,
and it's this beautiful window here.
So we get a pop up window basically.
So John is a twenty eight year old driver.
Is he married? False.
Okay, and so this time it's not in the console
but instead it is like this small pop up, or alert window.
And you see that basically the page here
keeps loading until we actually hit OK here
and make this pop up disappear.
So the page is loading, it cannot really finish it's work
until we hit OK on this.
Okay, so we did some variable mutation here
and type coercion, we also observed
I showed you the alert which is an alternative
to console.log.
Let me just show you something else here
which is if we can actually in an easy way
get data from the user with a similar method that alert.
So we can use prompt and then basically ask a question here.
So let's say What is his last Name?
Okay, so we say prompt What is his last Name?
We will then be able to input a value.
And that value we can then store into a variable.
So var lastName, so that's what we're asking for here,
and then we can log it to the console
just to make sure that everything works.
So lastName then we can also add the firstName here.
Okay, so that's the pop up from before
so this alert here,
and now here comes the prompt.
Okay, so What is his last Name?
And let's say Smith,
and now this will be stored into the last name variable,
and then we can log this variable to the console.
So firstName + the lastName will of course give John Smith.
So Smith is what we've just defined.
If we now say, like, Miller
then it will log John Miller.
Okay, so that's our input coming from that window.
Great, you're progressing at a great level here,
and already learned a lot of JavaScript.
Of course, there's tons more to come
and so let's quickly move on to the next lecture
where we're going to talk about some basic operators.
So like doing math operators,
and compare different values with one another.
So stay tuned, and see you in a second.