<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>unscriptable.com &#187; Uncategorized</title>
	<atom:link href="http://unscriptable.com/category/uncategorized/feed/" rel="self" type="application/rss+xml" />
	<link>http://unscriptable.com</link>
	<description>Just another WordPress site</description>
	<lastBuildDate>Thu, 02 Feb 2012 03:05:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>JSLint puked on my javascript!</title>
		<link>http://unscriptable.com/2010/04/06/jslint-puked-on-my-javascript/</link>
		<comments>http://unscriptable.com/2010/04/06/jslint-puked-on-my-javascript/#comments</comments>
		<pubDate>Wed, 07 Apr 2010 03:53:54 +0000</pubDate>
		<dc:creator>John Hann</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://unscriptable.com/?p=568</guid>
		<description><![CDATA[...you're either a dumbass noob or you've been blinded by java...]]></description>
			<content:encoded><![CDATA[<p>Recently, I used <a href="http://www.jslint.com/">JSLint</a> to try to find the source of a nasty IE-only bug in my code.  I&#8217;d never used JSLint directly before.  What a trip.<br />
<span id="more-568"></span></p>
<p>Here&#8217;s a close facsimile of a tiny snippet of the javascript that it puked on.  (I can&#8217;t paste the actual code since it doesn&#8217;t belong to me.)</p>
<p><script src="http://gist.github.com/358373.js?file=gistfile1.js"></script></p>
<h2>Brackets and shoes required</h2>
<p>JSLint&#8217;s main complaints were with the four if statements.  As you can see, none of them have curly brackets ( { } ).  My philosophy was that the { } make the code less readable and were only added to the javascript specs to help group multiple statements.  </p>
<p>My background is heavily laden with pascal, and in pascal this is exactly the case.  The <code>if</code> statement is defined as: <code>if [conditions] then [statement]</code>.  (Note the singular <code>[statement]</code>.)  To group multiple statements, you need to use a grouping statement such as the <code>begin</code> statement which is declared as this: <code>begin [statements...] end</code>.  </p>
<p>I was happily <em>snubbing my nose</em> at all those developers who thought there was some golden rule that brackets { } were stipulated.  </p>
<p><em>Little did I know they were right!</em></p>
<p>I decide to check my <em>javascript bible</em>.  It&#8217;s a copy of the javascript 1.5 specs I downloaded from Mozilla just after Netscape was bought by AOL.  I refer to it now and then.  Like when I can&#8217;t remember the order of the Array#splice parameters, or when I need to make sure my regex will run in all browsers.</p>
<p>Anyways, I decided to check the specs.   I think it&#8217;s the first time I actually looked at the <code>if</code> statement.  At least it&#8217;s the first time I <em>really</em> looked at it.  And there it was in front of me: the specs <em><strong>mandate</strong></em> the use of the { }!!!</p>
<pre>
Syntax
if (condition) {
   statements1
}
[else {
   statements2
}]
</pre>
<p>It&#8217;s also obvious that the <code>if</code> (and <code>else</code>) blocks are <strong>grouping statements</strong>.</p>
<p><strong>I&#8217;ve been totally foiled!</strong></p>
<p>But I still think it&#8217;s more readable without the { } <em>under some circumstances</em> so I&#8217;ll probably continue to omit them when it feels right (and my client isn&#8217;t running my code through jslint).  So there!</p>
<h2>A perfect storm of anti-patterns</h2>
<p>My next biggest trangression was with the following foible:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>already<span style="color: #009900;">&#41;</span>
    <span style="color: #003366; font-weight: bold;">var</span> itemInit <span style="color: #339933;">=</span> ctrlr._getItemInit<span style="color: #009900;">&#40;</span>which<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>itemInit<span style="color: #009900;">&#41;</span>
    <span style="color: #006600; font-style: italic;">// some lines snipped</span>
    itemInit.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span>ctrlr<span style="color: #339933;">,</span> root<span style="color: #339933;">,</span> doneMap<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>The exact complaint was:</p>
<pre>Problem at line 16 character 21: 'itemInit' used out of scope.</pre>
<p>This is patently untrue.  <code>itemInit</code> is definitely <em>in scope</em>.  If you can&#8217;t see that, you&#8217;re either a dumbass noob or you&#8217;ve been blinded by java.  In javascript, scope is determined by <code>function</code> blocks, not by statement blocks or any other type of block (except the <code>with</code> statement, but let&#8217;s not go there).</p>
<p>Therefore, this code is 100% legit.  It doesn&#8217;t break in any javascript environment.  Just because the <code>var</code> statement is in an <code>if</code> block, does not change the fact that it is <em>in scope</em> throughout the <code>function</code> block.  It doesn&#8217;t matter where the variable is declared in the <code>function</code>: the scope of the variable is always the entire <code>function</code>.</p>
<p>In fact, the following code, despite being totally mental, will work flawlessly and won&#8217;t leak the <code>today</code> variable into the global scope as JSLint insists it will:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> beerOfTheDay <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    today <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">'Old Rasputin Imperial Stout '</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span>today.<span style="color: #660066;">getDay</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">5</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">'is'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'isn'</span>t<span style="color: #3366CC;">') + '</span> the beer of the day.<span style="color: #3366CC;">'
    var today;
})();</span></pre></div></div>

<p>But does that make it right?  Well&#8230;.. no.</p>
<p>When I wrote the original code for my client, there was a perfect storm of anti-patterns that took over my psyche.  (That&#8217;s my story and I&#8217;m sticking to it.)  </p>
<p>The first anti-pattern:</p>
<blockquote><p>This project is getting bulkier than I had planned.  I better start conserving bytes.  Placing the gimped <code>var itemInit;</code> outside the <code>if</code> block will add a <em>whopping 9 bytes! Ouch! Every little bit counts!</em></p></blockquote>
<p>The second anti-pattern (to help justify the first):</p>
<blockquote><p>This is a core function. I better squeeze every last CPU cycle out of this. If I were to use <code>var itemInit = !already &#038;&#038; ctrlr._getItemInit(which);</code>, the javascript interpreter is gonna have to write to the heap and that&#8217;s <em>ssslllloooowwwww</em>.  bad. bad. bad!</p></blockquote>
<p>The final (and kicker) anti-pattern:</p>
<blockquote><p>This is pretty obvious.  I mean, look.  The <code>var</code> statement is sitting just above the lines in which the variable is used.  Nobody with half a brain is gonna miss that!</p></blockquote>
<p>The first two anti-patterns aren&#8217;t always anti-patterns.  If you&#8217;re writing code for mobile devices, you may need to skimp on bytes just so your code can sneak into the device&#8217;s cache (ahem, iPhone).  Or if you&#8217;re writing code that may need to execute hundreds of times per second, avoiding a variable assignment might be a good thing.</p>
<p>Of course, neither of these were the case here.  (In my defense, I was working on a parallel project in which both of these were the case!)</p>
<p>The third anti-pattern is antithetical because code is <em>always</em> changing.  Today it may look fine, but tomorrow &#8212; under somebody else&#8217;s gaze or after a few iterations of feature requests &#8212; it may look completely different.  </p>
<p>This third anti-pattern is the one that bothered me the most.  I strive to always write code that&#8217;s easy for another developer to understand and manipulate.  This, clearly, was a minor transgression and I&#8217;ll need to refocus my efforts in this regard.</p>
<p>So, in one respect, JSLint helped me out today.  But that doesn&#8217;t mean I like it any more than I did when I cursed at it earlier today.  It&#8217;s still a stupid tool that doesn&#8217;t know shit about good code as far as I&#8217;m concerned.  </p>
<p>For instance, don&#8217;t effin tell me to always use <code>obj === null</code>.  Some times I really do want to use <code>obj == null</code>!  I know the difference, and will likely leave a comment so the next noob who comes along doesn&#8217;t screw it up.</p>
<p>Stupid friggin tool.  <img src='http://unscriptable.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://unscriptable.com/2010/04/06/jslint-puked-on-my-javascript/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
	</channel>
</rss>

