Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,838 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!!