-: Let's now learn some more JavaScript fundamentals.
And in this video in particular,
let's learn about some basic operators.
And let's start by defining what an operator actually is.
So an operator basically allows us to transform values
or combine multiple values
and really do all kinds of work with values.
And there are many categories of operators
like mathematical operators, comparison operators
logical operators, assignment operators, and many more.
So in this video,
let's look at some of these types of operators
starting with mathematical or arithmetic operators.
So we already used the plus and minus operators
but of course we can do all arithmetic operations.
So we can also do multiplication, division and many more.
And let's use the minus operator to calculate ages
based on a person's birth year.
So let's say ageJonas equals so the current year,
and I will simply assume that right now it's 2037.
So that's far in the future
but let's make this a bit fun and then minus a birth year.
So let's say 1991.
Okay.
And then let's just quickly log it to the console.
So ageJonas using the auto-completion here.
And so my age is 46, at least if we are currently in 2037.
Okay.
Now let's do the same for someone else.
So let's say ageSarah
and notice how we're using
nicely descriptive variable names here.
So the age of Jonas and the age of Sarah,
instead of, for example, saying age one and age two.
So again, right now it's 2037
and then let's say Sarah was born in 2018.
So let's log her age to the console as well.
And we could now write the same line as this.
So again, console.log
but we can actually also log multiple values
at the same time.
So for that we just write a comma like this,
and then the second value.
And we could do even more by adding more commas.
So here we could then log something else.
Give it a save.
And so here we see now 46 and 19 years.
Great.
So that's how we used the minus operator
to solve a very simple problem
in this case, simply to calculate an age.
However, we can actually do better here.
That's because we have this value here
that is repeating itself.
So this year 2037 is appearing both here and here.
And so that's not good because we are repeating this value.
So if the year now changes
then we would have to change it in these both places.
And we don't like that.
And so that's why we have the concept of variables.
So instead of having this value here,
let's say now and then we assign this value
to the now variable.
Okay.
And notice how I'm always by default using const.
Okay.
And that's because I'm not changing
any of these variables here anywhere in my code.
Only if I needed to change them, I would switch to that.
Okay. And now here I can replace this one with now
and this one and it should work the same and it does.
Great.
So that's a very good use case for a variable right there.
And of course we can use
all kinds of different math operations.
So let's say console.log
and now we could go ahead into
ageJonas times two,
so using this asterisk or star,
or we could also do
ageJonas and divided by two,
and notice how these are two different calculations here.
So one calculation
and another one,
or basically another operation.
And that's because as I mentioned before,
we can log different values at the same time
in one console.log.
So here we are creating one value
and here we are creating a second value.
Let's actually divide it by 10
and then let's also use the exponentiation operator.
So for example, two to the power of three, okay.
And here we can use a comment to explain what this means.
So that's a nice use case.
So three means two to the power of three,
which is equal to two times two times two.
So three times this,
so this should be eight, right?
Let's try that.
And indeed 46, which is Jonas' age, times two is 92,
then divided by six is 4.6.
So that's this.
And then two to the power of three is indeed eight.
Nice.
Next, there is another use case
that we didn't use yet for the plus operator.
And that's because we can use the plus operator
to join strings,
or in other words, to concatenate different strings.
So let's create two variables,
firstName equals Jonas
and lastName equals Schmedtmann.
And now I can concatenate these two strings using plus.
So let's log that to the console.
So firstName plus lastName.
And let's see.
And indeed we have now one big string
with both of the names together.
So both of the strings that we declared earlier.
But what if we wanted a space in between there?
Well, that's not too hard.
All we need to do is to create another string
which is just a space
and then concatenate it here with these two.
And we can actually do that right here.
So we want this string,
firstName which is just Jonas.
Remember the JavaScript engine
will simply replace this string with this one.
Then we create an empty string
or actually a string with a space
and then we add that one to lastName.
So that's gonna be Jonas plus a space plus Schmedtmann.
Let's see.
And indeed that's exactly the result that we were after.
Now there's actually a better way
of doing this kind of concatenation of strings,
which is called template strings,
but let's focus on operators now.
Okay.
So this is a very useful one
that we actually use quite often.
So another type of operator
is actually the typeof operator,
which we already used up here.
So I'm not gonna do that again.
So remember here we had the typeof operator
and that would then give us the type of the value.
So we already know how that one works.
So let's move on to the next category,
which are assignment operators.
And the most straightforward assignment operator
is just the equal sign.
So let's say,
let x equal 10 plus five.
And so this equal sign here is actually itself an operator,
alright?
So in this line of code, we do actually have two operators.
We have the plus and then the equal.
Now in this case, x will be assigned 15
because the plus operator is executed
before the assignment operator, okay?
And that's based on a couple of rules
about operator proceedings that I'm gonna show you
in the next video.
So let me actually show that to you
that it indeed works as I told you.
And yeah, so it's 15.
So 10 plus five is done first
and then the result of this operation,
which is 15, will then be assigned to x.
And so that itself is another operator
but there are more assignment operators.
So let me show one to you, which is this one,
x plus equal 10.
So we know that at this point after this line
x is 15, right?
So let's write that as a comment.
And then we have this next line.
So this weird x plus equal.
So what does plus equal actually mean?
Well, let's write that again as a comment.
So what this means is x equal x plus 10.
So instead of having to write all of this,
we can simply write x plus equal 10, all right?
And so x should now be 25
because this x year from the previous step is 15.
So here we are basically reassigning the x value.
That's why I used a let here.
So again, x at this point here will be 15
and then 15 plus 10 should be 25.
And indeed it's now 25.
So let's write that result here so that we can keep track
as I show you more operators,
because as you might imagine,
there are more operators like this.
For example, there is x and then times equal four.
And I hope you can imagine
that this will mean x is equal x times four
and this should be in this case 25 times four, so 100.
Let's check and yes, it works.
The same operator also exists with divided here,
but I'm not gonna go into that one.
So to finish, I will just show you the x plus plus operator.
And what this will do is
x equals x plus one.
So let's see.
And yes, we have 101.
And we also have x minus minus.
So if we do that twice now,
what do you think will happen here?
And indeed we get 99.
So minus minus is basically
just the opposite of plus plus.
So this one will decrease the value by one
and so we end up with 99.
Okay.
So let's actually write
that these are assignment operators
and these are, let's say math operators.
And so now let's talk about comparison operators,
and these are pretty great.
So basically, we use comparison operators
to produce Boolean values.
So let me show you how that works
and then I'm sure it will make sense
that the result of a comparison operator
should be a Boolean.
So let's say we are trying to figure out
if ageJonas is greater than ageSarah, right?
So what could the result of this be
if we think about this logically?
So ageJonas can either be greater than Sarah or not.
And so if it is greater
then the result of this should be true
and if it's not,
then it should just be false.
So indeed the result of this one is true
that's because Jonas' age is 46 and Sarah is 19.
So this is basically like asking the operator,
"Is the age of Jonas greater than the age of Sarah?"
And the operator will then essentially reply with
yes, it is, which means true
or no, it's not, which means false.
And this can be very useful later
when we start taking decisions with our code
based on conditions like this.
Okay.
Now of course there's also the less than,
so the opposite,
and also there is greater equal or less than equal.
So basically we have this one and we have this one
then we have greater equal and less than or equal.
So let's see a nice application
of the greater than equal operator.
So let's say we wanted to test if Sarah is of full age.
So that means that she must be at least 18 years old,
and at least means that she is greater than 18
or exactly 18.
And so we can use the appropriate operator for that.
So greater or equal 18.
Okay.
So 18 should already be included
and that's why we have this equal here.
So this should be true.
And yes, it is.
So if we make her one year younger,
so let's say she was born in 2019, then her age is 18,
as you see here,
and she is still of full eight.
So it's still true here.
And that's because we included 18 here
in the age basically by using this equal sign.
But now if we made her born in 2020, she would be 17
and then this should turn out to be false.
So that's checked out and yes, now it's false.
Great.
Now keep in mind that in real development
we would actually store these results here.
So for example, the result of this comparison operator
or this one year,
we would store these results in variables
and not just always lock the results to the console.
Okay.
But in this case, I just wanted to show
how all of this works.
And so we need to console
because really all we want to do is to see the results
because we're still learning.
Okay.
We could also just do all of this
right here in the console immediately
but then we would kind of lose the record
of what we're learning
and it would be not so easy to scroll up and down.
Okay.
But of course we could just do this, right.
We could just write ageSarah greater or equal 18,
and we would still get the same result.
And this works because the console actually has access
to all the variables that is running
in the current browser tab, right.
So all the variables that we have here
like firstName, for example,
they are all right here.
Can even auto complete them.
Okay.
But then again, if we would reload this page now,
then all we just did would be lost.
And of course we could also simply as I said,
just store these results
if we needed them later in our code.
so isFullAge and then we could do this.
And so this variable
would be the one holding the Boolean value then.
And actually as you see here in this popup,
vs code is so smart that it figures out automatically
that this variable here is gonna be a Boolean
because of the code that we wrote here
which of course has a Boolean as a result.
Okay.
So now just to finish,
let's say that we don't want the intermediate age variables
and do this kind of comparison here,
all in one go.
So this here.
So let me show that to you in the code.
So again, imagine we have a lot of code
and we don't want to calculate these ages here separately.
So we could just do
now minus 1991,
and then test if it's greater than now, minus 2020.
Well, let's actually put it back to 2019
as we had before, or actually 2018 I think.
So this now is basically just the same as this year.
We simply are doing it now all in one step.
So this code is the same as this as it's highlighted here.
And this is the same as this one.
And so this whole line of code
is essentially the same as doing this.
Now the big question here is,
how does JavaScript know
if it should do the math first
or if it should do the comparison first, right?
Because we could think
that the first thing to do is to calculate this,
so basically 46
and then JavaScript could compare that 46 to now right away,
right?
That's what would happen
if the operation would simply proceed from left to right.
But we will see that it doesn't.
So we will see that this actually works just fine, right.
And so JavaScript has some way of knowing
that it should first do this operation,
then this one,
so that it has the two numbers
and then only at the end,
once it has the two ages,
it will compare them with this operator in the middle.
So how does that work?
Well, that's what we're gonna talk about, right,
in the next video.