Learning to love…namespacing (advancing code organization)

Before I can settle down to work, I feel the need to clean my apartment. All the dirty dishes go in the dishdrain. The blanket goes behind the couch. Miscellaneous dust is vacuumed. The physical space represents how cluttered my brain feels, so I like to start with it being organized.

What I’m trying to improve on, is that currently I go through this cleanup every Saturday morning. I’d prefer to just…keep it organized to begin with.

So is it with code for me right now. I just rush through, trying to keep information organized into separate pieces, called functions. Then, the day before I meet with one of my “code-reviewers” at my organization, I say, “Oh, no!” and quickly reorganize everything, and fix all my indentation. “Look, it’s organized!” I say.

But recently, one of my mentors suggested pair-programming, a concept where we work together on the code and I realized my fake organization would be found out for what it is. I need to rectify that…NOW.

So, one of my new favorite tools for staying organized as I go, as I work on Big Projects, is called a “namespace.”  Jonathan Stray introduced this concept, but I don’t think I got it until Troy Thibodeaux re-explained. Not a comment on either of them, just that multiple explanations is helpful.

Side note: Having access to Jonathan, Troy (another expert coder, who actually used to work in AP DC, and is one of the smartest, most helpful and calmest people I’ve ever met over the phone, he’s at AP New Orleans) plus several others, from a coding perspective, within my organization, is an amazing opportunity. I feel myself learning even faster, and I just regret not looping Troy into my study sooner.  

Just feel pressured that if their combined force can’t get me where I want to go, I have very big problems. Can’t decide if I’m totally giddy with that kind of knowledge, or totally afraid.  I’ll go with giddy.

Anyway, the idea, if I’m explaining this right, is that you attach all of the blocks of code to execute, or functions, to a giant variable (the namespace), which is attached to the window, which represents the actual webpage, and is always available to your JavaScript.  

You also attach information you need to pass among the functions to that variable. Then, all the functions can access the information, and you don’t have to shove it around inside () as arguments.

Another great feature is you store all of the functions, but by wrapping code in functions, you have greater control over when your code is run, or executed. You’ll see in the example below, I create two functions, but only run them, by adding () after a function name, in the initialize function.

An added bonus is if you inspect this giant object in the Web Developer console, you will see all of your functions and pieces of information as you dig into the object.

I like this strategy a lot, and am trying to approach my projects this way from the start.  I will leave you with an example of short namespaced code.

1
2
3
4
5
6
7
8
9
10
11
12
13

window.myAwesomeMap;
 
myAwesomeMap.getColor = function() {
   myAwesomeMap.color = 'tomato';
}
myAwesomeMap.colorAlabama = function() {
   $('#alabama').css('background-color', myAwesomeMap.color);
}
myAwesomeMap.initialize = function() {
   myAwesomeMap.getColor();
   myAwesomeMap.colorAlabama();
}
myAwesomeMap.initialize();