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 JavaScript Foundations Variables Hoisting

huckleberry
huckleberry
14,636 Points
Posted by huckleberry
huckleberry
14,636 Points

Regarding the best practices topic involving naming and grouping variables.

In the video at the end he goes over the concept of having all your variables declared and set at the beginning of not only your function scope, but also in the global scope as well.

So he's saying that it's best practice to have all your variables declared/named (although not necessarily initialized) at the very beginning of functions AND the larger program as a whole.

So my question is this, and this is for your pro's out there, for larger projects, do you write the overall structure of the code first and then, once everything is done and set and you've tested it and it works fine, do you then go back and collect all the variables that were declared throughout the code and then move them all to the beginning? Or at least, do the 'build and relocate' in chunks?

I mean, I can't see knowing or working out all the possible variables and variable names that you'll be needing throughout the project right from the beginning, so to do it first and foremost seems an unreasonable assumption.

So I'm guessing that, as you write your program, you build one part, test and debug and all that good stuff and then once you've established that it works perfectly, you then strip the variable & function declarations out and put them at the beginning. Then you move on to building your 2nd chunk of code and work on that till it's working perfectly, then strip the variable and function declarations out and put them at the beginning with their brethren, etc...etc... , rinse & repeat.

Is that about right?

Thanks all!

1 Answer

Jeff Everhart
Jeff Everhart
21,732 Points
Jeff Everhart
Jeff Everhart
21,732 Points

This is a really interesting question. For me at least, your declarations of the variable in the code should in some way help you to determine the scope of that particular variable. As I'm coding out a a project, you're right, sometimes I might end up needing an extra global variable that I didn't plan on. When that happens, I actually place it with the other globals and then assign it a value wherever in the code that makes sense, usually later.

I think the point in the video is more about overall organization rather than process, because everyone will have a different process, but we should all have a similar organizational scheme when creating variable so that we can share and use code without having to read through it all to understand how certain variables are scoped. Those are my two cents. I'll be interested to see some other comments.

huckleberry
huckleberry
14,636 Points
huckleberry
huckleberry
14,636 Points

Whew that was quick. Thanks so much for your comment!

It's very interesting to me to learn how others more experienced and further along in their journey do handle the flow of their projects and that definitely was my intent with this question so thanks for your input!!

Just to clarify for future commenters so they'll be more likely to put in their own two cents, while I do realize that he (Hoskins) was speaking to general overall organizational practices within the video, I am indeed trying to get a sense of how others do approach the process themselves. Like, I get what he's saying but now I'm trying to find out how others (professionals and others more advanced than myself) go about the process of organizing their code before, during and after their development so that I might avoid any common pitfalls and development of bad habits regarding improper planning/execution of the codes overall final structure.

Thanks again Jeff! Like you I look forward to what others have to say about their process.

Cheers, Huck

Marcus Parsons
Marcus Parsons
15,719 Points

I do my building the same way, Jeff. For example, this calculator program I created has quite a few lines of JS/jQuery, and I had some idea of the variables I might need. But, when I knew I needed new ones, I just asked myself, "Does this variable need to be accessible outside of this function?" If it didn't, then it was just initialized in the function, and if it did, I added it to the other global variables I made. I only did that for some added readability because with the way JS works, I could initialize a global variable anywhere and access it anywhere.

If you want to check out a nifty advanced JS tutorial, check out this page.

Jeff Everhart
Jeff Everhart
21,732 Points
Jeff Everhart
Jeff Everhart
21,732 Points

Hey Huck,

That makes total sense. For me, I begin by creating comments for each step of the program that I need to write in order to keep things organized. Solid planning is important here, and I like to start by outlining all of the things that I'll have to do to achieve my goal. For example, for a small to-do list app I'd begin like so: 

//When user clicks button, grab value from input element 

some JS code here to do above 

//Append additional DOM element to LI with the value from input 

some JS code here to do above 

//clear value from input element in prep for next entry

some JS code here to do above

This does two things for me. First it lets me break down the project into manageable steps. Second, it helps me keep my code well organized and commented while writing and after.

While I liked Jim's courses, you only get so far into this type of planning in the foundations course. I'd recommend taking a look at some of the more advanced courses taught by Dave and Andrew when you feel ready (jQuery, AJAX, and another JS one I can't think of right now). They really walk you through these planning stages using this type of process.

Here's a good example of this in the JS here at CodePen

Cheers! JE