<?xml version="1.0" encoding="iso-8859-1"?><!-- generator="b2evolution/4.0.3" -->
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:admin="http://webns.net/mvcb/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>Web Developer - Author(s): damber</title>
		<link>http://blogs.lessthandot.com/index.php/WebDev/</link>
		<atom:link rel="self" type="application/rss+xml" href="http://blogs.lessthandot.com/index.php/WebDev/?tempskin=_rss2" />
		<description></description>
		<language>en-GB</language>
		<docs>http://blogs.law.harvard.edu/tech/rss</docs>
		<admin:generatorAgent rdf:resource="http://b2evolution.net/?v=4.0.3"/>
		<ttl>60</ttl>
				<item>
			<title>Simple addition of a range</title>
			<link>http://blogs.lessthandot.com/index.php/WebDev/UIDevelopment/Javascript/simple-addition-of-a-range-2</link>
			<pubDate>Mon, 12 May 2008 18:27:44 +0000</pubDate>			<dc:creator>damber</dc:creator>
			<category domain="main">Javascript</category>			<guid isPermaLink="false">15@http://blogs.lessthandot.com/</guid>
						<description>&lt;p&gt;&lt;br /&gt;&lt;/p&gt;
&lt;h2&gt;Adding a range of numbers&lt;/h2&gt;
&lt;p&gt;Adding numbers is easy.  Very easy for programs, right?  How about adding up a range of numbers?  1 to 5 maybe ?  1+2+3+4+5 = 15 &amp;#8230; easy !&lt;/p&gt;

&lt;p&gt;What about adding up 1 to 100 ?  not so easy in your head, but with a little code this shouldn&amp;#8217;t be a problem.  In fact a lot of programmers would approach it like the following:&lt;/p&gt;

&lt;div class=&quot;codebox&quot;&gt;&lt;div class=&quot;codeheader&quot;&gt;Code: &lt;span&gt;javascript&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;codeholder&quot;&gt;&lt;div class=&quot;javascript&quot; id=&quot;cb14670&quot; style=&quot;display: block; color: rgb(0, 0, 0);&quot;&gt;var sumOfRangeLoop = 0;&lt;br /&gt;for (i=1;i&amp;lt;=100;i++)&lt;br /&gt;{&lt;br /&gt;&amp;nbsp; &amp;nbsp; sumOfRangeLoop += i;&lt;br /&gt;}&lt;br /&gt;document.write(&amp;quot;Loop: &amp;quot; + sumOfRangeLoop + &amp;quot;&amp;lt;br/&amp;gt;&amp;quot;);&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;&lt;div id=&quot;cb78351&quot; style=&quot;display: none; color: red;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Great - it gets you the answer that you wanted.  Now what about 25 to 25,000,000 ?  OK, that takes a while to run&amp;#8230;.  What if I tried 234 to 435,657,123 ? Mmmm&amp;#8230; ouch. This doesn&amp;#8217;t work too well does it ?
&lt;/p&gt;
&lt;p&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;
&lt;h2&gt;Improving Performance&lt;/h2&gt;
&lt;p&gt;If we want to be able to scale our code then we need to use a little math to help us get the answer, instead of relying on brute force. &lt;/p&gt;

&lt;p&gt;In this &lt;a href=&quot;http://betterexplained.com/articles/techniques-for-adding-the-numbers-1-to-100/&quot;&gt;excellent and clearly explained article about number range summation&lt;/a&gt;, you will see that there are many ways to visualise the process to make it easier to calculate the sum of a range - even in our head, and how they all lead toward a single formula.  Within the comments you will notice that discussion identifies a more generic formula that allows for the starting position to be more than 1, and also to allow evenly spaced &amp;#8217;steps&amp;#8217;. &lt;/p&gt;

&lt;div class=&quot;codebox&quot;&gt;&lt;div class=&quot;codeheader&quot;&gt;Code: &lt;span&gt;javascript&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;codeholder&quot;&gt;&lt;div class=&quot;javascript&quot; id=&quot;cb99812&quot; style=&quot;display: block; color: rgb(0, 0, 0);&quot;&gt;var rangeStart = 234;&lt;br /&gt;var rangeEnd = 435657123;&lt;br /&gt;var rangeStep = 1;&lt;br /&gt;var digitCount = ((rangeEnd - rangeStart)+rangeStep)/rangeStep;&lt;br /&gt;var sumOfRangeCalc = ((digitCount * (rangeEnd+rangeStart) ) / 2);&amp;nbsp; &amp;nbsp;&lt;br /&gt;document.write(&amp;quot;Sum of Range: &amp;quot; + sumOfRangeCalc + &amp;quot;&amp;lt;br/&amp;gt;&amp;quot;);&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;&lt;div id=&quot;cb95200&quot; style=&quot;display: none; color: red;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;This runs almost instantly, compared to the hung browser effect of the loop approach for this scale of numbers.  
&lt;/p&gt;

&lt;p&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;Performance Benchmarks&lt;/h2&gt;

&lt;p&gt;To see just how different the performance is, here is a complete working example testing both methods over multiple iterations of the same moderately sized range&lt;/p&gt;

&lt;div class=&quot;codebox&quot;&gt;&lt;div class=&quot;codeheader&quot;&gt;Code: &lt;span&gt;javascript&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;codeholder&quot;&gt;&lt;div class=&quot;javascript&quot; id=&quot;cb19219&quot; style=&quot;display: block; color: rgb(0, 0, 0);&quot;&gt;&amp;lt;html&amp;gt;&lt;br /&gt;&amp;lt;head&amp;gt;&lt;br /&gt;&amp;lt;title&amp;gt;test&amp;lt;/test&amp;gt;&lt;br /&gt;&amp;lt;/head&amp;gt;&lt;br /&gt;&amp;lt;body&amp;gt;&lt;br /&gt;&amp;lt;script &lt;span style=&quot;color:#ff00ff;&quot;&gt;type&lt;/span&gt;=&lt;span style=&quot;color:#ff0000;&quot;&gt;&amp;quot;text/javascript&amp;quot;&lt;/span&gt;&amp;gt;&lt;br /&gt;&amp;nbsp;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;var&lt;/span&gt; rangeStart = &lt;span style=&quot;&quot;&gt;150&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;var&lt;/span&gt; rangeEnd = &lt;span style=&quot;&quot;&gt;25000&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;var&lt;/span&gt; rangeStep = &lt;span style=&quot;&quot;&gt;1&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;var&lt;/span&gt; iterations = &lt;span style=&quot;&quot;&gt;1000&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;var&lt;/span&gt; ts;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;var&lt;/span&gt; te;&lt;br /&gt;&amp;nbsp;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;document&lt;/span&gt;.&lt;span style=&quot;color:#0000ff;&quot;&gt;write&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color:#ff0000;&quot;&gt;&amp;quot;Testing Calc: &amp;nbsp;&amp;quot;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; ts = &lt;span style=&quot;color:#0000ff;&quot;&gt;new&lt;/span&gt; &lt;span style=&quot;color:#ff00ff;&quot;&gt;Date&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;for&lt;/span&gt; &lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;j=&lt;span style=&quot;&quot;&gt;0&lt;/span&gt;;j&amp;lt;iterations;j++&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; sumByCalc&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; te = &lt;span style=&quot;color:#0000ff;&quot;&gt;new&lt;/span&gt; &lt;span style=&quot;color:#ff00ff;&quot;&gt;Date&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;document&lt;/span&gt;.&lt;span style=&quot;color:#0000ff;&quot;&gt;write&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;te - ts&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;/&lt;span style=&quot;&quot;&gt;1000&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt; + &lt;span style=&quot;color:#ff0000;&quot;&gt;&amp;quot; seconds&amp;lt;br/&amp;gt;&amp;quot;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;&amp;nbsp;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;document&lt;/span&gt;.&lt;span style=&quot;color:#0000ff;&quot;&gt;write&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color:#ff0000;&quot;&gt;&amp;quot;Testing Loop: &amp;nbsp;&amp;quot;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; ts = &lt;span style=&quot;color:#0000ff;&quot;&gt;new&lt;/span&gt; &lt;span style=&quot;color:#ff00ff;&quot;&gt;Date&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;for&lt;/span&gt; &lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;j=&lt;span style=&quot;&quot;&gt;0&lt;/span&gt;;j&amp;lt;iterations;j++&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; sumByLoop&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; te = &lt;span style=&quot;color:#0000ff;&quot;&gt;new&lt;/span&gt; &lt;span style=&quot;color:#ff00ff;&quot;&gt;Date&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;document&lt;/span&gt;.&lt;span style=&quot;color:#0000ff;&quot;&gt;write&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;te - ts&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;/&lt;span style=&quot;&quot;&gt;1000&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt; + &lt;span style=&quot;color:#ff0000;&quot;&gt;&amp;quot; seconds&amp;lt;br/&amp;gt;&amp;quot;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;&amp;nbsp;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;function&lt;/span&gt; sumByCalc&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;var&lt;/span&gt; digitCount = &lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;rangeEnd - rangeStart&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;+rangeStep&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;/rangeStep;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;var&lt;/span&gt; sumOfRangeCalc = &lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;digitCount * &lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;rangeEnd+rangeStart&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt; / &lt;span style=&quot;&quot;&gt;2&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;;&amp;nbsp; &amp;nbsp;&lt;br /&gt;&lt;span style=&quot;color:#a0a0a4; font-style:italic;&quot;&gt;//&amp;nbsp; &amp;nbsp; &amp;nbsp; document.write(&amp;quot;Equation: &amp;quot; + sumOfRangeCalc + &amp;quot;&amp;lt;br/&amp;gt;&amp;quot;);&amp;nbsp; &amp;nbsp; &lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;&amp;nbsp;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;function&lt;/span&gt; sumByLoop&lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;var&lt;/span&gt; sumOfRangeLoop = &lt;span style=&quot;&quot;&gt;0&lt;/span&gt;;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span style=&quot;color:#0000ff;&quot;&gt;for&lt;/span&gt; &lt;span style=&quot;&quot;&gt;&amp;#40;&lt;/span&gt;i=rangeStart;i&amp;lt;=rangeEnd;i+=rangeStep&lt;span style=&quot;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span style=&quot;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; sumOfRangeLoop += i;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;span style=&quot;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;color:#a0a0a4; font-style:italic;&quot;&gt;//&amp;nbsp; &amp;nbsp; &amp;nbsp; document.write(&amp;quot;Loop: &amp;quot; + sumOfRangeLoop + &amp;quot;&amp;lt;br/&amp;gt;&amp;quot;);&amp;nbsp; &amp;nbsp; &lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &lt;span style=&quot;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &lt;br /&gt;&amp;lt;/script&amp;gt;&lt;br /&gt;&amp;lt;/body&amp;gt;&lt;br /&gt;&amp;lt;/html&amp;gt;&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;&lt;div id=&quot;cb75061&quot; style=&quot;display: none; color: red;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;
&lt;h5&gt;Results:&lt;/h5&gt;

&lt;pre&gt;
Testing Calc: 0.001 seconds
Testing Loop: 7.342 seconds
&lt;/pre&gt;

&lt;p&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;

&lt;h2&gt;In Conclusion&lt;/h2&gt;

&lt;p&gt;So, this simply means that you should use the right tool for the job.  The Brute Force method doesn&amp;#8217;t scale very well - there are simple equations that can answer this question, so.. use them.  Here is a self contained function that returns the sum of a range from x to y with stepping z.  You&amp;#8217;ll need to validate the rangeStep to ensure it is valid with the rangeStart and rangeEnd.&lt;/p&gt;

&lt;div class=&quot;codebox&quot;&gt;&lt;div class=&quot;codeheader&quot;&gt;Code: &lt;span&gt;javascript&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;codeholder&quot;&gt;&lt;div class=&quot;javascript&quot; id=&quot;cb22508&quot; style=&quot;display: block; color: rgb(0, 0, 0);&quot;&gt;function sumRange(rangeStart, rangeEnd, rangeStep)&lt;br /&gt;&amp;nbsp; &amp;nbsp; {&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; var digitCount = ((rangeEnd - rangeStart)+rangeStep)/rangeStep;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; var sumOfRangeCalc = ((digitCount * (rangeEnd+rangeStart) ) / 2);&amp;nbsp; &amp;nbsp;&lt;br /&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; return sumOfRangeCalc;&lt;br /&gt;&amp;nbsp; &amp;nbsp; }&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;&lt;div id=&quot;cb43303&quot; style=&quot;display: none; color: red;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;item_footer&quot;&gt;&lt;p&gt;&lt;small&gt;&lt;a href=&quot;http://blogs.lessthandot.com/index.php/WebDev/UIDevelopment/Javascript/simple-addition-of-a-range-2&quot;&gt;Original post&lt;/a&gt; blogged on &lt;a href=&quot;http://lessthandot.com/&quot;&gt;LessThanDot&lt;/a&gt;.&lt;/small&gt;&lt;/p&gt;&lt;/div&gt;</description>
			<content:encoded><![CDATA[<p><br /></p>
<h2>Adding a range of numbers</h2>
<p>Adding numbers is easy.  Very easy for programs, right?  How about adding up a range of numbers?  1 to 5 maybe ?  1+2+3+4+5 = 15 &#8230; easy !</p>

<p>What about adding up 1 to 100 ?  not so easy in your head, but with a little code this shouldn&#8217;t be a problem.  In fact a lot of programmers would approach it like the following:</p>

<div class="codebox"><div class="codeheader"><span>javascript</span><div class="codebox_javascript_links"><a href="http://blogs.lessthandot.com" onclick="linenumberOnOff('cb23820'); return false;">Line number Off</a> | <a href="http://blogs.lessthandot.com#" onclick="expandCode('cb23820','cb92846'); return false;">Hide</a> | <a href="http://blogs.lessthandot.com#" onclick="selectCode(this); return false;">Select all</a></div></div><!-- we need this dummy div to fix a firefox bug when selecting code lines --><div class="codeholder"><div class="javascript" id="cb23820" style="display: block; color: rgb(0, 0, 0);"><ol><li style="" class="li1">var sumOfRangeLoop = 0;</li><li style="" class="li2">for (i=1;i&lt;=100;i++)</li><li style="" class="li1">{</li><li style="" class="li2">&nbsp; &nbsp; sumOfRangeLoop += i;</li><li style="" class="li1">}</li><li style="" class="li2">document.write(&quot;Loop: &quot; + sumOfRangeLoop + &quot;&lt;br/&gt;&quot;);</li></ol></div><div id="cb92846" style="display: none; color: red;"></div></div></div>

<p>Great - it gets you the answer that you wanted.  Now what about 25 to 25,000,000 ?  OK, that takes a while to run&#8230;.  What if I tried 234 to 435,657,123 ? Mmmm&#8230; ouch. This doesn&#8217;t work too well does it ?
</p>
<p><br /><br /></p>
<h2>Improving Performance</h2>
<p>If we want to be able to scale our code then we need to use a little math to help us get the answer, instead of relying on brute force. </p>

<p>In this <a href="http://betterexplained.com/articles/techniques-for-adding-the-numbers-1-to-100/">excellent and clearly explained article about number range summation</a>, you will see that there are many ways to visualise the process to make it easier to calculate the sum of a range - even in our head, and how they all lead toward a single formula.  Within the comments you will notice that discussion identifies a more generic formula that allows for the starting position to be more than 1, and also to allow evenly spaced &#8217;steps&#8217;. </p>

<div class="codebox"><div class="codeheader"><span>javascript</span><div class="codebox_javascript_links"><a href="http://blogs.lessthandot.com" onclick="linenumberOnOff('cb83718'); return false;">Line number Off</a> | <a href="http://blogs.lessthandot.com#" onclick="expandCode('cb83718','cb21438'); return false;">Hide</a> | <a href="http://blogs.lessthandot.com#" onclick="selectCode(this); return false;">Select all</a></div></div><!-- we need this dummy div to fix a firefox bug when selecting code lines --><div class="codeholder"><div class="javascript" id="cb83718" style="display: block; color: rgb(0, 0, 0);"><ol><li style="" class="li1">var rangeStart = 234;</li><li style="" class="li2">var rangeEnd = 435657123;</li><li style="" class="li1">var rangeStep = 1;</li><li style="" class="li2">var digitCount = ((rangeEnd - rangeStart)+rangeStep)/rangeStep;</li><li style="" class="li1">var sumOfRangeCalc = ((digitCount * (rangeEnd+rangeStart) ) / 2);&nbsp; &nbsp;</li><li style="" class="li2">document.write(&quot;Sum of Range: &quot; + sumOfRangeCalc + &quot;&lt;br/&gt;&quot;);</li></ol></div><div id="cb21438" style="display: none; color: red;"></div></div></div>

<p>This runs almost instantly, compared to the hung browser effect of the loop approach for this scale of numbers.  
</p>

<p><br /><br /></p>

<h2>Performance Benchmarks</h2>

<p>To see just how different the performance is, here is a complete working example testing both methods over multiple iterations of the same moderately sized range</p>

<div class="codebox"><div class="codeheader"><span>javascript</span><div class="codebox_javascript_links"><a href="http://blogs.lessthandot.com" onclick="linenumberOnOff('cb78212'); return false;">Line number Off</a> | <a href="http://blogs.lessthandot.com#" onclick="expandCode('cb78212','cb37466'); return false;">Hide</a> | <a href="http://blogs.lessthandot.com#" onclick="selectCode(this); return false;">Select all</a></div></div><!-- we need this dummy div to fix a firefox bug when selecting code lines --><div class="codeholder"><div class="javascript" id="cb78212" style="display: block; color: rgb(0, 0, 0);"><ol><li style="" class="li1">&lt;html&gt;</li><li style="" class="li2">&lt;head&gt;</li><li style="" class="li1">&lt;title&gt;test&lt;/test&gt;</li><li style="" class="li2">&lt;/head&gt;</li><li style="" class="li1">&lt;body&gt;</li><li style="" class="li2">&lt;script <span style="color:#ff00ff;">type</span>=<span style="color:#ff0000;">&quot;text/javascript&quot;</span>&gt;</li><li style="" class="li1">&nbsp;</li><li style="" class="li2">&nbsp; &nbsp; <span style="color:#0000ff;">var</span> rangeStart = <span style="">150</span>;</li><li style="" class="li1">&nbsp; &nbsp; <span style="color:#0000ff;">var</span> rangeEnd = <span style="">25000</span>;</li><li style="" class="li2">&nbsp; &nbsp; <span style="color:#0000ff;">var</span> rangeStep = <span style="">1</span>;</li><li style="" class="li1">&nbsp; &nbsp; <span style="color:#0000ff;">var</span> iterations = <span style="">1000</span>;</li><li style="" class="li2">&nbsp; &nbsp; <span style="color:#0000ff;">var</span> ts;</li><li style="" class="li1">&nbsp; &nbsp; <span style="color:#0000ff;">var</span> te;</li><li style="" class="li2">&nbsp;</li><li style="" class="li1">&nbsp; &nbsp; </li><li style="" class="li2">&nbsp; &nbsp; <span style="color:#0000ff;">document</span>.<span style="color:#0000ff;">write</span><span style="">&#40;</span><span style="color:#ff0000;">&quot;Testing Calc: &nbsp;&quot;</span><span style="">&#41;</span>;</li><li style="" class="li1">&nbsp; &nbsp; ts = <span style="color:#0000ff;">new</span> <span style="color:#ff00ff;">Date</span><span style="">&#40;</span><span style="">&#41;</span>;</li><li style="" class="li2">&nbsp; &nbsp; <span style="color:#0000ff;">for</span> <span style="">&#40;</span>j=<span style="">0</span>;j&lt;iterations;j++<span style="">&#41;</span></li><li style="" class="li1">&nbsp; &nbsp; <span style="">&#123;</span></li><li style="" class="li2">&nbsp; &nbsp; &nbsp; &nbsp; sumByCalc<span style="">&#40;</span><span style="">&#41;</span>;</li><li style="" class="li1">&nbsp; &nbsp; <span style="">&#125;</span></li><li style="" class="li2">&nbsp; &nbsp; te = <span style="color:#0000ff;">new</span> <span style="color:#ff00ff;">Date</span><span style="">&#40;</span><span style="">&#41;</span>;</li><li style="" class="li1">&nbsp; &nbsp; <span style="color:#0000ff;">document</span>.<span style="color:#0000ff;">write</span><span style="">&#40;</span><span style="">&#40;</span><span style="">&#40;</span>te - ts<span style="">&#41;</span>/<span style="">1000</span><span style="">&#41;</span> + <span style="color:#ff0000;">&quot; seconds&lt;br/&gt;&quot;</span><span style="">&#41;</span>;</li><li style="" class="li2">&nbsp;</li><li style="" class="li1">&nbsp; &nbsp; <span style="color:#0000ff;">document</span>.<span style="color:#0000ff;">write</span><span style="">&#40;</span><span style="color:#ff0000;">&quot;Testing Loop: &nbsp;&quot;</span><span style="">&#41;</span>;</li><li style="" class="li2">&nbsp; &nbsp; ts = <span style="color:#0000ff;">new</span> <span style="color:#ff00ff;">Date</span><span style="">&#40;</span><span style="">&#41;</span>;</li><li style="" class="li1">&nbsp; &nbsp; <span style="color:#0000ff;">for</span> <span style="">&#40;</span>j=<span style="">0</span>;j&lt;iterations;j++<span style="">&#41;</span></li><li style="" class="li2">&nbsp; &nbsp; <span style="">&#123;</span></li><li style="" class="li1">&nbsp; &nbsp; &nbsp; &nbsp; sumByLoop<span style="">&#40;</span><span style="">&#41;</span>;</li><li style="" class="li2">&nbsp; &nbsp; <span style="">&#125;</span></li><li style="" class="li1">&nbsp; &nbsp; te = <span style="color:#0000ff;">new</span> <span style="color:#ff00ff;">Date</span><span style="">&#40;</span><span style="">&#41;</span>;</li><li style="" class="li2">&nbsp; &nbsp; <span style="color:#0000ff;">document</span>.<span style="color:#0000ff;">write</span><span style="">&#40;</span><span style="">&#40;</span><span style="">&#40;</span>te - ts<span style="">&#41;</span>/<span style="">1000</span><span style="">&#41;</span> + <span style="color:#ff0000;">&quot; seconds&lt;br/&gt;&quot;</span><span style="">&#41;</span>;</li><li style="" class="li1">&nbsp;</li><li style="" class="li2">&nbsp; &nbsp; </li><li style="" class="li1">&nbsp; &nbsp; <span style="color:#0000ff;">function</span> sumByCalc<span style="">&#40;</span><span style="">&#41;</span></li><li style="" class="li2">&nbsp; &nbsp; <span style="">&#123;</span></li><li style="" class="li1">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#0000ff;">var</span> digitCount = <span style="">&#40;</span><span style="">&#40;</span>rangeEnd - rangeStart<span style="">&#41;</span>+rangeStep<span style="">&#41;</span>/rangeStep;</li><li style="" class="li2">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#0000ff;">var</span> sumOfRangeCalc = <span style="">&#40;</span><span style="">&#40;</span>digitCount * <span style="">&#40;</span>rangeEnd+rangeStart<span style="">&#41;</span> <span style="">&#41;</span> / <span style="">2</span><span style="">&#41;</span>;&nbsp; &nbsp;</li><li style="" class="li1"><span style="color:#a0a0a4; font-style:italic;">//&nbsp; &nbsp; &nbsp; document.write(&quot;Equation: &quot; + sumOfRangeCalc + &quot;&lt;br/&gt;&quot;);&nbsp; &nbsp; </span></li><li style="" class="li2">&nbsp; &nbsp; <span style="">&#125;</span></li><li style="" class="li1">&nbsp;</li><li style="" class="li2">&nbsp; &nbsp; <span style="color:#0000ff;">function</span> sumByLoop<span style="">&#40;</span><span style="">&#41;</span></li><li style="" class="li1">&nbsp; &nbsp; <span style="">&#123;</span></li><li style="" class="li2">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#0000ff;">var</span> sumOfRangeLoop = <span style="">0</span>;</li><li style="" class="li1">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#0000ff;">for</span> <span style="">&#40;</span>i=rangeStart;i&lt;=rangeEnd;i+=rangeStep<span style="">&#41;</span></li><li style="" class="li2">&nbsp; &nbsp; &nbsp; &nbsp; <span style="">&#123;</span></li><li style="" class="li1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sumOfRangeLoop += i;</li><li style="" class="li2">&nbsp; &nbsp; &nbsp; &nbsp; <span style="">&#125;</span></li><li style="" class="li1"><span style="color:#a0a0a4; font-style:italic;">//&nbsp; &nbsp; &nbsp; document.write(&quot;Loop: &quot; + sumOfRangeLoop + &quot;&lt;br/&gt;&quot;);&nbsp; &nbsp; </span></li><li style="" class="li2">&nbsp; &nbsp; <span style="">&#125;</span></li><li style="" class="li1">&nbsp; &nbsp; &nbsp; &nbsp; </li><li style="" class="li2">&lt;/script&gt;</li><li style="" class="li1">&lt;/body&gt;</li><li style="" class="li2">&lt;/html&gt;</li></ol></div><div id="cb37466" style="display: none; color: red;"></div></div></div>
<p><br /><br /></p>
<h5>Results:</h5>

<pre>
Testing Calc: 0.001 seconds
Testing Loop: 7.342 seconds
</pre>

<p><br /><br /></p>

<h2>In Conclusion</h2>

<p>So, this simply means that you should use the right tool for the job.  The Brute Force method doesn&#8217;t scale very well - there are simple equations that can answer this question, so.. use them.  Here is a self contained function that returns the sum of a range from x to y with stepping z.  You&#8217;ll need to validate the rangeStep to ensure it is valid with the rangeStart and rangeEnd.</p>

<div class="codebox"><div class="codeheader"><span>javascript</span><div class="codebox_javascript_links"><a href="http://blogs.lessthandot.com" onclick="linenumberOnOff('cb77030'); return false;">Line number Off</a> | <a href="http://blogs.lessthandot.com#" onclick="expandCode('cb77030','cb22213'); return false;">Hide</a> | <a href="http://blogs.lessthandot.com#" onclick="selectCode(this); return false;">Select all</a></div></div><!-- we need this dummy div to fix a firefox bug when selecting code lines --><div class="codeholder"><div class="javascript" id="cb77030" style="display: block; color: rgb(0, 0, 0);"><ol><li style="" class="li1">function sumRange(rangeStart, rangeEnd, rangeStep)</li><li style="" class="li2">&nbsp; &nbsp; {</li><li style="" class="li1">&nbsp; &nbsp; &nbsp; &nbsp; var digitCount = ((rangeEnd - rangeStart)+rangeStep)/rangeStep;</li><li style="" class="li2">&nbsp; &nbsp; &nbsp; &nbsp; var sumOfRangeCalc = ((digitCount * (rangeEnd+rangeStart) ) / 2);&nbsp; &nbsp;</li><li style="" class="li1">&nbsp; &nbsp; &nbsp; &nbsp; return sumOfRangeCalc;</li><li style="" class="li2">&nbsp; &nbsp; }</li></ol></div><div id="cb22213" style="display: none; color: red;"></div></div></div><div class="item_footer"><p><small><a href="http://blogs.lessthandot.com/index.php/WebDev/UIDevelopment/Javascript/simple-addition-of-a-range-2">Original post</a> blogged on <a href="http://lessthandot.com/">LessThanDot</a>.</small></p></div>]]></content:encoded>
								<comments>http://blogs.lessthandot.com/index.php/WebDev/UIDevelopment/Javascript/simple-addition-of-a-range-2#comments</comments>
			<wfw:commentRss>http://blogs.lessthandot.com/index.php/WebDev/?tempskin=_rss2&#38;disp=comments&#38;p=15</wfw:commentRss>
		</item>
			</channel>
</rss>
