<?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>uxebu » blog &#187; coding style</title>
	<atom:link href="http://uxebu.com/tag/coding-style/feed/" rel="self" type="application/rss+xml" />
	<link>http://uxebu.com/blog</link>
	<description></description>
	<lastBuildDate>Thu, 19 Jan 2012 14:53:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Some for-loop considerations</title>
		<link>http://uxebu.com/blog/2009/03/26/some-for-loop-considerations/</link>
		<comments>http://uxebu.com/blog/2009/03/26/some-for-loop-considerations/#comments</comments>
		<pubDate>Thu, 26 Mar 2009 14:49:16 +0000</pubDate>
		<dc:creator>wolfram</dc:creator>
				<category><![CDATA[development tools]]></category>
		<category><![CDATA[dojo]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[uxebu]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[coding style]]></category>
		<category><![CDATA[for-loop]]></category>
		<category><![CDATA[performance]]></category>

		<guid isPermaLink="false">http://blog.uxebu.com/?p=142</guid>
		<description><![CDATA[We have been developing some coding style guide lines to produce better code and make our code easier maintainable and portable. Also thinking about code inspection tools and continuous integration techniques which analyze the code will profit from a well defined and verifyable style. While discussing a rather simple rule I thought this might be [...]]]></description>
			<content:encoded><![CDATA[<p>We have been developing some coding style guide lines to produce better code and make our code easier maintainable and portable. Also thinking about code inspection tools and continuous integration techniques which analyze the code will profit from a well defined and verifyable style.<br />
While discussing a rather simple rule I thought this might be interesting to delve into a bit. You will be surprised how much you can discuss about a simple thing such as a for-loop and that is not only true for JavaScript, I am sure.<br />
<span id="more-142"></span></p>
<p>Well, call me pedantic for even discussing this and seeing this as relevant. But everybody knows that adhering coding styles make programming in a team way more pleasant and it is just way more efficient to just code and not to style! Which includes not having to think about how to style the code, though I realize that a lot of programmers have a problem adapting to coding styles.<br />
We at uxebu basically defined that we are applying the coding guide lines of the project that we possibly contribute stuff back to. This means our JavaScript code applies the <a href="http://www.dojotoolkit.org/developer/StyleGuide">dojo coding style guide</a> and our python stuff (we use internally) applies the <a href="http://docs.djangoproject.com/en/dev/internals/contributing/#coding-style">django coding style guide</a>.</p>
<p>But let&#8217;s look at the for-loop now.</p>
<h2>The default</h2>
<p>The most common usage of a for loop is the following.</p>
<div class="codecolorer-container javascript twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>nodes.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> node <span style="color: #339933;">=</span> nodes<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #006600; font-style: italic;">// whatever</span><br />
<span style="color: #009900;">&#125;</span></div></td></tr></tbody></table></div>
<p>Nothing spectacular here. But let&#8217;s take it apart a bit. There are two things that are commonly known that can be optimized.</p>
<ol>
<li>The comparison &#8220;i&lt;nodes.length&#8221; in line 1 evaluates the length of nodes on every iteration, if the nodes array is not modified while looping over it or the change to it is not relevant, this can be optimized.</li>
<li>Also the declaration of the variable &#8220;node&#8221; in line 2 is done multiple times, so this is just a small unnecessary thing to do.</li>
</ol>
<p>So let&#8217;s optimize the things we just found out.</p>
<h2>Version 2</h2>
<div class="codecolorer-container javascript twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br />6<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> node<span style="color: #339933;">;</span><br />
<span style="color: #003366; font-weight: bold;">var</span> len<span style="color: #339933;">=</span>nodes.<span style="color: #660066;">length</span><span style="color: #339933;">;</span><br />
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>len<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; node <span style="color: #339933;">=</span> nodes<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #006600; font-style: italic;">// whatever</span><br />
<span style="color: #009900;">&#125;</span></div></td></tr></tbody></table></div>
<p>Another step on our way was to optimize the variable declarations and reducing their count from three down to one. In some code you can then see the following.</p>
<h2>Version 3</h2>
<div class="codecolorer-container javascript twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> node<span style="color: #339933;">,</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> len<span style="color: #339933;">=</span>nodes.<span style="color: #660066;">length</span><span style="color: #339933;">;</span><br />
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>len<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; node <span style="color: #339933;">=</span> nodes<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #006600; font-style: italic;">// whatever</span><br />
<span style="color: #009900;">&#125;</span></div></td></tr></tbody></table></div>
<p>Actually we have already skipped a tiny step in between, very often you can see multiple var-statements as opposed to the already &#8220;squeezed&#8221; one-liner in line 1 above. The way of writing it as seen here, is reasonable if there are a couple other variables to be declared, you just need one var-statement. This will basically reduce the code size, if your minifier doesn&#8217;t already do that for you. <a href="http://wonko.com/post/try-to-use-one-var-statement-per-scope-in-javascript#comment-4819">As stated here</a> it seems to be specified to be irrelevant to performance. So event the argument under 2. against the first version (see above) is not very strong.<br />
Just a small side-note: the one line var-statement evaluates in declaration order, so something like this will work!</p>
<div class="codecolorer-container javascript twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> arr <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> len <span style="color: #339933;">=</span> arr.<span style="color: #660066;">length</span><span style="color: #339933;">,</span> x <span style="color: #339933;">=</span> len<span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>The &#8220;len&#8221; and also &#8220;x&#8221; variables contain the proper content as you are expecting. The comma-separated var-statement evaluates the assignment expression by expression and steps on to the next assignment. Therefore &#8220;len&#8221; and &#8220;x&#8221; will have the proper values 3 and 2.<br />
But let&#8217;s go back to our for-loop.</p>
<h2>Version 4</h2>
<p>If the var-statement is outside the for-loop and especially if other variables (outside of the scope of the for-loop) are declared there the source code get&#8217;s blury and harder to read. For example:</p>
<div class="codecolorer-container javascript twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> someVar <span style="color: #339933;">=</span> whatever<span style="color: #339933;">,</span> anotherVar <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">4</span><span style="color: #339933;">,</span><span style="color: #CC0000;">5</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> node<span style="color: #339933;">,</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> len<span style="color: #339933;">=</span>nodes.<span style="color: #660066;">length</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>The first two variable declarations (someVar and anotherVar) have nothing to do with the for-loop context, but the others do, so this blurs the source code and is prone to errors. Also if you separate this source code onto multiple lines like so:</p>
<div class="codecolorer-container javascript twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> someVar <span style="color: #339933;">=</span> whatever<span style="color: #339933;">,</span> anotherVar <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">4</span><span style="color: #339933;">,</span><span style="color: #CC0000;">5</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span><br />
&nbsp; &nbsp; node<span style="color: #339933;">,</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> len<span style="color: #339933;">=</span>nodes.<span style="color: #660066;">length</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>it is still a possible point of failure. I for example, forgot the comma on line 1 which made this source code</p>
<div class="codecolorer-container javascript twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> someVar <span style="color: #339933;">=</span> whatever<span style="color: #339933;">,</span> anotherVar <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">4</span><span style="color: #339933;">,</span><span style="color: #CC0000;">5</span><span style="color: #009900;">&#93;</span><br />
&nbsp; &nbsp; node<span style="color: #339933;">,</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> len<span style="color: #339933;">=</span>nodes.<span style="color: #660066;">length</span><span style="color: #339933;">;</span></div></td></tr></tbody></table></div>
<p>still work. But and this is a <strong>big but</strong>, the code get&#8217;s a different meaning now! First, line 1 will work, since the semicolon at the end of the line is not mandatory. And second (if not declared inside this scope before) the variables on line 2 are now defined in global scope. And that can really cause a hard to find bug!<br />
Another good reason for not doing this, is that extending the code may lead to developers adding code in between the var-declaration and the for-loop, for whatever reason. Then the variable declarations for the for-loop &#8220;drift away&#8221; and loose their context even a bit more. And the source code becomes harder to understand.</p>
<p>So we rather put all the variable declarations into the for-loop&#8217;s var-statement. Like so:</p>
<div class="codecolorer-container javascript twitlight" style="overflow:auto;white-space:nowrap;border:1px solid #9F9F9F;width:435px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td style="padding:5px;text-align:center;color:#888888;background-color:#EEEEEE;border-right: 1px solid #9F9F9F;font: normal 12px/1.4em Monaco, Lucida Console, monospace;"><div>1<br />2<br />3<br />4<br />5<br /></div></td><td><div class="javascript codecolorer" style="padding:5px;font:normal 12px/1.4em Monaco, Lucida Console, monospace;white-space:nowrap"><span style="color: #003366; font-weight: bold;">var</span> someVar <span style="color: #339933;">=</span> whatever<span style="color: #339933;">,</span> anotherVar <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">4</span><span style="color: #339933;">,</span><span style="color: #CC0000;">5</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// This is outside the for-loop and also looks like it.</span><br />
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> len<span style="color: #339933;">=</span>nodes.<span style="color: #660066;">length</span><span style="color: #339933;">,</span> node<span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>len<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><br />
&nbsp; &nbsp; node <span style="color: #339933;">=</span> nodes<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><br />
&nbsp; &nbsp; <span style="color: #006600; font-style: italic;">// whatever</span><br />
<span style="color: #009900;">&#125;</span></div></td></tr></tbody></table></div>
<p>Now we have a pretty compact and well context-focused syntax for declaring variables needed within a for-loop. This code is nicely readable and has no impact on performance, even if in most cases good and maintainable code is worth more than the fastest code, but that&#8217;s a use case based decision! We are taking this as a standard for uxebu code.</p>
<p>What do you think? Let us know if you see potential for optimization.</p>
]]></content:encoded>
			<wfw:commentRss>http://uxebu.com/blog/2009/03/26/some-for-loop-considerations/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

