Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript DOM Scripting By Example Improving the Application Code Refactor 1: Create List Items

An Awesomely Confusing Video

I found this video incredibly frustrating, and by looking at the comments section, it would appear that I'm not alone. I'll save the diatribe and just focus on what, for me, is at the core of this frustration.

This video introduces some new and, for the uninitiated, relatively complex concepts. The function within the function caught me off-guard, but was fairly simple after re-watching. What really got the emotions stirring was about halfway through the video when Guil starts to incorporate the "AppendToLi" function.

Why was the code refactored twice? Would it not have been more efficient and far less confusing to have created the two functions from the get-go? There was very little explanation or acknowledgment of the reasons behind Guil's process, aside from the obvious intention to refactor the code. I feel like a little explanation would have gone a long way and curbed much of the confusion.

2 Answers

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

A late response to the question but perhaps someone else with a similar problem reads this.

I think in the case of the video the intention is for you to get used to refactoring being a step by step process it also breaks down his thought process step by step.

1) Group together the items which can be refactored in the initial function createElement
- remove repeated code and replace with function
- test
2) Create a function to remove duplicate appendChild calls specifically to LI
- remove repeated code and replace with function
-test
3) make remaining code more concise where possible
-test

Refactoring is no different you wouldn't be able to look at the code and immediately find all refactoring possibilities.

For this video focusing on understanding each change he makes as an individual piece will help you not feel overwhelmed by the overall effects and concepts. If you break it down into its step by step parts you will find it easier to cope with.

Completely AGREE with that!!