-
-
Save rwaldron/947739 to your computer and use it in GitHub Desktop.
JavaScript var indenting thoughts.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I just hoist the vars and set all non-trivial values later; the compiler takes care of the rest. :)
I find it easier to add/maintain comments this way, too.