<?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; merge$</title>
	<atom:link href="http://cdmckay.org/blog/tag/merge/feed/" rel="self" type="application/rss+xml" />
	<link>http://cdmckay.org/blog</link>
	<description>Programming and Game Development</description>
	<lastBuildDate>Tue, 11 Oct 2011 05:05:09 +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>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>
	</channel>
</rss>

