Narrator: To finish this project
let's now learn about the technique called refactoring
in order to get rid of some of our duplicate code.
So, as I said, by the end of the last lecture
we have some repeated code in our project
and more specifically where we can really see this
is in these two scenarios where the guess is too high
and where the guess is too low.
So here this code is really almost the same
as this code down here.
The only thing that really changes is this string here
so this message that we display if the guess is too high
or if it's too low
and so having a lot of duplicate code
remember violates the don't repeat yourself principle.
So the dry principle, so right now this
all of this code here is not dry.
Now, why is it actually so bad
to have duplicate code you might ask?
Well, one of the answers is that
whenever we have duplicate code
when we then want to change some functionality
we have to change the same code in multiple places.
For example, we might want to change
the message when the player loses the game
so this one here, right?
And then we would have to change it here and here
and in a small example like this, it's not a big problem
but it can quickly become a nightmare
for a bigger code base.
So try to avoid duplicate code whenever you can
however, when we first write the code
then it's no big problem to start out with duplicate code
and so that's why I did it like this here.
That's why we have this duplicate code
because I just wanted to make it work
but then as we move on into project
we can use a technique called refactoring
and refactoring basically means to restructure the code
but without changing how it works.
So basically we do refactoring to improve the code
and to eliminate duplicate code
and so let's now start to refactor all of this code here
that we just talked about before.
So the first step of refactoring is to identify duplicate
or almost duplicate code like we already have here.
So this code here is almost the same as this one
with this string here being the only exception
and so what we're gonna do now
is a way to eliminate health of this code here basically.
So, how are we going to do that?
Well, this first if block here checks
if the guess is too high
and this one checks if the guess is too low
but in both cases what we're really doing
is to check if the guess is different
from the secret number, right?
So whenever the guess is different from the secret number
then all of this code here should get executed, right?
Where the only thing that's changes is this string
so instead of having one big block
for the case where the guess is to high
and one for when the guess is too low,
let's just have one blog for the situation
where the guess is different.
So let me actually add a new else if block here
and then we delete these two, okay?
So here else if
and then this moves down here
and then when guess is wrong basically
and so that means basically the opposite of this.
So, here we have when the player wins,
his guess equal secret number
but here when new guess is wrong
it means that guess is different from secret number
and so now we can just take this code
which is the same in the two blocks and we'll copy it
and paste it here.
So this is what should happen except
that the two high should of course only happen
when the guess is larger than the secret number.
So now we still need a conditional to figure out
if the guess is greater or lower than secret number.
Now, what I'm going to do here
is to actually use a turnery operator
and so let me show you how
so I will say when the guess is greater in the secret number
then here the string should be too high
and if not so else
then it means that the guess is less than a secret number
that's just the opposite right?
And so then we want this string
so copy that, put it here and that's it
so I will give it a safe
and now we can safely delete all of this here.
Whoa, that's too much that's deleted
or actually let me just comment all of it
so that you can still keep it here as a reference.
Now here's something is kind of wrong
that's because I took away the closing curly brace here.
So this one, and so now everything should be correct now
so you'll see the red underline is gone there now
and so let me explain again what we did here.
So first we unified the two conditions that we had earlier
where the guess was either a greater
or larger than a secret number.
Both of these basically mean
that the guess is different than a secret number
and so we just created a block for that
because all of this code here is the same
in both situations.
The only thing that changes is the message
that is displayed on a page
and so here, we then basically determined that message
with the turnery operator.
So here is where we then asked
if the guess is greater than the secret number
and if it is then the text content here should be too high
but if it's not, then the text content
should become too low
and remember that this works
because the turnery operator is really an operator
and so it will return basically a value, okay?
So all of this here, all this operator will return a value
either this one here or this one
and so then that value is what will get stored
in the text content of this message element.
So let's now test this actually
so that's too low, let's try 20 and that's too high.
So it means that it's probably working,
let's try it 17, let's try 19
and so it's gotta be 18 and yes everything worked
and so all refactoring here was indeed successful
and I hope it made sense to you.
You can just pause the video
and review your code in case
that it's not 100% clear yet, okay?
All right, so we fixed that by simply condensing
two versions of almost the same code into just one
however, sometimes a good refactoring technique
is also to create functions
for example, we have the same code here in multiple places.
So this code where we set the message
so as I select this code here this code
will highlight all the same versions of the code
in the entire file.
So you'll see that we have this
document dot query selector message dot text content
all over the place here, right?
Well, at least one, two, three, four times down here
yeah here so five times even.
So that's a lot of duplicate code
and the same is true for setting the number
or for setting the score or also for example,
for calculating this random secret number
we have the same code here and also here
and whenever that happens
we can also refactor this same code into a function
and then call the function in all the places
where we have to duplicate code.
So basically we can refactor functionality
that we use over and over again
into their own functions in order to make the code more dry.
Now, I'm not gonna do that into all the examples
that I just mentioned
but I will do it with setting the message, text content.
All right, so what I will do is to copy this okay?
And then I will create a function out here
and the function will be called display message.
So it's a function and the parameter will be the message
and then in the function block, all we will do
is this repeated code.
So setting the message and then we will set it
equal to the message that is passed into the function.
All right, and now to show you how it works
well let's just use it to down here.
So instead of this, let me comment it out
I can now simply say display message
and then with this string,
so this string is now the argument, okay?
And so this argument is what will become the message here
in this function when I call it, right?
And so then here we say document dot query selector
for the message dot text content
should be the message that we just passed in
that makes sense, right?
And so basically we took this coat here
which is responsible for setting the message
and put it into this display message function
that we can now use everywhere instead
of having this repetitive coat
and just to show you that it works,
let's now just actually do this.
So clicking here without any content
and so now we should see the no number displaying here
just like before and indeed it works just fine.
So let's not go ahead and replace all of these occurrences
of this same coat.
I will not delete them I will just comment them out
but you can go ahead and delete them from your code base
if you feel like it
instead, let's just use always display message
because debt is a lot cleaner.
Also, this really shows what we're doing here
so when we're reading the code
we don't have to really understand what's happening.
So if we try to read this code like one year from now
and if we then come here we have to try to understand
what all of this means here, right?
But instead if we simply have a function called
display message it's a lot easier to simply read the code
and say okay, this year probably means to display a message
and this here is gonna be the message, right?
That's a lot easier to understand
when you read the code later
and that's also an important thing in web development.
So here is another one
and this is the one that we just refactored earlier
so this one is gonna be a little bit different.
So display message and now here we need the argument
but that's not problem
we can simply do the exact same thing that we did here.
So let's just grab this and now we can comment this out
and actually this one too and just paste it here, right?
So now according to this condition here
the argument will either be too high or too low
because the result of this operator, once again
will be either this first string here or this second string
and so that will then be the argument
and the message will then be displayed accordingly, okay?
Here once again, display message you lost the game, okay?
And down here, there's another one, yes here
so display message
and give it a safe
and so now everything should work the same
and yeah, that's awesome.
Yeah, everything works just the same
but our code is a little bit more dry now
and as I said
you could do the same for all the repetitive stuff here
which I will actually not do here
because that takes too much time.
But you can of course have some fun
and do it on your own, but there's really no need to do it.
I just wanted to make a point here
that this is a really important thing
that we do when we write real code.
So always keep refactoring in mind
when you write your own code
and of course we will do
a lot of refactoring throughout this course.
Anyway, with this, we finished this project,
again, I really hope that you liked it
and that you may be showed it to a friend or so
and told him that you did it in this course
and you know, how much fun it really is
to build something like this.
Next up, we have another project
which is also gonna be really fun
because we will build a real UI component
and that's gonna be a modal window.
So stay tuned for that one once you finished this one
and really understood how all of it worked.