Original subtitles

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.