<?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>Codec &#187; array</title>
	<atom:link href="http://www.trembl.org/codec/tag/array/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.trembl.org/codec</link>
	<description>A Personal Polylogic Code/Decode &#039;Zettelkasten&#039;</description>
	<lastBuildDate>Thu, 02 Feb 2012 03:38:01 +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>Swapping Array Items in Javascript</title>
		<link>http://www.trembl.org/codec/814/</link>
		<comments>http://www.trembl.org/codec/814/#comments</comments>
		<pubDate>Thu, 08 Dec 2011 07:55:04 +0000</pubDate>
		<dc:creator>Georg Tremmel</dc:creator>
				<category><![CDATA[Raw]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[swap]]></category>

		<guid isPermaLink="false">http://www.trembl.org/codec/?p=814</guid>
		<description><![CDATA[var myArray = &#91;&#34;a&#34;, &#34;c&#34;, &#34;b&#34;&#93;; myArray.swap&#40;1, 2&#41;; console.log&#40;myArray&#41;; // [&#34;a&#34;, &#34;b&#34;, &#34;c&#34;]; &#160; Array.prototype.swap=function&#40;a, b&#41; &#123; this&#91;a&#93;= this.splice&#40;b, 1, this&#91;a&#93;&#41;&#91;0&#93;; return this; &#125; It could also be done with a temp var, but this solution seems to be the most elegant. The key to this is in the additional arguments the splice() function can [...]]]></description>
			<content:encoded><![CDATA[
<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> myArray <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;c&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;b&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
myArray.<span style="color: #660066;">swap</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>myArray<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;];</span>
&nbsp;
Array.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">swap</span><span style="color: #339933;">=</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>a<span style="color: #339933;">,</span> b<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>a<span style="color: #009900;">&#93;</span><span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">splice</span><span style="color: #009900;">&#40;</span>b<span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>a<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>It could also be done with a temp var, but this solution seems to be the most elegant. The key to this is in the additional arguments the splice() function can accept.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">splice<span style="color: #009900;">&#40;</span>start<span style="color: #339933;">,</span> itemCount<span style="color: #339933;">,</span> additionalItems ...<span style="color: #009900;">&#41;</span></pre></div></div>

<p>splice() removes elements denominated by the <em>start</em> and <em>itemCount</em> argument, and &#8211; if specified &#8211; inserts <em>additional items</em> at the same position.</p>
<p>Also important to note is that splice() returns an <em>array</em>. And to turn that array into an item again we need to select it directly with [0].</p>
]]></content:encoded>
			<wfw:commentRss>http://www.trembl.org/codec/814/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery: Getting the element index from a list of identical class elements</title>
		<link>http://www.trembl.org/codec/812/</link>
		<comments>http://www.trembl.org/codec/812/#comments</comments>
		<pubDate>Thu, 08 Dec 2011 07:32:45 +0000</pubDate>
		<dc:creator>Georg Tremmel</dc:creator>
				<category><![CDATA[Raw]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[index]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[selection]]></category>

		<guid isPermaLink="false">http://www.trembl.org/codec/?p=812</guid>
		<description><![CDATA[Let&#8217;s say you have a number of identical class elements: &#60;div class=&#34;myClass&#34;&#62;One Title&#60;/div&#62; &#60;div class=&#34;myClass&#34;&#62;Another Title&#60;/div&#62; &#60;div class=&#34;myClass&#34;&#62;Brrrr&#60;/div&#62; &#60;div class=&#34;myClass&#34;&#62;Zzzzzz&#60;/div&#62; And you want to get a particular element from this list. var myArray = $&#40;&#34;.myClass&#34;&#41;; var thirdElement = myArray&#91;2&#93;; console.log&#40;thirdElement&#41;; // &#60;div class=&#34;myClass&#34;&#62;Brrrr&#60;/div&#62; But note, that myArray[2] is the HTML element, not an jQuery object. [...]]]></description>
			<content:encoded><![CDATA[<p>Let&#8217;s say you have a number of identical class elements:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;div class=&quot;myClass&quot;&gt;One Title&lt;/div&gt;
&lt;div class=&quot;myClass&quot;&gt;Another Title&lt;/div&gt;
&lt;div class=&quot;myClass&quot;&gt;Brrrr&lt;/div&gt;
&lt;div class=&quot;myClass&quot;&gt;Zzzzzz&lt;/div&gt;</pre></div></div>

<p>And you want to get a particular element from this list.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> myArray <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.myClass&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> thirdElement <span style="color: #339933;">=</span> myArray<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>thirdElement<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// &lt;div class=&quot;myClass&quot;&gt;Brrrr&lt;/div&gt;</span></pre></div></div>

<p>But note, that <em>myArray[2]</em> is the HTML element, not an jQuery object. If you want to access it via jQuery, you&#8217;ll have to &#8220;arm&#8221; it&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> myArray <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.myClass&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> thirdElement <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>myArray<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>thirdElement<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// [&lt;div class=&quot;myClass&quot;&gt;Brrrr&lt;/div&gt;]</span></pre></div></div>

<p>Interrating over a jQuery selected list can be done with the each() function:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">myArray.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">,</span> element<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> myElement <span style="color: #339933;">=</span> myArray<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">// this</span>
	<span style="color: #006600; font-style: italic;">// element</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p><em>myElement</em>, <em>element</em> and <em>this</em> would all hold the same value at each iteration. <em>i</em> is obviously the index counter. </p>
<p>It&#8217;s also described quite clearly at the <a href="http://api.jquery.com/index/">jQuery Docs</a>, but I think it&#8217;s important enough to reiterate.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.trembl.org/codec/812/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Copying Arrays in Javascript with slice(0)</title>
		<link>http://www.trembl.org/codec/813/</link>
		<comments>http://www.trembl.org/codec/813/#comments</comments>
		<pubDate>Tue, 06 Dec 2011 08:10:17 +0000</pubDate>
		<dc:creator>Georg Tremmel</dc:creator>
				<category><![CDATA[Raw]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[copy]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[slice]]></category>

		<guid isPermaLink="false">http://www.trembl.org/codec/?p=813</guid>
		<description><![CDATA[Using Arrays in Javascript retain their values by references. var oneArray = &#91;&#34;a&#34;, &#34;b&#34;, &#34;c&#34;&#93;; var anotherArray = oneArray; anotherArray&#91;0&#93; = &#34;z&#34;; &#160; console.log&#40;oneArray, anotherArray&#41;; // [&#34;z&#34;, &#34;b&#34;, &#34;c&#34;], [&#34;z&#34;, &#34;b&#34;, &#34;c&#34;] Ok, but let&#8217;s say you&#8217;ll need to make a copy of the array. How do you do that? var oneArray = &#91;&#34;a&#34;, &#34;b&#34;, [...]]]></description>
			<content:encoded><![CDATA[<p>Using Arrays in Javascript retain their values by references.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> oneArray <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;b&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;c&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> anotherArray <span style="color: #339933;">=</span> oneArray<span style="color: #339933;">;</span>
anotherArray<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;z&quot;</span><span style="color: #339933;">;</span>
&nbsp;
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>oneArray<span style="color: #339933;">,</span> anotherArray<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// [&quot;z&quot;, &quot;b&quot;, &quot;c&quot;], [&quot;z&quot;, &quot;b&quot;, &quot;c&quot;]</span></pre></div></div>

<p>Ok, but let&#8217;s say you&#8217;ll need to make a <em>copy</em> of the array. How do you do that?</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> oneArray <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;b&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;c&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> anotherArray <span style="color: #339933;">=</span> oneArray.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
anotherArray<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;z&quot;</span><span style="color: #339933;">;</span>
&nbsp;
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>oneArray<span style="color: #339933;">,</span> anotherArray<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;], [&quot;z&quot;, &quot;b&quot;, &quot;c&quot;]</span></pre></div></div>

<p>If you&#8217;d really, really want you could also wrap it into a prototype function. Although the code-characters savings are minimal.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Array.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">copy</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> anotherArray <span style="color: #339933;">=</span> oneArray.<span style="color: #660066;">slice</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//vs</span>
<span style="color: #003366; font-weight: bold;">var</span> anotherArray <span style="color: #339933;">=</span> oneArray.<span style="color: #660066;">copy</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Minimal, but maybe contextually for self-explaining.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.trembl.org/codec/813/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Freezing Objects and Arrays in Javascript</title>
		<link>http://www.trembl.org/codec/804/</link>
		<comments>http://www.trembl.org/codec/804/#comments</comments>
		<pubDate>Thu, 22 Sep 2011 07:50:15 +0000</pubDate>
		<dc:creator>Georg Tremmel</dc:creator>
				<category><![CDATA[Raw]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[freeze]]></category>
		<category><![CDATA[isFrozen]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[object]]></category>

		<guid isPermaLink="false">http://www.trembl.org/codec/?p=804</guid>
		<description><![CDATA[Since the ECMA-262 specifications (aka Javascript 1.8.5 aka ECMAScript 5th Edition) it is possible prevent Objects from accepting any changes to their properties. After applying Object.freeze(myObj) it won&#8217;t be possible to change, add or remove properties from myObj. So far so good. As in Javascript Arrays also inherit from Object, I could see not reason, [...]]]></description>
			<content:encoded><![CDATA[<p>Since the ECMA-262 specifications (aka Javascript 1.8.5 aka ECMAScript 5th Edition) it is possible prevent Objects from accepting any changes to their properties. After applying <em>Object.freeze(myObj)</em> it won&#8217;t be possible to change, add or remove properties from <em>myObj</em>.</p>
<p>So far so good.</p>
<p>As in Javascript Arrays also inherit from Object, I could see not reason, why freezing an array should not work.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> obj <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'a'</span><span style="color: #339933;">:</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'b:2'</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
Object.<span style="color: #660066;">freeze</span><span style="color: #009900;">&#40;</span>obj<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
Object.<span style="color: #660066;">isFrozen</span><span style="color: #009900;">&#40;</span>obj<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>       <span style="color: #006600; font-style: italic;">// returns true</span>
obj.<span style="color: #660066;">a</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">10</span><span style="color: #339933;">;</span>                 <span style="color: #006600; font-style: italic;">// new assignment has no affect</span>
obj.<span style="color: #660066;">a</span><span style="color: #339933;">;</span>                      <span style="color: #006600; font-style: italic;">// returns 1</span>
&nbsp;
<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: #009900;">&#93;</span><span style="color: #339933;">;</span>
Object.<span style="color: #660066;">freeze</span><span style="color: #009900;">&#40;</span>arr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
Object.<span style="color: #660066;">isFrozen</span><span style="color: #009900;">&#40;</span>arr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>      <span style="color: #006600; font-style: italic;">// returns true</span>
arr<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">10</span><span style="color: #339933;">;</span>
arr<span style="color: #339933;">;</span>                       <span style="color: #006600; font-style: italic;">// returns [10, 2] ... ouch!</span></pre></div></div>

<p>It turns out, that it seems to be an implementation bug in Safari (5.1). It&#8217;s working in the latest Firefox and Chrome releases.</p>
<p>To check whether freezing arrays works in your brower, click the following button:<br />
<button onClick="javascript:checkTheFreezer()">Check the Freezer!</button></p>
<p>ps. I asked the question first on Stack Overflow: <a href="http://stackoverflow.com/questions/7509894/freezing-arrays-in-javascript">&#8216;Freezing&#8217; Arrays in Javascript?</a>. Thanks for the constructive answers.</p>
<p><script type="text/javascript">
function checkTheFreezer() {
	var arr = ["icecream", "peas", "pizza"];
	var str = "Original Array: " + arr + "\n\n";
	Object.freeze(arr);
	str += "Array is frozen? " + Object.isFrozen(arr) + "\n";
	arr[0] = "hot cocoa";
	str += "Frozen Array: " + arr + "\n\n";
	if (arr[0]==="hot cocoa") {
		str += "Array freeze DOES NOT work.";
	} else {
		str += "Array freeze works.";
	}
	alert(str);
}
</script></p>
]]></content:encoded>
			<wfw:commentRss>http://www.trembl.org/codec/804/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Objects and Key Array Length in Javascript</title>
		<link>http://www.trembl.org/codec/802/</link>
		<comments>http://www.trembl.org/codec/802/#comments</comments>
		<pubDate>Fri, 19 Aug 2011 06:59:45 +0000</pubDate>
		<dc:creator>Georg Tremmel</dc:creator>
				<category><![CDATA[Raw]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[ECMAScript 5]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[object]]></category>
		<category><![CDATA[¥length]]></category>

		<guid isPermaLink="false">http://www.trembl.org/codec/?p=802</guid>
		<description><![CDATA[With arrays is trivial to get the length, with objects, the situations is slightly different. One approach would be to get all the keys and get the length of that array: Object.keys&#40;myObject&#41;.length; More details at Stackoverflow. This functionality is part of EMCAScript 5 specs.]]></description>
			<content:encoded><![CDATA[<p>With arrays is trivial to get the length, with objects, the situations is slightly different. One approach would be to get all the keys and get the length of that array:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Object.<span style="color: #660066;">keys</span><span style="color: #009900;">&#40;</span>myObject<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span></pre></div></div>

<p>More details at <a href="http://stackoverflow.com/questions/126100/how-to-efficiently-count-the-number-of-keys-properties-of-an-object-in-javascript">Stackoverflow</a>. This functionality is part of EMCAScript 5 specs.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.trembl.org/codec/802/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Filtering Arrays with ECMAScript 5 and filter()</title>
		<link>http://www.trembl.org/codec/785/</link>
		<comments>http://www.trembl.org/codec/785/#comments</comments>
		<pubDate>Tue, 28 Jun 2011 03:27:56 +0000</pubDate>
		<dc:creator>Georg Tremmel</dc:creator>
				<category><![CDATA[Raw]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[ECMAScript 5]]></category>
		<category><![CDATA[filter]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[loop]]></category>

		<guid isPermaLink="false">http://www.trembl.org/codec/?p=785</guid>
		<description><![CDATA[Suppose you have an array of object: var array = &#91; &#123;a:13, b:false &#125;, &#123;a:7, b:true &#125;, &#123;a:78, b:true &#125; &#93; The old, ECMAScript 3 way of checking for objects, in which b is true would be a simple for-loop: var results = &#91;&#93;; for &#40;var i=0; i&#60;array.length; i++&#41; &#123; if &#40;array&#91;i&#93;.b&#41; &#123; results.push&#40;array&#91;i&#93;&#41;; &#125; [...]]]></description>
			<content:encoded><![CDATA[<p>Suppose you have an array of object:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> array <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> 	<span style="color: #009900;">&#123;</span>a<span style="color: #339933;">:</span><span style="color: #CC0000;">13</span><span style="color: #339933;">,</span> b<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">false</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		<span style="color: #009900;">&#123;</span>a<span style="color: #339933;">:</span><span style="color: #CC0000;">7</span><span style="color: #339933;">,</span> b<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">true</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
		<span style="color: #009900;">&#123;</span>a<span style="color: #339933;">:</span><span style="color: #CC0000;">78</span><span style="color: #339933;">,</span> b<span style="color: #339933;">:</span><span style="color: #003366; font-weight: bold;">true</span> <span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#93;</span></pre></div></div>

<p>The old, ECMAScript 3 way of checking for objects, in which b is true would be a simple for-loop:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> results <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<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>array.<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>
	<span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>array<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">b</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		results.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>array<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Ok, that&#8217;s working, but not very elegant nor concise. Luckily, ECMAScript 5 offers a nicer way:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> results <span style="color: #339933;">=</span> array.<span style="color: #660066;">filter</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">item</span>.<span style="color: #660066;">b</span><span style="color: #339933;">;</span>		<span style="color: #006600; font-style: italic;">// if item.b is true</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.trembl.org/codec/785/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript, Array and For-Loops</title>
		<link>http://www.trembl.org/codec/749/</link>
		<comments>http://www.trembl.org/codec/749/#comments</comments>
		<pubDate>Fri, 13 May 2011 08:53:28 +0000</pubDate>
		<dc:creator>Georg Tremmel</dc:creator>
				<category><![CDATA[Raw]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[for]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[loop]]></category>

		<guid isPermaLink="false">http://www.trembl.org/codec/?p=749</guid>
		<description><![CDATA[Ok, looping over an array is something that we do all the time, for most of us it has become a second nature. var myArray = &#91;&#34;a&#34;, &#34;b&#34;, &#34;c&#34;, &#34;z&#34;&#93;; &#160; for &#40;int i=0; i&#60;myArray.length; i++&#41; &#123; console.log&#40;myArray&#91;i&#93;&#41;; &#125; But I recently came across a Javascript loop that puzzled me slightly. var myArray = &#91;&#34;a&#34;, [...]]]></description>
			<content:encoded><![CDATA[<p>Ok, looping over an array is something that we do all the time, for most of us it has become a second nature.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> myArray <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;b&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;c&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;z&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span>int i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>myArray.<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>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>myArray<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>But I recently came across a Javascript loop that puzzled me slightly.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> myArray <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;b&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;c&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;z&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
<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>f <span style="color: #339933;">;</span> f<span style="color: #339933;">=</span>myArray<span style="color: #009900;">&#91;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>f<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Let&#8217;s have a closer look what&#8217;s happening here. As a reminder, For-statements have the following structure:<br />
<em>for (initiation; condition; increment) { block } </em></p>
<p>In the initiation, variables are initiated; Condition tests this var, and if it returns true, continues another loop; and here&#8217;s something funny; the increment is left blank. Don&#8217;t panic, because we are already incrementing i at the condition test.</p>
<p>This is equivalent:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> myArray <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;b&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;c&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;z&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
<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>f <span style="color: #339933;">;</span> f<span style="color: #339933;">=</span>myArray<span style="color: #009900;">&#91;</span> i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>f<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>This, however, is not the same:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> myArray <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">&quot;a&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;b&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;c&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;z&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
<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>f <span style="color: #339933;">;</span> f<span style="color: #339933;">=</span>myArray<span style="color: #009900;">&#91;</span> <span style="color: #339933;">++</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>f<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>i gets incremented <em>before</em> it is used to traverse myArray, therefor resulting in this output:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">b
c
z</pre></div></div>

<p>In nice and simple arrays like in this example, it should not make any difference to test the array length at every time coming around, but a larger ones it might be beneficial.</p>
<p>As usual, take care that the array does not contain any falsy objects. And don&#8217;t loop an object that way.</p>
<p>Thanks to the Re-introduction to Javascript <a href="https://developer.mozilla.org/en/a_re-introduction_to_javascript">https://developer.mozilla.org/en/a_re-introduction_to_javascript</a>  for clarifying that issue for me.</p>
<div class="update">Update</div>
<p>Turns out things are not so clear after all. Let&#8217;s consider the following case: I have an array of numbers, I&#8217;d like to get the sum of all numbers in the array.<br />
One way to do it:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> myArray <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: #339933;">,</span><span style="color: #CC0000;">5</span><span style="color: #339933;">,</span><span style="color: #CC0000;">7</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<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> sum<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>this.<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>
	sum <span style="color: #339933;">+=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>sum<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>		<span style="color: #006600; font-style: italic;">// 18</span></pre></div></div>

<p>So, shouldn&#8217;t this work too&#8230;?</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> myArray <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: #339933;">,</span><span style="color: #CC0000;">5</span><span style="color: #339933;">,</span><span style="color: #CC0000;">7</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<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> sum<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> sum <span style="color: #339933;">=</span> myArray<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>sum<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>		<span style="color: #006600; font-style: italic;">// undefined</span></pre></div></div>

<p>Apparently not&#8230; I am trying to find out why not.</p>
<p>This, on the other hand works:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><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> sum<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> sum<span style="color: #339933;">+=</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.trembl.org/codec/749/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Remove empty array fields in PHP</title>
		<link>http://www.trembl.org/codec/682/</link>
		<comments>http://www.trembl.org/codec/682/#comments</comments>
		<pubDate>Sun, 02 Jan 2011 19:49:24 +0000</pubDate>
		<dc:creator>Georg Tremmel</dc:creator>
				<category><![CDATA[Raw]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[empty]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[remove]]></category>

		<guid isPermaLink="false">http://www.trembl.org/codec/?p=682</guid>
		<description><![CDATA[array_filter&#40;$my_array&#41; array_filter WITHOUT a callback function removes &#8216;false&#8217;, &#8216;null&#8217; and &#8221; fields from an array.]]></description>
			<content:encoded><![CDATA[
<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #990000;">array_filter</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$my_array</span><span style="color: #009900;">&#41;</span></pre></div></div>

<p>array_filter <strong>WITHOUT</strong> a callback function removes &#8216;false&#8217;, &#8216;null&#8217; and &#8221; fields from an array.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.trembl.org/codec/682/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Find Largest Number in Javascript</title>
		<link>http://www.trembl.org/codec/654/</link>
		<comments>http://www.trembl.org/codec/654/#comments</comments>
		<pubDate>Thu, 11 Nov 2010 09:38:08 +0000</pubDate>
		<dc:creator>Georg Tremmel</dc:creator>
				<category><![CDATA[Raw]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[function]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[largest]]></category>
		<category><![CDATA[number]]></category>

		<guid isPermaLink="false">http://www.trembl.org/codec/?p=654</guid>
		<description><![CDATA[Nice way and fast way of finding the largest number in an array. var arr = &#91;1233, 32, 442&#93;; var largest = Math.max.apply&#40;Math, arr&#41;; http://ejohn.org/blog/fast-javascript-maxmin/ http://stackoverflow.com/questions/1379553/how-might-i-find-the-largest-number-contained-in-a-javascript-array]]></description>
			<content:encoded><![CDATA[<p>Nice way and fast way of finding the largest number in an array.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><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;">1233</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">32</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">442</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> largest <span style="color: #339933;">=</span> Math.<span style="color: #660066;">max</span>.<span style="color: #660066;">apply</span><span style="color: #009900;">&#40;</span>Math<span style="color: #339933;">,</span> arr<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p><a href="http://ejohn.org/blog/fast-javascript-maxmin/">http://ejohn.org/blog/fast-javascript-maxmin/</a></p>
<p><a href="http://stackoverflow.com/questions/1379553/how-might-i-find-the-largest-number-contained-in-a-javascript-array">http://stackoverflow.com/questions/1379553/how-might-i-find-the-largest-number-contained-in-a-javascript-array</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.trembl.org/codec/654/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Like explode(), only componentsSeparatedByString:</title>
		<link>http://www.trembl.org/codec/265/</link>
		<comments>http://www.trembl.org/codec/265/#comments</comments>
		<pubDate>Fri, 20 Nov 2009 10:53:17 +0000</pubDate>
		<dc:creator>Georg Tremmel</dc:creator>
				<category><![CDATA[Raw]]></category>
		<category><![CDATA[array]]></category>
		<category><![CDATA[componentsSeparatedByString]]></category>
		<category><![CDATA[explode]]></category>
		<category><![CDATA[Objective-C]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.trembl.org/codec/?p=265</guid>
		<description><![CDATA[PHP explode(&#8220;, &#8221; , &#8220;One, Two, Three&#8221;); Objective-C NSArray *listItems = [@"One, Two, Three" componentsSeparatedByString:@", "];]]></description>
			<content:encoded><![CDATA[<p><strong>PHP</strong><br />
explode(&#8220;, &#8221; , &#8220;One, Two, Three&#8221;);</p>
<p><strong>Objective-C</strong><br />
NSArray *listItems = [@"One, Two, Three" componentsSeparatedByString:@", "];</p>
]]></content:encoded>
			<wfw:commentRss>http://www.trembl.org/codec/265/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

