Preview
Video Player
00:00
00:00
Refactor 2: Readable Branching Logic
9:12Let's look at a way to make our branching logic more readable.
For our next refactoring project,
0:00
let's see if we can clean
up the ClickEvent handler.
0:02
There's a complex if else statement
inside it that is a little hard to read.
0:06
Each if statement examines the text
content of a button that was clicked
0:11
to determine which block runs.
0:16
Now you might know this
is called branching,
0:18
because this is like a fork in
the road in the flow of our program.
0:20
The program will take only
one of these three branches,
0:24
after it looks at the button name.
0:28
So all the branches are fused
together into a single block of code.
0:31
So what if we put each branch
into its own function?
0:36
That way we could see the branches
of the if else block more clearly.
0:39
I'll show you what I mean.
0:43
First, we'll take the contents
of the first branch here,
0:45
and cut it out, and replace it with
a call to the function removeName.
0:50
Now we'll still need to
create that function.
0:59
So right above the if branch
we'll add in function removeName,
1:02
And paste the code we cut inside it.
1:14
Now with just one line of code
1:19
in this branch this isn't
necessarily an improvement, but
1:21
with these next branches we can clean
up this if else statement considerably.
1:25
So let's repeat the steps we
just took with these branches.
1:30
So right below the removeName function,
we'll create an editName function.
1:36
Then I'll cut the code inside this else
if, and paste it in our new function.
1:47
So now below editName,
we'll create the function
2:00
saveName.
2:04
Then I'll go ahead and cut the code out of
this else if and paste it inside saveName.
2:15
So now in this first else
if we'll add a call to
2:25
editName and then add a call to
saveName in the next branch.
2:30
So now our if statement
is looking a lot simpler
2:39
without all that distracting code, right?
2:42
We can tell much more easily what
happens when each button is clicked.
2:45
This code is a lot more readable.
2:49
In fact,
it reads almost like plain English.
2:50
If the removeButton is clicked,
remove a name.
2:53
If the editButton is clicked,
edit the name and
2:56
if the saveButton is clicked,
save the name.
2:59
Let's save our changes and switch over to
the browser and just make sure it works.
3:01
I'll refresh the page and
add a name like Sarah, and
3:05
verify that all these buttons work.
3:09
And they do, great.
3:15
Now you could leave your code this way and
it would be an improvement.
3:18
But I wanna show you a trick to
simplify a little further than this.
3:21
In JavaScript, functions can be
passed around like any value,
3:26
which is why they're sometimes
known as first class citizens.
3:29
They can be passed into other functions
and assigned to variables, for example.
3:32
They can even be stored in arrays and
objects.
3:36
So let's store our three
functions in an object.
3:39
Just above the functions and
right below the ul const,
3:43
we'll create an object called nameActions.
3:48
Then let's cut the removeName function and
3:58
place it inside the object
with the property name remove.
4:01
And we can convert this to an arrow
function to make this even more readable.
4:09
And now let's add the other two
functions to our name actions object.
4:21
So we'll put a comma here after
the function just as we would with
4:26
any other value in an object.
4:29
Then we'll type a property called edit and
cut and
4:32
paste the editName function in for
the value.
4:37
And I'll also convert it
to an arrow function.
4:42
Finally, we'll follow the same pattern for
4:54
the saveName function
calling the property save.
4:56
Then cutting and pasting the function and
the nameActions object and
5:02
converting it to an arrow function.
5:05
So now to call the functions
in the if statement,
5:15
we can first type nameActions.
5:21
Then a dot to access the property we want,
5:24
then a parenthesis to call the function.
5:28
And we'll do the same for
edit with nameActions.edit.
5:32
And for save, we'll add name actions.save.
5:40
I find this object notation a lot
easier to read because each property
5:44
name sits at the beginning of its line,
clearly marking the code block at labels.
5:49
You'll see a lot of objects in
other JavaScript code, too.
5:54
They are everywhere in the wild.
5:56
And we can further simplify
the if statement though, so
5:58
notice each condition is checking for
6:02
a string that matches the function
names inside the nameActions object.
6:05
Button.context will always be one of these
three strings whenever this code runs.
6:10
So we could just use the buttons value
to access the function names directly.
6:16
To show you what I mean,
I'll first create a new constant of action
6:21
above the if statement to hold
the value of the button.text.
6:26
And then I'll also replace all
the conditions with this new constant.
6:32
So now let's use action to access
the property of nameActions
6:44
dynamically, and
we can do this with square brackets.
6:50
So this new line is going to
replace this entire if statement.
6:58
But before we delete this if block,
7:03
let's see why by comparing how
these two approaches work.
7:06
The action will only be one of
these three possible strings,
7:09
right, remove, edit, or save.
7:14
In the if statement, action is being
compared to each possible string.
7:16
So when a match is found, that same
word will be used to run the branch.
7:21
Now in our new one liner here,
the string and
7:26
action will be used to access
the function directly from the object.
7:29
Then the function will be executed.
7:33
This works and it's a better approach
because the name of the buttons
7:35
match the name of
the nameAction's properties.
7:38
So now we can go ahead and
remove the if statement.
7:41
And now we can move this action
constant declaration to the top as well
7:45
with the other declarations.
7:50
So now looking at the code,
it's a lot more compact and readable.
7:59
Finally, let's add a comment here
8:04
just to make sure we can tell what's
going on in this line at the bottom.
8:07
So we'll the comment select and
run action in button's name.
8:10
All right, let's save our file and
8:19
check the browser to make sure
we didn't break anything.
8:21
I'll refresh the page.
8:25
And enter a name.
8:28
I'll check all the buttons to make
sure they still work correctly.
8:30
And great, everything is perfect.
8:44
So now that we've refactored our project,
8:47
any future edits we may have to
make to the code will be easier.
8:49
So for example, if we add a new button or
remove an existing one,
8:52
we don't need to add or
remove branches from an if statement.
8:56
It's just a matter of adding or
removing functions from name actions.
9:00
Speaking of feature edits,
9:06
let's look at some ideas of improvements
we can make to the app in the next video.
9:07