Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Let's take a look at our click handler. There's a repeating pattern that we can write a function to perform, and reduce repetition in our code.
-
0:00
A good place to start when refactoring a program, is to look for the same code,
-
0:04
or very similar code that appears again and again.
-
0:07
The programmer's slogan, don't repeat yourself,
-
0:09
is the foundation of dry programming.
-
0:11
Duplication, not only makes your programs longer, but
-
0:14
also makes them more difficult to update.
-
0:16
Since a change you make in one part of the program,
-
0:18
will probably need to be made wherever the same code appears.
-
0:21
So let's see if we can simplify our program by identifying and
-
0:25
removing duplicate code, for example,
-
0:28
take a look at the createLI function, can you spot repeated code here?
-
0:34
Notice how after the first list item is created in the first line,
-
0:38
createElement is called five times.
-
0:42
And after we create each element we set a property to a value.
-
0:48
I'll just break these lines out, so you can see this more clearly.
-
0:53
So, for example, in the function this span elements textContent is set,
-
1:00
then here this checkbox type is set and so on.
-
1:06
So we could create a function to accept arguments for the parts of
-
1:10
these lines that are different, and repeat the actions that are the same.
-
1:14
In other words, our new function could accept an element name,
-
1:17
a property name and a property value as arguments.
-
1:20
Then it could create that element, set the supplied property to the supplied value,
-
1:24
and then return the element.
-
1:25
I'll show you what I mean.
-
1:27
Let's name this new function, createElement.
-
1:30
And the function will live inside our createLI function for its private use.
-
1:41
Next, let's copy and paste one of these two line sequences into the function.
-
1:47
So I'll copy the const span and span.text content lines.
-
1:56
And now, we can go through this code and
-
1:58
replace the parts that will change from element to element.
-
2:03
We'll start with the element name that we're passing
-
2:06
into the createElement method.
-
2:07
So let's create a parameter named elementName that we can pass instead.
-
2:13
Now, when we call createElement, we pass in the name of an element as a string.
-
2:18
And this line will create that element.
-
2:22
And we'll store that element in a constant named element.
-
2:29
And we'll also change the other instance of span to our new name of element.
-
2:38
And we also need to pass the property name into the function.
-
2:42
Since it will differ from element to element.
-
2:45
We'll make that the second parameter to the function, and name it property.
-
2:50
And to access the property on element, we'll need to use brackets syntax.
-
2:55
So let's replace .textContent with a set of square brackets and
-
3:00
property within that.
-
3:02
What this does is it lets us dynamically access the property.
-
3:06
So in other words we can use the string contained in the property variable to
-
3:10
access the property of element.
-
3:14
Now, the last value we'll need to supply to this function
-
3:17
is the value that we're assigning to the elements property.
-
3:20
So let's create a third parameter to hold that, and we'll name it value.
-
3:25
We can then assign the property to a value.
-
3:31
Then we'll return this element now that it's created and configured.
-
3:38
So that's all our function needs.
-
3:39
Now, let's replace each two line bit of code with a call to our new function,
-
3:44
and then we'll add in the specific details as arguments and
-
3:48
let the function take care of the rest.
-
3:50
Since we named our function createElement, we can just delete document
-
3:56
from this line, and we can also leave in the string span as the first argument.
-
4:01
After we create the spam tag, will want to set its text content
-
4:06
to the text provided as the argument to createLI.
-
4:10
Just like we're doing in this next line here.
-
4:14
So the second argument we'll pass is the string textContent,
-
4:20
and the third is text, so the property and the value.
-
4:28
And now, we can delete this line of code below.
-
4:32
So let's give this a save, and go to the browser and
-
4:34
quickly test to make sure everything's working okay.
-
4:37
I'll refresh the page and type a name like Ken.
-
4:42
And when I hit Enter, the name appears, so
-
4:44
we know that text is getting appended to the list item as it should.
-
4:48
So, great, it's working.
-
4:49
Now, we can go back and replace the other lines with our new function.
-
4:53
Next, for the label, I'll change it to
-
4:58
just createElement and pass in label,
-
5:03
textContent, and confirmed as arguments.
-
5:10
And now we can delete the textContent line below it.
-
5:16
And we'll do the same for checkbox passing in input, type and checkbox as arguments.
-
5:29
Then deleting the line for checkbox.type.
-
5:34
And now, for editButton, we'll change it to createElement
-
5:40
passing in button then textContent and edit.
-
5:49
Then we can remove editButton.textContent.
-
5:53
And finally for the removeButton we'll say
-
5:58
createElement, button, textContent and
-
6:02
remove Then delete the line below it.
-
6:09
So let's take a look at this now.
-
6:11
We've removed some of the lines from this code so far, but
-
6:14
there is still some repetition with these calls to appendChild.
-
6:20
So I'll add some space between the lines of code so you can see them grouped.
-
6:27
Notice how these pairs of lines follow a similar pattern.
-
6:32
An element is created, then it's appended to the list item.
-
6:38
So let's write another function to perform this pattern.
-
6:41
And we can call the new function appendToLI,
-
6:45
which we'll declare right underneath the createElement function.
-
6:53
So now I'll just copy one of these patterns in as the body of the function
-
6:58
just to start.
-
7:02
So here in the function, instead of span, we'll call this constant element,
-
7:09
and we can replace span in the second line too with element.
-
7:14
So now we'll
-
7:18
need to pass in the values we want to call createElement with.
-
7:23
Let's add them in as parameters, and because they are the same parameters we
-
7:27
call createElement with, I'll simply copy and paste them in.
-
7:34
Then we wanna pass those same parameters into createElement.
-
7:39
So let's paste them in here as well.
-
7:48
And now we can go through and replace the call to createElement with appendToLI
-
7:56
So first we'll replace const span = createElement with
-
8:01
just appendToLI, and since appendToLI is now taking care
-
8:06
of these calls to appendChild, we can also delete them.
-
8:14
Let's skip the label and checkbox for now.
-
8:17
And we'll do the same for both the edit and remove buttons.
-
8:20
So we'll replace const editButton with appendToLI.
-
8:26
Delete appendChild below it.
-
8:28
And for the removeButton, we'll replace the const removeButton,
-
8:32
we'll simply say appendToLI, and get rid of appendChild(removeButton) below it.
-
8:38
So now, what about our label here?
-
8:41
Well, if I just replace it the way I did the others,
-
8:45
with appendToLI, I can't append the checkbox to it.
-
8:50
Well that's because the label is being created outside the scope beyond
-
8:53
the checkbox's reach.
-
8:55
So if appendToLI returned the label once it was finished,
-
9:00
you could call appendChild on it and pass in the checkbox.
-
9:04
So let's add that return statement to appendToLI to return the element.
-
9:13
And now we can store the returned label element in a constant I'll name label.
-
9:22
Then we can delete this appendChild method for label below.
-
9:28
Now, we could leave this creation of the label and checkbox how it is.
-
9:31
And it would be better than it was.
-
9:33
But I prefer to make it a little more concise.
-
9:36
See how we're setting up two constants and then using them on the third line.
-
9:44
So what we can do is, we can cut the first two lines and
-
9:49
paste them in place of the constants that represent them.
-
10:04
And I can even move this appendChild to a new line and
-
10:07
indent it to show it's a continuation of the line above.
-
10:12
Finally, I'll collapse these blank lines down again, and I find this more readable
-
10:16
because each function name suggests what the code is doing.
-
10:20
We append a label to the list item element
-
10:23
then we append a child to the label which is an input we're creating.
-
10:27
Let's save our changes and switch over to the browser and refresh.
-
10:32
And check to make sure this works.
-
10:33
So in the text field I'll type a name like Tommy and hit Enter.
-
10:39
And I see the checkbox so I know it all works.
-
10:42
So let's test it out.
-
10:44
You click confirm, let's click edit, save, and remove and perfect.
-
10:49
Everything is still working as it should be.
-
10:52
Now, another benefit of putting that logic
-
10:55
into the appendToLI function is that we could add other elements and
-
11:00
change the order, or edit their contents, much more easily and intuitively.
-
11:04
We just need to change how, or in what order, we call appendToLI.
-
11:09
Well that's one refractor done so next, let's take a look at the click handler
-
11:13
we built and I think I see some room for improvement here.
You need to sign up for Treehouse in order to download course files.
Sign up