<?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>Cameron McKay &#187; arrays</title>
	<atom:link href="http://cdmckay.org/blog/tag/arrays/feed/" rel="self" type="application/rss+xml" />
	<link>http://cdmckay.org/blog</link>
	<description>Programming and Game Development</description>
	<lastBuildDate>Mon, 14 May 2012 21:11:58 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Fep Collections</title>
		<link>http://cdmckay.org/blog/2009/07/29/fep-collections/</link>
		<comments>http://cdmckay.org/blog/2009/07/29/fep-collections/#comments</comments>
		<pubDate>Wed, 29 Jul 2009 20:47:57 +0000</pubDate>
		<dc:creator>cdmckay</dc:creator>
				<category><![CDATA[Fep]]></category>
		<category><![CDATA[Programming Languages]]></category>
		<category><![CDATA[.net]]></category>
		<category><![CDATA[arrays]]></category>
		<category><![CDATA[collections]]></category>
		<category><![CDATA[dictionaries]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[lists]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://couchware.ca/blogs/cam/?p=863</guid>
		<description><![CDATA[As I was working on the PHP classes that Fep was to map to, I realized that it was rather silly for me to re-invent an API for lists since there were already many well-designed ones in existence. In particular, I&#8217;ve found that the .NET 3.5 collections API to be particularly nice to use. Moreover, [...]]]></description>
			<content:encoded><![CDATA[<p>As I was working on the PHP classes that Fep was to map to, I realized that it was rather silly for me to re-invent an API for lists since there were already many well-designed ones in existence.  In particular, I&#8217;ve found that the .NET 3.5 collections API to be particularly nice to use.  Moreover, since everyone and their dog and using .NET now, it would also be familiar to most programmers.  Thus, I&#8217;ve decided to use a subset of the .NET collections API for Fep collections.</p>
<p><span id="more-863"></span></p>
<p>Furthermore, after some thought, I&#8217;ve decided to split up Fep arrays.  In PHP arrays aren&#8217;t really arrays in the traditional sense, but more like array/associate array hybrids (JavaScript uses a similar concept).  This can be confusing, error-prone and I don&#8217;t think that the benefits of having an hybrid array system outweighs the complexity.</p>
<p>Thus, in Fep, there will be two main collection types: lists and dictionaries.  Here&#8217;s how a Fep list will look like:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// Fep</span>
fep <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> <span style="color: #0000ff;">&quot;foo&quot;</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;bar&quot;</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
fep<span style="color: #339933;">.</span><span style="color: #990000;">count</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// == 4</span>
fep<span style="color: #339933;">.</span>add<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">&quot;baz&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
fep<span style="color: #339933;">.</span>find<span style="color: #009900;">&#40;</span> x <span style="color: #339933;">=&gt;</span> x <span style="color: #339933;">&gt;</span> <span style="color: #cc66cc;">1</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// == 2</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Will compile into this PHP</span>
<span style="color: #000088;">$fep</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> FepList<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;foo&quot;</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;bar&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$fep</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">count</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$fep</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">add</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">&quot;baz&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$fep</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">find</span><span style="color: #009900;">&#40;</span> <span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> <span style="color: #000088;">$x</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">return</span> x <span style="color: #339933;">&gt;</span> <span style="color: #cc66cc;">1</span> <span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>And here&#8217;s how a Fep dictionary will look:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// Fep</span>
fep <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span> blah<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;blah&quot;</span><span style="color: #339933;">,</span> foo<span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;bar&quot;</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">:</span> <span style="color: #0000ff;">&quot;zero&quot;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
fep<span style="color: #339933;">.</span>keys<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// == [ &quot;blah&quot;, &quot;foo&quot;, 0 ]</span>
fep<span style="color: #339933;">.</span>containsKey<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">&quot;foo&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// == true</span>
fep<span style="color: #339933;">.</span>remove<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">&quot;foo&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// == true</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// PHP</span>
<span style="color: #000088;">$fep</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> FepDict<span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;blah&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;blah&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;foo&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;bar&quot;</span><span style="color: #339933;">,</span> 
         <span style="color: #cc66cc;">0</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;zero&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$fep</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">keys</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$fep</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">containsKey</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">&quot;foo&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$fep</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">remove</span><span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">&quot;foo&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://cdmckay.org/blog/2009/07/29/fep-collections/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fep Arrays</title>
		<link>http://cdmckay.org/blog/2009/07/24/fep-arrays/</link>
		<comments>http://cdmckay.org/blog/2009/07/24/fep-arrays/#comments</comments>
		<pubDate>Sat, 25 Jul 2009 01:39:55 +0000</pubDate>
		<dc:creator>cdmckay</dc:creator>
				<category><![CDATA[Fep]]></category>
		<category><![CDATA[Programming Languages]]></category>
		<category><![CDATA[arrays]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://couchware.ca/blogs/cam/?p=827</guid>
		<description><![CDATA[Disclaimer: This is not the way Fep arrays will work. Refer to the new article on Fep collections for more information. In this article, I&#8217;ll write a bit about how I think Fep arrays will look. Keep in mind this a work in progress and is by no means comprehensive. Without further ado&#8230; In PHP, [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Disclaimer:</strong> <em>This is not the way Fep arrays will work.  <a href="/blogs/cam/2009/07/29/fep-collections/">Refer to the new article on Fep collections for more information</a>.</em></p>
<p>In this article, I&#8217;ll write a bit about how I think Fep arrays will look.  Keep in mind this a work in progress and is by no means comprehensive.  Without further ado&#8230;</p>
<p>In PHP, you define an array using the <code>array()</code> construct.  Fep will follow the lead of languages like JavaScript, Python, Ruby and Groovy and use the square bracket </code>[]</code> notation.</p>
<h3>Initialization</h3>
<p>For example, a simple array in PHP is creating like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000088;">$arr</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">3</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>In Fep, this would be done like this:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">arr <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span></pre></div></div>

<p><span id="more-827"></span></p>
<p>There are actually three things to notice here.  First, Fep uses square brackets.  Second, Fep has optional semicolons (similar to JavaScript and Scala).  Third, Fep doesn't prefix all variables with <code>$</code>.  This should give your pinky finger a bit of rest and de-noise-ify your Fep code.</p>
<p>How about associative arrays?  In this case, I don't want to deviate too much from PHP, so I'm going to go with the same syntax:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// PHP</span>
<span style="color: #000088;">$fruits</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
  <span style="color: #0000ff;">&quot;fruits&quot;</span>  <span style="color: #339933;">=&gt;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;a&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;orange&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;b&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;banana&quot;</span><span style="color: #339933;">,</span> 
                     <span style="color: #0000ff;">&quot;c&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;apple&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
  <span style="color: #0000ff;">&quot;numbers&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">3</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">4</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">5</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">6</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
  <span style="color: #0000ff;">&quot;holes&quot;</span>   <span style="color: #339933;">=&gt;</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;first&quot;</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">5</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;second&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;third&quot;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Fep</span>
fruits <span style="color: #339933;">=</span> 
<span style="color: #009900;">&#91;</span>
  <span style="color: #0000ff;">&quot;fruits&quot;</span>  <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#91;</span><span style="color: #0000ff;">&quot;a&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;orange&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;b&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;banana&quot;</span><span style="color: #339933;">,</span> 
                <span style="color: #0000ff;">&quot;c&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;apple&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
  <span style="color: #0000ff;">&quot;numbers&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">3</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">4</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">5</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">6</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
  <span style="color: #0000ff;">&quot;holes&quot;</span>   <span style="color: #339933;">=&gt;</span> <span style="color: #009900;">&#91;</span><span style="color: #0000ff;">&quot;first&quot;</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">5</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;second&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;third&quot;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#93;</span></pre></div></div>

<h3>Decomposition</h3>
<p>What about that convenient <code>list</code> construct?  In Fep, we'll try again to reduce the typing and improve readability by introducing this syntax:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// PHP</span>
<span style="color: #990000;">list</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$a</span><span style="color: #339933;">,</span> <span style="color: #000088;">$b</span><span style="color: #339933;">,</span> <span style="color: #000088;">$c</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;a&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;b&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;c&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Fep</span>
a<span style="color: #339933;">,</span> b<span style="color: #339933;">,</span> c <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #0000ff;">&quot;a&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;b&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;c&quot;</span><span style="color: #009900;">&#93;</span></pre></div></div>

<h3>Accessors</h3>
<p>To fetch a value from a Fep array, the regular PHP-style accessors will be used, with the main difference being that Fep will support negative indexing.  That is, <code>$array[-1]&nbsp;==&nbsp;$array[$array.length&nbsp;-&nbsp;1]</code>.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">arr <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span>
println <span style="color: #000088;">$arr</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span>    <span style="color: #666666; font-style: italic;">// 1</span>
println <span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">4</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">5</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">6</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #666666; font-style: italic;">// 5</span>
println <span style="color: #000088;">$arr</span><span style="color: #009900;">&#91;</span><span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span>   <span style="color: #666666; font-style: italic;">// 3</span>
&nbsp;
mixed <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #0000ff;">&quot;a&quot;</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">&quot;b&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;foo&quot;</span><span style="color: #009900;">&#93;</span>
println arr<span style="color: #009900;">&#91;</span><span style="color: #0000ff;">&quot;a&quot;</span><span style="color: #009900;">&#93;</span> <span style="color: #666666; font-style: italic;">// b</span>
println arr<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span>   <span style="color: #666666; font-style: italic;">// foo</span></pre></div></div>

<h3>API</h3>
<p>All arrays in Fep will be <code>Array</code> objects.  As such, they'll have access to all the PHP array functions in an object-oriented way.  Here's a few examples:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// PHP</span>
<span style="color: #000088;">$arr</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;x&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$len</span> <span style="color: #339933;">=</span> <span style="color: #990000;">count</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$arr</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">array_push</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$arr</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;y&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;z&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #990000;">in_array</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #000088;">$arr</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$merged</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array_merge</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$arr</span><span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;a&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;b&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;c&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// Fep</span>
arr <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;x&quot;</span><span style="color: #009900;">&#93;</span>
len <span style="color: #339933;">=</span> arr<span style="color: #339933;">.</span>length
arr<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;y&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;z&quot;</span><span style="color: #009900;">&#41;</span>
arr<span style="color: #339933;">.</span>contains<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span>
merged <span style="color: #339933;">=</span> arr <span style="color: #339933;">+</span> <span style="color: #009900;">&#91;</span><span style="color: #0000ff;">&quot;a&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;b&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;c&quot;</span><span style="color: #009900;">&#93;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://cdmckay.org/blog/2009/07/24/fep-arrays/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>New Arrayzing Command: merge()</title>
		<link>http://cdmckay.org/blog/2009/02/26/new-arrayzing-command-merge/</link>
		<comments>http://cdmckay.org/blog/2009/02/26/new-arrayzing-command-merge/#comments</comments>
		<pubDate>Fri, 27 Feb 2009 01:53:12 +0000</pubDate>
		<dc:creator>cdmckay</dc:creator>
				<category><![CDATA[Arrayzing]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[arrays]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[merge$]]></category>
		<category><![CDATA[mutators]]></category>

		<guid isPermaLink="false">http://couchware.ca/blogs/cam/?p=242</guid>
		<description><![CDATA[Some nights, as I lay awake in bed, trying to sleep, I think about Arrayzing workflows.  Lately, I&#8217;ve been thinking of the different ways users might use Arrayzing. In particular, I&#8217;ve been thinking of how a user could edit a subset of elements in a zing without disturbing other elements. The result of this thoughtstream [...]]]></description>
			<content:encoded><![CDATA[<p>Some nights, as I lay awake in bed, trying to sleep, I think about Arrayzing workflows.  Lately, I&#8217;ve been thinking of the different ways users might use Arrayzing.  In particular, I&#8217;ve been thinking of how a user could edit a subset of elements in a zing without disturbing other elements. The result of this thoughtstream is a new Arrayzing command: <code>merge()</code>.</p>
<p><span id="more-242"></span></p>
<p>In short, the <code>merge()</code> command allows you to merge your current zing with the previous zing in your stack.  What&#8217;s the stack, you ask?</p>
<p>Recall that, by default, Arrayzing a functional API, meaning that (unless you&#8217;re using a mutator command) your zing is never modified.  Instead a new one is returned.  So, if we do this&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">_<span style="color: #009900;">&#40;</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;">9</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">144</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">gteq</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">sqrt</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>&#8230;we have in fact created 3 zings, not one.  Although it seems wasteful to keep making new zings, it turns out to be pretty useful.  For one, it allows us to step backwards using the <code>undo()</code> command:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">_<span style="color: #009900;">&#40;</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;">9</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">144</span><span style="color: #009900;">&#41;</span>  <span style="color: #006600; font-style: italic;">// [1, 4, 9, 144]</span>
  .<span style="color: #660066;">gteq</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span>        <span style="color: #006600; font-style: italic;">// [4, 9, 144]</span>
  .<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">sqrt</span><span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">// [2, 3, 12]</span>
  .<span style="color: #660066;">undo</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>         <span style="color: #006600; font-style: italic;">// [4, 9, 144]</span>
  .<span style="color: #660066;">undo</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>         <span style="color: #006600; font-style: italic;">// [1, 4, 9, 144]</span>
  .<span style="color: #660066;">undo</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>        <span style="color: #006600; font-style: italic;">// []</span></pre></div></div>

<p><em>(Aside: For those familiar with jQuery, the <code>undo()</code> command is the same as the end() command from that library).</em></p>
<p>Keeping a history (or stack) also allows us to combine the past with the present using the <code>andSelf()</code> command:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> double <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>x<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #000066; font-weight: bold;">return</span> x <span style="color: #339933;">*</span> <span style="color: #CC0000;">2</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</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: #339933;">,</span> <span style="color: #CC0000;">3</span><span style="color: #009900;">&#41;</span>    <span style="color: #006600; font-style: italic;">// [1, 2, 3]</span>
  .<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span>double<span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">// [2, 4, 6]</span>
  .<span style="color: #660066;">andSelf</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  <span style="color: #006600; font-style: italic;">// [2, 4, 6, 1, 2, 3]</span></pre></div></div>

<p>But what else?  Well, consider this situation:  What if we wanted to modify only a subset of a zing?  For example, imagine we a list of monetary values and we wanted to make sure they all had the &#8220;$&#8221; character in front of them.  Let&#8217;s try and do that without using <code>merge()</code>:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> fn <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<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><span style="color: #339933;">!</span>e.<span style="color: #660066;">startsWith</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;$&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">&quot;$&quot;</span> <span style="color: #339933;">+</span> e<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
_<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;$1.00&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;$1.99&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;100.00&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;$5&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">map</span><span style="color: #009900;">&#40;</span>fn<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>That solution is OK.  It&#8217;s pretty simple but it still requires a lot of typing and it&#8217;s not really using Arrayzing for much (just the <code>map()</code> command).  Let&#8217;s see if we can reduce the number of keystrokes and make better use of Arrayzing&#8217;s capabilities by using the new <code>merge()</code> command:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">_<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;$1.00&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;$1.99&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;100.00&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;$5&quot;</span><span style="color: #009900;">&#41;</span>
  .<span style="color: #660066;">not</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^\$/</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">prepend</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;$&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">merge</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>So what just happened there?  What does it all mean?  Let&#8217;s look at that again, and track the contents of the zing:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">_<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;$1.00&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;$1.99&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;100.00&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;$5&quot;</span><span style="color: #009900;">&#41;</span>
  .<span style="color: #660066;">not</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^\$/</span><span style="color: #009900;">&#41;</span>    <span style="color: #006600; font-style: italic;">// [ &quot;100.00&quot; ]</span>
  .<span style="color: #660066;">prepend</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;$&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">// [ &quot;$100.00&quot; ]</span>
  .<span style="color: #660066;">merge</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
  <span style="color: #006600; font-style: italic;">// [ &quot;$1.00&quot;, &quot;$1.99&quot;, &quot;$100.00&quot;, &quot;$5&quot; ]</span></pre></td></tr></table></div>

<p>In line 1, we create the Arrayzing (nothing special here).  In the following line, we filter out all strings that don&#8217;t begin with &#8220;$&#8221; using a regular expression.  Things get a little more interesting on line 3, where we use the mutator version of <code>prepend()</code> to modify the filtered array in-place.  Finally, on line 4, we use the <code>merge()</code> command which, basically puts the originally filtered monetary value back into the preceding zing.</p>
<p>So why did we use the <code>prepend$()</code> instead of <code>prepend()</code>?  The reason for that is because using <code>prepend()</code> would have created another level of history.  For example, here is what would happen if we had used <code>prepend()</code> instead of <code>prepend$()</code>:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">_<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;$1.00&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;$1.99&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;100.00&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;$5&quot;</span><span style="color: #009900;">&#41;</span>
  .<span style="color: #660066;">not</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^\$/</span><span style="color: #009900;">&#41;</span>   <span style="color: #006600; font-style: italic;">// [ &quot;100.00&quot; ]</span>
  .<span style="color: #660066;">prepend</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;$&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">// [ &quot;$100.00&quot; ]</span>
  .<span style="color: #660066;">merge</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>     <span style="color: #006600; font-style: italic;">// [ &quot;$100.00&quot; ]</span></pre></td></tr></table></div>

<p>Why did that happen?  The answer to that question lies in how <code>merge()</code> merges.  Let&#8217;s start by looking at line 2 of the last code snippet.  In that line, we filtered out all strings that did not start with a &#8220;$&#8221; character.  When Arrayzing returns a new zing that contains only the elements that start with a &#8220;$&#8221;, it also remembers where the new elements came from.  So in the case of the <code>not()</code> function on line 2, Arrayzing remembers that &#8220;100.00&#8243; came from index 2 of the zing in line 1 (that is, the zing _(&#8220;$1.00&#8243;, &#8220;$1.99&#8243;, &#8220;100.00&#8243;, &#8220;$5&#8243;)).  The <code>merge()</code> command only operates on the current zing and the one immediately previous to it on the stack.</p>
<p>With that in mind, let&#8217;s look at line 3.  On line 3, we run the <code>prepend()</code> command, which creates and returns a new zing that contains the value &#8220;$100.00&#8243;.  What&#8217;s more, it also remembers that the value &#8220;$100.00&#8243; was derived from &#8220;100.00&#8243; (index 0) in the zing immediately previous to it in the stack (that is, the zing _(&#8220;100.00&#8243;)).  Thus, when merged, it simply overwrites the value it derived from, which is the 0th index of the zing [ "100.00" ]&#8230; which results in the zing [&nbsp;"$100.00"&nbsp;].  You follow all that?</p>
<p>This concept is easier to understand by annotating the previous code snippet:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> zing1 <span style="color: #339933;">=</span> _<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;$1.00&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;$1.99&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;100.00&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;$5&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// [ &quot;$1.00&quot;, &quot;$1.99&quot;, &quot;100.00&quot;, &quot;$5&quot; ] index 0-3 come from nothing</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> zing2 <span style="color: #339933;">=</span> zing1.<span style="color: #660066;">not</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^\$/</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// [ &quot;100.00&quot; ] index 0 comes from index 2 in zing1</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> zing3 <span style="color: #339933;">=</span> zing2.<span style="color: #660066;">prepend</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;$&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// [ &quot;$100.00&quot; ] index 0 comes from index 0 in zing2</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> zing4 <span style="color: #339933;">=</span> zing3.<span style="color: #660066;">merge</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// [ &quot;$100.00&quot; ] copy index 0 from zing3 over index 0 in zing2</span></pre></div></div>

<p>Now, with that more or less explained, let&#8217;s go on to one final item:  What happens when we try to merge a zing that we&#8217;ve added to or removed from.  For example, if we added elements like this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">_<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;str&quot;</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;">4</span><span style="color: #339933;">,</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: #009900;">&#41;</span>.<span style="color: #660066;">numbers</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">add</span>$<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">7</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">merge</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>What would be in the zing returned by this sequence of functions?  In this case, when <code>merge()</code> is called, Arrayzing would not know where to merge the 7 element (since it only remembers the original indices of elements that directly derived from the previous zing).  Arrayzing deals with this scenario by simply adding all elements that it does not have an index for to the end of the previous zing in the stack.  Here&#8217;s what that same snippet would look like if we documented each step:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">_<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;str&quot;</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;">4</span><span style="color: #339933;">,</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: #009900;">&#41;</span>
  .<span style="color: #660066;">numbers</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">// [ 2, 3, 4 ]</span>
  .<span style="color: #660066;">add</span>$<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">7</span><span style="color: #009900;">&#41;</span>   <span style="color: #006600; font-style: italic;">// [ 2, 3, 4, 7 ]</span>
  .<span style="color: #660066;">merge</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  <span style="color: #006600; font-style: italic;">// [ &quot;str&quot;, 2, 3, 4, &quot;a&quot;, &quot;b&quot;, 7 ]</span></pre></div></div>

<p>How about if we removed elements?  If we were to remove elements, they would simply not be merged back into the previous zing on the stack.  For example:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">_<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;str&quot;</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;">4</span><span style="color: #339933;">,</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: #009900;">&#41;</span>
  .<span style="color: #660066;">numbers</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>    <span style="color: #006600; font-style: italic;">// [ 2, 3, 4 ]</span>
  .<span style="color: #660066;">set</span>$<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span>   <span style="color: #006600; font-style: italic;">// [ 4, 3, 4 ]</span>
  .<span style="color: #660066;">set</span>$<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">7</span><span style="color: #009900;">&#41;</span>   <span style="color: #006600; font-style: italic;">// [ 4, 3, 7 ]</span>
  .<span style="color: #660066;">removeAt</span>$<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #006600; font-style: italic;">// [ 3, 7 ]</span>
  .<span style="color: #660066;">merge</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>     <span style="color: #006600; font-style: italic;">// [ &quot;str&quot;, 2, 3, 7, &quot;a&quot;, &quot;b&quot; ]</span></pre></div></div>

<p>As you can see, the <code>merge()</code> command is a powerful addition to Arrayzing.  It allows us to select a subset of the elements, transform them, and then re-add them to our original zing.</p>
]]></content:encoded>
			<wfw:commentRss>http://cdmckay.org/blog/2009/02/26/new-arrayzing-command-merge/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Arrayzing vs. Array: get() and set()</title>
		<link>http://cdmckay.org/blog/2009/02/15/arrayzing-vs-array-get-and-set/</link>
		<comments>http://cdmckay.org/blog/2009/02/15/arrayzing-vs-array-get-and-set/#comments</comments>
		<pubDate>Sun, 15 Feb 2009 22:49:11 +0000</pubDate>
		<dc:creator>cdmckay</dc:creator>
				<category><![CDATA[Arrayzing]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[accessors]]></category>
		<category><![CDATA[arrays]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[mutators]]></category>

		<guid isPermaLink="false">http://couchware.ca/blogs/cam/?p=222</guid>
		<description><![CDATA[What does Arrayzing provide that a normal Array doesn&#8217;t? I hope to answer that question in my series of posts Arrayzing vs. Array. In today&#8217;s installment, we&#8217;ll take a look at what the get() and set() functions offer over an Array&#8217;s traditional [] accessor. When using plain old JavaScript Array objects, a common operation is [...]]]></description>
			<content:encoded><![CDATA[<p>What does Arrayzing provide that a normal Array doesn&#8217;t?  I hope to answer that question in my series of posts <em>Arrayzing vs. Array</em>.  In today&#8217;s installment, we&#8217;ll take a look at what the get() and set() functions offer over an Array&#8217;s traditional [] accessor.</p>
<p><span id="more-222"></span></p>
<p>When using plain old JavaScript Array objects, a common operation is to access or modify elements.  For example:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> a <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>
<span style="color: #003366; font-weight: bold;">var</span> sum <span style="color: #339933;">=</span> a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> a<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// = 6</span>
a<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;">6</span><span style="color: #339933;">;</span>
a.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// &quot;6,2,3&quot;</span></pre></div></div>

<p>Arrayzing also supports the built-in [] accessor.  However, it should be noted there are limitations to accessing an Array in this manner, most notable amongst them being that we must always index from the left.  For example, imagine we wanted to access the last element.  Using a normal Array, we would have to do this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> a <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>
a<span style="color: #009900;">&#91;</span>a.<span style="color: #660066;">length</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">4</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// a = [1, 2, 4];</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span>a.<span style="color: #660066;">length</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// shows 4</span></pre></div></div>

<p>Although this works, it&#8217;s not the most convenient or elegant way to do it.  To address this problem, Arrayzing provides two new functions <strong>get()</strong> and <strong>set()</strong>.  These functions act essentially the same as the built-in [] accessors with an added benefit: we can index from the left <em>and</em> the right.  For example, to implement the above example using Arrayzing, we could instead do this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</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: #339933;">,</span> <span style="color: #CC0000;">3</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
a.<span style="color: #660066;">set</span>$<span style="color: #009900;">&#40;</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// a = [1, 2, 4];</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>a.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">-</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// shows 4</span></pre></div></div>

<p><em>(Aside: If you&#8217;re not familiar with the $ after set$(), check out this <a href="http://cdmckay.org/blog/2009/02/15/arrayzing-design-choices/">article</a>.  It means that the function is a mutator).</em></p>
<p>What&#8217;s more, all Arrayzing commands that take an index as an argument allow right-indexing.  What convenience!</p>
<p>There is one further advantage of using set(): we can change an element in your zing (a zing is an Arrayzing array) without modifying the original array.  For example, if we wanted to replace an element in our zing but didn&#8217;t want to modify the original array, we would do this:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</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: #339933;">,</span> <span style="color: #CC0000;">3</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> b <span style="color: #339933;">=</span> a.<span style="color: #660066;">set</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// not set$()</span>
a.<span style="color: #660066;">str</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// returns &quot;1,2,3&quot;</span>
b.<span style="color: #660066;">str</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// returns &quot;10,2,3&quot;</span></pre></div></div>

<p>As you can see, Arrayzing provides a strict superset of the capabilities of a normal Array&#8217;s accessors, allowing you to write cleaner, easier code.</p>
]]></content:encoded>
			<wfw:commentRss>http://cdmckay.org/blog/2009/02/15/arrayzing-vs-array-get-and-set/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

