Skip to content

Instantly share code, notes, and snippets.

@rwaldron
Forked from cowboy/var-indenting.js
Created April 29, 2011 02:33
Show Gist options
  • Save rwaldron/947739 to your computer and use it in GitHub Desktop.
Save rwaldron/947739 to your computer and use it in GitHub Desktop.
JavaScript var indenting thoughts.
// I don't have answers yet, just questions. Keep in mind that I prefer code
// that is easiest to maintain.
// Example from http://www.nczonline.net/blog/2010/10/26/wanted-dynamic-execution-contexts-in-javascript/
// Consider:
// Let's say you start with this, but need to (in a later commit) add a few
// additional vars.
var myglobal = {
add: function(num1, num2){
return num1 + num2;
}
};
// Ok, now add those additional vars.
// Option 1: Not-a-lotta-indents.
var myglobal = { // Everything existing stays the same...
add: function(num1, num2){
return num1 + num2;
}
},
context = new ExecutionContext(myglobal), // Does it feel weird that these lines
result = context.eval("add(2, 2)"); // aren't indented at all?
// Option 2: Lots-o-indents.
var myglobal = { // This line stays the same as before.
add: function(num1, num2){ // This line and the following three lines
return num1 + num2; // have to be re-indented, even though they
} // didn't really change. Which sucks because
}, // it's extra extra effort / commit noise.
context = new ExecutionContext(myglobal), // Added (legitimately)
result = context.eval("add(2, 2)"); // Added (legitimately)
// Option 3: Lots-o-var-statements.
var myglobal = { // Everything existing stays the same...
add: function(num1, num2){
return num1 + num2;
}
};
var context = new ExecutionContext(myglobal); // These can be added w/o touching
var result = context.eval("add(2, 2)"); // any other var statements.
// Ideally, your build process would convert all of those to this, making
// style completely up to you.
var myglobal={add:function(num1,num2){return num1+num2}},context=new ExecutionContext(myglobal),result=context.eval("add(2, 2)")
// Also consider 2-space indents. Given this:
var foo = 1;
// Let's add another var. Pretend you're adding enough vars so that they won't
// all fit on a single line (not that you'd do that anyways, it's unreadable).
var foo = 1,
bar = 2; // Indents don't line up, this looks awkward.
var foo = 1,
bar = 2; // Let's make an exception and indent subsequent vars 4-spaces.
var foo = 1; // These both line up perfectly. Although you might find the extra
var bar = 2; // "var" words repetetive, not-DRY or noisy.
// Now consider re-organizing code.
// Given this original...
var foo = 1,
bar = 2;
// Let's reverse the two declarations. Approx. 50% of each line had to be
// rewritten to make this work.
var bar = 2,
foo = 1;
// Now, given this original...
var foo = 1;
var bar = 2;
// Let's reverse the two declarations. Ok, cut, paste, done. Almost zero effort.
var bar = 2;
var foo = 1;
// Consider typos. This isn't a problem for you though, because you JSLint all
// your code, right? RIGHT? Yeah, right.
function test() {
var foo = 1
bar = 2;
}
test();
bar // 2 - What, did somebody forget a comma?
@unscriptable
Copy link

I just hoist the vars and set all non-trivial values later; the compiler takes care of the rest. :)

var neveruseglobals, context, result, 
    foo = 1, 
    bar = 2;

neveruseglobals = {
    add: function(num1, num2){
        return num1 + num2;
    }
};
context = new ExecutionContext(myglobal);
result = context.eval("add(2, 2)");

I find it easier to add/maintain comments this way, too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment