Skip to content

Instantly share code, notes, and snippets.

@cowboy
Created April 28, 2011 16:26
Show Gist options
  • Save cowboy/946689 to your computer and use it in GitHub Desktop.
Save cowboy/946689 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 indentation, in general. Given this starting point, 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;
// With 2-space soft indents, things don't line up. It looks awkward.
var foo = 1,
bar = 2;
// With hard-tab indents, things don't line up either, unless you happen to be
// using a text editor where hard-tabs are set to render at 4-chars wide. Which
// you probably have explicitly disabled, unless you use hard-tabs. So while
// this looks great for hard-tab users, it ONLY looks great for them. While, at
// the same time, soft-tab indents always appear consistent, universally,
// whether the viewer prefers soft- or hard-tabs. Just take a good look at
// http://bit.ly/jqsource in a browser. Anyways, that's a whole separate issue.
var foo = 1,
bar = 2;
// 2-space soft indent users could decide to make an exception, and indent
// subsequent vars with 4 spaces. This looks better.
var foo = 1,
bar = 2;
// Of course, these both line up perfectly, no matter what. Although you might
// find the extra "var" words repetitive, non-DRY or visually distracting.
var foo = 1;
var bar = 2;
// Now consider re-organizing code.
// Given this original...
var foo = 1,
bar = 2;
// Let's reverse the two declarations. In addition to shuffling the lines
// around, five characters in each affected 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, lines shuffled, done.
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?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment