atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[amber tunnell]]></title>
  <link href="http://ambertunnell.github.io/atom.xml" rel="self"/>
  <link href="http://ambertunnell.github.io/"/>
  <updated>2014-10-07T18:55:27-04:00</updated>
  <id>http://ambertunnell.github.io/</id>
  <author>
    <name><![CDATA[Amber Tunnell]]></name>
    <email><![CDATA[amber.tunnell@gmail.com]]></email>
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Sorting Algorithms Series: Merge Sort]]></title>
    <link href="http://ambertunnell.github.io/blog/2014/10/07/merge-sort/"/>
    <updated>2014-10-07T14:54:35-04:00</updated>
    <id>http://ambertunnell.github.io/blog/2014/10/07/merge-sort</id>
    <content type="html"><![CDATA[<p><strong>Merge Sort</strong> is a divide and conquer sorting algorithm. It is much more efficent than either <a href="http://ambertunnell.github.io/blog/2014/08/20/bubble-sort/">Bubble Sort</a> or <a href="http://localhost:4000/blog/2014/08/23/insertion-sort/">Insertion Sort</a> with an average and worst case time complexity of  O(n log n).</p>

<p>In Merge Sort, you divide a list of items to be in the smallest units possible. You sort the smaller units, then repeatedly merge the small units back together until you have a sorted list.</p>

<ol>
  <li>Take an array of items. Split the array into single subunits.</li>
  <li>Since an item with only one input is considered sorted, merge the subunits together so that you now have subunits with 2 items each.</li>
  <li>Sort each of these 2-item subunits so that they are all ordered correctly.</li>
  <li>Continue merging the subunits together and sorting them individually until you have a completely merged and sorted list.</li>
</ol>




<!-- more -->


<p style="text-align:center;"> <img src="http://upload.wikimedia.org/wikipedia/commons/c/cc/Merge-sort-example-300px.gif" title="Merge Sort" alt="merge sort video" /></p>

<p>As discussed, Merge Sort has a very good time complexity. However, it does not have a good space complexity. Because it doesn&rsquo;t sort in place (like Bubble Sort), you need twice the space of the normal list in order to implement the sort. Despite this drawback, it is still worthwhile because of its efficiency. For example, Merge Sort&rsquo;s worst case time complexity O(n log n) is the same as Quicksort&rsquo;s <em>best case</em> time complexity.</p>

<figure class='code'><figcaption><span>Merge Sort in Ruby</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">MergeSort</span>
</span><span class='line'>    <span class="k">def</span> <span class="nf">sort</span><span class="p">(</span><span class="n">array</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'>        <span class="k">if</span> <span class="n">array</span><span class="o">.</span><span class="n">length</span> <span class="o">&lt;=</span> <span class="mi">1</span>
</span><span class='line'>          <span class="k">return</span> <span class="n">array</span>
</span><span class='line'>        <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>        <span class="n">middle</span> <span class="o">=</span> <span class="p">(</span><span class="n">array</span><span class="o">.</span><span class="n">length</span> <span class="o">/</span> <span class="mi">2</span><span class="o">.</span><span class="mi">0</span><span class="p">)</span><span class="o">.</span><span class="n">round</span>
</span><span class='line'>        <span class="n">length</span> <span class="o">=</span> <span class="n">array</span><span class="o">.</span><span class="n">length</span>
</span><span class='line'>
</span><span class='line'>        <span class="n">first_array</span> <span class="o">=</span> <span class="n">array</span><span class="o">[</span><span class="mi">0</span><span class="o">.</span><span class="n">.</span><span class="o">.</span><span class="n">middle</span><span class="o">]</span>
</span><span class='line'>        <span class="n">second_array</span> <span class="o">=</span> <span class="n">array</span><span class="o">[</span><span class="n">middle</span><span class="o">.</span><span class="n">.</span><span class="o">.</span><span class="n">length</span><span class="o">]</span>
</span><span class='line'>
</span><span class='line'>        <span class="n">first_sorted_array</span> <span class="o">=</span> <span class="n">sort</span><span class="p">(</span><span class="n">first_array</span><span class="p">)</span>
</span><span class='line'>        <span class="n">second_sorted_array</span> <span class="o">=</span> <span class="n">sort</span><span class="p">(</span><span class="n">second_array</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'>        <span class="k">return</span> <span class="n">merge</span><span class="p">(</span><span class="n">first_sorted_array</span><span class="p">,</span> <span class="n">second_sorted_array</span><span class="p">)</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>    <span class="k">def</span> <span class="nf">merge</span><span class="p">(</span><span class="n">first_array</span><span class="p">,</span> <span class="n">second_array</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'>        <span class="k">return</span> <span class="n">second_array</span> <span class="k">if</span> <span class="n">first_array</span><span class="o">.</span><span class="n">empty?</span>
</span><span class='line'>        <span class="k">return</span> <span class="n">first_array</span> <span class="k">if</span> <span class="n">second_array</span><span class="o">.</span><span class="n">empty?</span>
</span><span class='line'>
</span><span class='line'>        <span class="k">if</span> <span class="n">first_array</span><span class="o">.</span><span class="n">first</span> <span class="o">&lt;=</span> <span class="n">second_array</span><span class="o">.</span><span class="n">first</span>
</span><span class='line'>            <span class="n">unit</span> <span class="o">=</span> <span class="n">first_array</span><span class="o">.</span><span class="n">shift</span>
</span><span class='line'>        <span class="k">else</span>
</span><span class='line'>            <span class="n">unit</span> <span class="o">=</span> <span class="n">second_array</span><span class="o">.</span><span class="n">shift</span>
</span><span class='line'>        <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>        <span class="k">return</span> <span class="o">[</span><span class="n">unit</span><span class="o">]</span> <span class="o">+</span> <span class="n">merge</span><span class="p">(</span><span class="n">first_array</span><span class="p">,</span> <span class="n">second_array</span><span class="p">)</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'><span class="nb">print</span> <span class="no">MergeSort</span><span class="o">.</span><span class="n">new</span><span class="o">.</span><span class="n">sort</span><span class="p">(</span><span class="o">[</span><span class="mi">4</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">6</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">5</span><span class="p">,</span><span class="mi">2</span><span class="o">]</span><span class="p">)</span> <span class="c1">#=&gt; [1, 2, 3, 4, 5, 6]</span>
</span></code></pre></td></tr></table></div></figure>


<p><em>This is the third post in a series of posts on various sorting algorithms in computer science. See the entire series <a href="http://ambertunnell.github.io/blog/categories/sorting-algorithms/">here</a>.</em></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[All of the JavaScript: Basic terms and concepts for beginners]]></title>
    <link href="http://ambertunnell.github.io/blog/2014/10/06/all-of-the-javascript-basic-terms-and-concepts-for-beginners/"/>
    <updated>2014-10-06T18:27:45-04:00</updated>
    <id>http://ambertunnell.github.io/blog/2014/10/06/all-of-the-javascript-basic-terms-and-concepts-for-beginners</id>
    <content type="html"><![CDATA[<p>When I first started learning JavaScript, I was thrown off by some of its terminology and quirks. This post is intended to offer some guidance into the craziness of the JavaScript world for beginning JavaScripters.</p>

<p>JavaScript is a dynamically-typed, object-oriented programming language that is usually used on the client side in web browsers.</p>

<p>Functions are central to one&rsquo;s undertanding of JavaScript, so let&rsquo;s start with the difference between function declarations and function expressions.</p>

<!-- more -->


<h2>Function Declarations vs. Function Expressions</h2>

<p>A <strong>function declaration</strong>, or function statement, is when you define a function without a variable assignment. A <strong>function expression</strong> is when you define a function and set the result of that function equal to a varialbe.</p>

<figure class='code'><figcaption><span>functions</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'> <span class="c1">//Function Declaration</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1">//Named function</span>
</span><span class='line'>    <span class="n">function</span> <span class="nf">foo</span><span class="o">(){</span>
</span><span class='line'>      <span class="k">return</span> <span class="s">&quot;hello&quot;</span><span class="o">;</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>    <span class="n">foo</span><span class="o">()</span> <span class="c1">//=&gt; &quot;hello&quot;</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// Function Expressions</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1">// Anonymous Function:</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="n">function</span><span class="o">(){</span>
</span><span class='line'>      <span class="k">return</span> <span class="s">&quot;hello&quot;</span><span class="o">;</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>    <span class="n">a</span><span class="o">()</span> <span class="c1">//=&gt; &quot;hello&quot;</span>
</span><span class='line'>
</span><span class='line'>    <span class="c1">// Named Function:</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="n">function</span> <span class="n">foo</span><span class="o">(){</span>
</span><span class='line'>      <span class="k">return</span> <span class="s">&quot;hello&quot;</span><span class="o">;</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>    <span class="n">foo</span><span class="o">()</span> <span class="c1">//=&gt; &quot;hello&quot;</span>
</span><span class='line'>    <span class="n">a</span><span class="o">()</span> <span class="c1">//=&gt; &quot;hello&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Scoping</h2>

<p>In JavaScript, you have <strong>global scope</strong> and <strong>local scope</strong>. If a variable is defined outside of any function, it is considering to be a global variable, which can be accessed by any function. It is scoped to the entire document.</p>

<p>If the variable is defined inside of a function, that variable is scoped to that function and is only accessible to that function.</p>

<figure class='code'><figcaption><span>Scope</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'>  <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span> <span class="c1">// This is a global variable.</span>
</span><span class='line'>
</span><span class='line'>  <span class="n">function</span> <span class="nf">foo</span><span class="o">(){</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">b</span> <span class="o">=</span> <span class="mi">1</span><span class="o">;</span> <span class="c1">// This is a local variable.</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// If you try to call a and b outside of any function, you get:</span>
</span><span class='line'>
</span><span class='line'>  <span class="n">a</span> <span class="c1">//=&gt; 0</span>
</span><span class='line'>  <span class="n">b</span> <span class="c1">//=&gt; &quot;b is undefined&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Hoisting</h2>

<p>One unique quirk in JavaScript is variable and function hoisting. Function   declarations and function variables are always moved to the top of their scope by the interpreter.</p>

<p>Since all variables defined in a function are scoped to the function level, any variables declared throughout the function are initialized as <code>undefined</code> at the beginning of the function. They are given a value when it reaches the variable assignment. Forward referencing is not possible for variables because <strong>the assignment itself isn&rsquo;t hoisted, just the initialization is</strong>.</p>

<p>However, forward referencing for function declarations is possible because placement is irrelevant for simple function declarations. All function declarations are automatically moved to the top of the function.</p>

<p>Let&rsquo;s look at some examples.</p>

<figure class='code'><figcaption><span>Function Hoisting</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="n">function</span> <span class="nf">foo</span><span class="o">(){</span>
</span><span class='line'>    <span class="n">function</span> <span class="nf">bar</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>        <span class="k">return</span> <span class="s">&quot;hi&quot;</span><span class="o">;</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>    <span class="k">return</span> <span class="nf">bar</span><span class="o">();</span>
</span><span class='line'>    <span class="n">function</span> <span class="nf">bar</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>        <span class="k">return</span> <span class="s">&quot;bye&quot;</span><span class="o">;</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'><span class="o">}</span>
</span><span class='line'>
</span><span class='line'><span class="n">foo</span><span class="o">()</span> <span class="c1">//=&gt; &quot;bye&quot;</span>
</span><span class='line'>
</span><span class='line'><span class="cm">/* Even though the second bar function declaration is below the </span>
</span><span class='line'><span class="cm">return statement, the interpreter actually sees it above the return </span>
</span><span class='line'><span class="cm">because it hoists all the function declarations to the top: */</span>
</span><span class='line'>
</span><span class='line'><span class="n">function</span> <span class="nf">foo</span><span class="o">(){</span>
</span><span class='line'>    <span class="n">function</span> <span class="nf">bar</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>        <span class="k">return</span> <span class="s">&quot;hi&quot;</span><span class="o">;</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>    <span class="n">function</span> <span class="nf">bar</span><span class="o">()</span> <span class="o">{</span>
</span><span class='line'>        <span class="k">return</span> <span class="s">&quot;bye&quot;</span><span class="o">;</span>
</span><span class='line'>    <span class="o">}</span> <span class="c1">// redefines bar</span>
</span><span class='line'>    <span class="k">return</span> <span class="nf">bar</span><span class="o">();</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>




<figure class='code'><figcaption><span>Variable Hoisting</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
<span class='line-number'>46</span>
<span class='line-number'>47</span>
<span class='line-number'>48</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="n">function</span> <span class="nf">foo</span><span class="o">(){</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;hi&quot;</span><span class="o">;</span>
</span><span class='line'>    <span class="k">return</span> <span class="n">a</span><span class="o">;</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;bye&quot;</span><span class="o">;</span>
</span><span class='line'><span class="o">}</span>
</span><span class='line'><span class="n">foo</span><span class="o">()</span> <span class="c1">//=&gt; &quot;hi&quot;</span>
</span><span class='line'>
</span><span class='line'><span class="n">function</span> <span class="nf">foo</span><span class="o">(){</span>
</span><span class='line'>    <span class="k">return</span> <span class="n">a</span><span class="o">;</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;hi&quot;</span><span class="o">;</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;bye&quot;</span><span class="o">;</span>
</span><span class='line'><span class="o">}</span>
</span><span class='line'><span class="n">foo</span><span class="o">()</span> <span class="c1">//=&gt; &quot;undefined&quot;</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// These are read like this:</span>
</span><span class='line'>
</span><span class='line'><span class="n">function</span> <span class="nf">foo</span><span class="o">(){</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;undefined&quot;</span><span class="o">;</span> <span class="c1">// Variable in function initialized.</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;hi&quot;</span><span class="o">;</span> <span class="c1">// Variable assigned value.</span>
</span><span class='line'>    <span class="k">return</span> <span class="n">a</span><span class="o">;</span> <span class="c1">// Current assignment &quot;hi&quot; returned.</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;bye&quot;</span><span class="o">;</span> <span class="c1">// Variable assignment redefined.  </span>
</span><span class='line'><span class="o">}</span>
</span><span class='line'>
</span><span class='line'><span class="n">function</span> <span class="nf">foo</span><span class="o">(){</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;undefined&quot;</span><span class="o">;</span> <span class="c1">// Variable in function initialized.</span>
</span><span class='line'>    <span class="k">return</span> <span class="n">a</span><span class="o">;</span> <span class="c1">// Current assignment &quot;undefined&quot; returned.</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;hi&quot;</span><span class="o">;</span> <span class="c1">// Variable assignment.</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;bye&quot;</span><span class="o">;</span> <span class="c1">// Variable assignment redefined.</span>
</span><span class='line'><span class="o">}</span>
</span><span class='line'>
</span><span class='line'><span class="cm">/* Further, if you simply redefine a variable inside a function,</span>
</span><span class='line'><span class="cm">that variable is a global variable which is initialized as undefined</span>
</span><span class='line'><span class="cm">in the document, like so: */</span>
</span><span class='line'>
</span><span class='line'>  <span class="n">function</span> <span class="nf">foo</span><span class="o">(){</span>
</span><span class='line'>    <span class="n">b</span> <span class="o">=</span> <span class="mi">1</span><span class="o">;</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// is read as =&gt; </span>
</span><span class='line'>
</span><span class='line'>  <span class="n">var</span> <span class="n">b</span> <span class="o">=</span> <span class="s">&quot;undefined&quot;</span><span class="o">;</span> <span class="c1">// Variable initialized.</span>
</span><span class='line'>
</span><span class='line'>  <span class="n">function</span> <span class="nf">foo</span><span class="o">(){</span>
</span><span class='line'>    <span class="n">b</span> <span class="o">=</span> <span class="mi">1</span><span class="o">;</span> <span class="c1">// Variable reassigned.</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'>
</span><span class='line'><span class="cm">/* So it&#39;s important to inlclude `var` if you desire to limit </span>
</span><span class='line'><span class="cm">the scope to the current function. */</span>
</span></code></pre></td></tr></table></div></figure>


<p>To prevent variable hoising, you can use <strong>self-executing anonymous functions</strong>, also known as <strong>immediately-invoked function expressions (IIFEs)</strong>.</p>

<figure class='code'><figcaption><span>IIFEs</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="c1">// Normal function:</span>
</span><span class='line'>
</span><span class='line'><span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;hi&quot;</span><span class="o">;</span>
</span><span class='line'>
</span><span class='line'><span class="n">var</span> <span class="n">word</span> <span class="o">=</span> <span class="n">function</span><span class="o">(){</span>
</span><span class='line'>  <span class="k">return</span> <span class="n">a</span><span class="o">;</span>
</span><span class='line'><span class="o">};</span>
</span><span class='line'>
</span><span class='line'><span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;bye&quot;</span><span class="o">;</span>
</span><span class='line'>
</span><span class='line'><span class="n">word</span><span class="o">()</span> <span class="c1">//=&gt; &quot;bye&quot;</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// IIFE: </span>
</span><span class='line'>
</span><span class='line'><span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;hi&quot;</span><span class="o">;</span>
</span><span class='line'>
</span><span class='line'><span class="n">var</span> <span class="n">word</span> <span class="o">=</span> <span class="o">(</span><span class="n">function</span><span class="o">(){</span>
</span><span class='line'>  <span class="k">return</span> <span class="n">a</span><span class="o">;</span>
</span><span class='line'><span class="o">}(</span><span class="n">a</span><span class="o">));</span>
</span><span class='line'>
</span><span class='line'><span class="n">var</span> <span class="n">a</span> <span class="o">=</span> <span class="s">&quot;bye&quot;</span><span class="o">;</span>
</span><span class='line'>
</span><span class='line'><span class="n">word</span> <span class="c1">//=&gt; &quot;hi&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<p>As you can see, IIFEs preserve the context of the origin function expression placement by passing the current state of the variable to the function.</p>

<h2>Object-Orientation</h2>

<p>Coming from Ruby, I had a good understanding of OOP before learning JS. However, object-oriented programming in JavaScript is a bit different.</p>

<p>You can create an object literal using a basic hash:</p>

<figure class='code'><figcaption><span>Object with literal notation </span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="n">var</span> <span class="n">Amber</span> <span class="o">=</span> <span class="o">{</span><span class="nl">name:</span> <span class="s">&quot;Amber&quot;</span><span class="o">,</span> <span class="nl">favoriteLanguage:</span> <span class="s">&quot;JavaScript&quot;</span><span class="o">};</span>
</span></code></pre></td></tr></table></div></figure>


<p>If you only need to ever use the object once, this technique is fine. But if you want to create multiple instances of it, you should use <strong>constructor functions</strong>. It is important to understand that <strong>all functions are objects in JavaScript</strong>. They all encapsulate a bit of reusable code.</p>

<p>In most languages, including Ruby, these functions are called classes, but in JavaScript you have constructor functions.</p>

<figure class='code'><figcaption><span>Object with constructor</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="c1">// Constructor Function</span>
</span><span class='line'><span class="n">function</span> <span class="nf">Person</span> <span class="o">(</span><span class="n">name</span><span class="o">,</span> <span class="n">favoriteLanguage</span><span class="o">)</span> <span class="o">{}</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Particular instance of constructor function instantiated. </span>
</span><span class='line'><span class="n">var</span> <span class="n">Amber</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Person</span><span class="o">(</span><span class="s">&quot;Amber&quot;</span><span class="o">,</span> <span class="s">&quot;JavaScript&quot;</span><span class="o">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>Now <code>Amber</code> is an object created from the <code>Person</code> object. The biggest advantage to using a constructor function over the basic hash above is that you can now reuse the Person function over and over again. You can give the Person function properties and methods, and those will be copied over to every instance of that object.</p>

<p>The constructor function can now have properties:</p>

<figure class='code'><figcaption><span>Object with constructor and properties </span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="c1">// Constructor Function</span>
</span><span class='line'><span class="n">function</span> <span class="nf">Person</span> <span class="o">(</span><span class="n">name</span><span class="o">,</span> <span class="n">favoriteLanguage</span><span class="o">)</span> <span class="o">{</span>
</span><span class='line'>  <span class="k">this</span><span class="o">.</span><span class="na">name</span> <span class="o">=</span> <span class="n">name</span><span class="o">;</span>
</span><span class='line'>  <span class="k">this</span><span class="o">.</span><span class="na">favoriteLanguage</span> <span class="o">=</span> <span class="n">favoriteLanguage</span><span class="o">;</span>
</span><span class='line'>  <span class="k">this</span><span class="o">.</span><span class="na">changeName</span> <span class="o">=</span> <span class="n">function</span><span class="o">(</span><span class="n">newName</span><span class="o">){</span>
</span><span class='line'>    <span class="k">this</span><span class="o">.</span><span class="na">name</span> <span class="o">=</span> <span class="n">newName</span><span class="o">;</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'><span class="o">}</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Particular instance of constructor function instantiated. </span>
</span><span class='line'><span class="n">var</span> <span class="n">Amber</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Person</span><span class="o">(</span><span class="s">&quot;Amber&quot;</span><span class="o">,</span> <span class="s">&quot;JavaScript&quot;</span><span class="o">);</span>
</span><span class='line'><span class="n">Amber</span><span class="o">.</span><span class="na">name</span> <span class="c1">//=&gt; &quot;Amber&quot;</span>
</span><span class='line'><span class="n">Amber</span><span class="o">.</span><span class="na">changeName</span><span class="o">(</span><span class="s">&quot;Bethany&quot;</span><span class="o">)</span> <span class="c1">//=&gt; Amber.name =&gt; &quot;Bethany&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<p>If you have a group of methods that you want every instance of the constructor function to inherit, you can also encapsulate those methods in a <strong>prototype</strong>.</p>

<figure class='code'><figcaption><span>Object with constructor and prototype</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="c1">// Constructor Function</span>
</span><span class='line'><span class="n">function</span> <span class="nf">Person</span> <span class="o">(</span><span class="n">name</span><span class="o">,</span> <span class="n">favoriteLanguage</span><span class="o">)</span> <span class="o">{</span>
</span><span class='line'>  <span class="k">this</span><span class="o">.</span><span class="na">name</span> <span class="o">=</span> <span class="n">name</span><span class="o">;</span>
</span><span class='line'>  <span class="k">this</span><span class="o">.</span><span class="na">favoriteLanguage</span> <span class="o">=</span> <span class="n">favoriteLanguage</span><span class="o">;</span>
</span><span class='line'><span class="o">}</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Prototype </span>
</span><span class='line'><span class="n">Person</span><span class="o">.</span><span class="na">prototype</span> <span class="o">=</span> <span class="o">{</span>
</span><span class='line'>  <span class="nl">constructor:</span> <span class="n">Person</span><span class="o">,</span>
</span><span class='line'>  <span class="nl">changeName:</span> <span class="n">function</span><span class="o">(</span><span class="n">newName</span><span class="o">){</span>
</span><span class='line'>    <span class="k">this</span><span class="o">.</span><span class="na">name</span> <span class="o">=</span> <span class="n">newName</span><span class="o">;</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'><span class="o">}</span>
</span><span class='line'>
</span><span class='line'><span class="c1">//OR </span>
</span><span class='line'>
</span><span class='line'><span class="n">Person</span><span class="o">.</span><span class="na">prototype</span><span class="o">.</span><span class="na">constructor</span> <span class="o">=</span> <span class="n">Person</span><span class="o">;</span>
</span><span class='line'><span class="n">Person</span><span class="o">.</span><span class="na">prototype</span><span class="o">.</span><span class="na">changeName</span> <span class="o">=</span> <span class="n">function</span><span class="o">(</span><span class="n">newName</span><span class="o">){</span>
</span><span class='line'>    <span class="k">this</span><span class="o">.</span><span class="na">name</span> <span class="o">=</span> <span class="n">newName</span><span class="o">;</span>
</span><span class='line'><span class="o">}</span>
</span></code></pre></td></tr></table></div></figure>


<p></p>

<p>When you add functions to a prototype, they are only created once. And then everytime an instance calls one of those methods, the instance refers to the one created in the prototype.</p>

<p>If you add functions to the constructor, they are duplicated every time you create a new instance of the constructor when is less efficient and consumes more memory.</p>

<p>However, one plus to creating methods inside the constructor function is that those functions have access to private data (i.e. they are <em>privileged</em>), whereas functions in prototypes are not.</p>

<h2>Call vs Apply</h2>

<p>If you would like to scope a function to an object, you can use the methods <code>call</code> and <code>apply</code>. For example, if you take the <code>changeName</code> function outside of the prototype in the sample above.</p>

<figure class='code'><figcaption><span>The Call Method</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'>  <span class="n">function</span> <span class="nf">Person</span> <span class="o">(</span><span class="n">name</span><span class="o">)</span> <span class="o">{</span>
</span><span class='line'>    <span class="k">this</span><span class="o">.</span><span class="na">name</span> <span class="o">=</span> <span class="n">name</span><span class="o">;</span>
</span><span class='line'>  <span class="o">}</span>
</span><span class='line'>  <span class="n">var</span> <span class="n">Amber</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Person</span><span class="o">(</span><span class="s">&quot;Amber&quot;</span><span class="o">);</span>
</span><span class='line'>
</span><span class='line'>   <span class="n">var</span> <span class="n">changeName</span> <span class="o">=</span> <span class="n">function</span><span class="o">(</span><span class="n">newName</span><span class="o">){</span>
</span><span class='line'>      <span class="k">this</span><span class="o">.</span><span class="na">name</span> <span class="o">=</span> <span class="n">newName</span><span class="o">;</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>  <span class="cm">/* Calling changeName() here will result in &#39;undefined&#39; </span>
</span><span class='line'><span class="cm">  because it doesn&#39;t know the scope of this. </span>
</span><span class='line'><span class="cm">  You can bind a scope to a function with the call method. */</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// changeName.call(scope, arguments)</span>
</span><span class='line'>
</span><span class='line'>  <span class="n">changeName</span><span class="o">.</span><span class="na">call</span><span class="o">(</span><span class="n">Amber</span><span class="o">,</span> <span class="s">&quot;Bethany&quot;</span><span class="o">);</span>
</span><span class='line'>  <span class="n">Amber</span><span class="o">.</span><span class="na">name</span> <span class="c1">//=&gt; &quot;Bethany&quot;</span>
</span><span class='line'>
</span><span class='line'>  <span class="cm">/* This binds the function to the Amber object </span>
</span><span class='line'><span class="cm">  and passes it the argument &quot;Bethany&quot;. */</span>
</span></code></pre></td></tr></table></div></figure>


<p><code>apply</code> is very similar to <code>call</code>, except you pass it arguments as an array and it can take an unknown amount of arguments.</p>

<figure class='code'><figcaption><span>The Apply Method</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'>  <span class="n">changeName</span><span class="o">.</span><span class="na">apply</span><span class="o">(</span><span class="n">Amber</span><span class="o">,</span> <span class="o">[</span><span class="s">&quot;Bethany&quot;</span><span class="o">])</span>
</span></code></pre></td></tr></table></div></figure>


<p>There are many intricacies I have not discussed here, but I hope this post gives you a taste of JavaScript and some of its basic concepts and quirks.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Sorting Algorithms Series: Insertion Sort]]></title>
    <link href="http://ambertunnell.github.io/blog/2014/08/23/insertion-sort/"/>
    <updated>2014-08-23T16:01:26-04:00</updated>
    <id>http://ambertunnell.github.io/blog/2014/08/23/insertion-sort</id>
    <content type="html"><![CDATA[<p>Like <a href="http://ambertunnell.github.io/blog/2014/08/20/bubble-sort/">Bubble Sort</a>, <strong>Insertion Sort</strong> is a simple sorting algorithm.</p>

<p>Insertion Sort works by iterating up the current array, placing the current element into the correct place in the new sorted array.</p>

<ol>
  <li>First, take the first element of the unsorted array out of the array and put it into an empty new array.</li> 
  <li>Take the next element out of the unsorted array and place it into the new array. If it is smaller than the first element in the new array, swap them. If not, leave it at the end.
  <li>Take the next element out of the array and put it at the end of the new array. If it is larger than the previous end element, leave it. If not, iterate through the array until you find its correct position and insert it there.
  <li>Continue this process until your original array is empty and you have a new completely sorted array.</li>
</ol>




<!-- more -->


<p style="text-align:center;"> <img src="http://upload.wikimedia.org/wikipedia/commons/0/0f/Insertion-sort-example-300px.gif" title="Insertion Sort" alt="insertion sort video" /></p>

<p>While more efficent than Bubble Sort, Insertion Sort still has the same average and worse case time complexity of O(n<sup>2</sup>). Like Bubble Sort, it is very inefficient for large data sets, but rather efficient for small data sets or data sets already mostly sorted (the best case time complexity is O(n)).</p>

<p>Implementation of Insertion Sort in Ruby.</p>

<figure class='code'><figcaption><span>Insertion Sort in Ruby</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">InsertionSort</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="n">array</span><span class="p">)</span>
</span><span class='line'>    <span class="vi">@array</span> <span class="o">=</span> <span class="n">array</span>
</span><span class='line'>    <span class="vi">@sorted_array</span> <span class="o">=</span> <span class="o">[]</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">sort</span>
</span><span class='line'>    <span class="n">j</span> <span class="o">=</span> <span class="mi">0</span>
</span><span class='line'>    <span class="k">while</span> <span class="vi">@array</span><span class="o">.</span><span class="n">length</span> <span class="o">&gt;</span> <span class="mi">0</span>
</span><span class='line'>      <span class="vi">@sorted_array</span> <span class="o">&lt;&lt;</span> <span class="vi">@array</span><span class="o">.</span><span class="n">shift</span>
</span><span class='line'>      <span class="k">if</span> <span class="vi">@sorted_array</span><span class="o">.</span><span class="n">length</span> <span class="o">&gt;</span> <span class="mi">1</span> <span class="o">&amp;&amp;</span> <span class="vi">@sorted_array</span><span class="o">[</span><span class="n">j</span><span class="o">-</span><span class="mi">1</span><span class="o">]</span> <span class="o">&gt;</span> <span class="vi">@sorted_array</span><span class="o">[</span><span class="n">j</span><span class="o">]</span>
</span><span class='line'>        <span class="vi">@sorted_array</span><span class="o">.</span><span class="n">each</span><span class="o">.</span><span class="n">with_index</span> <span class="k">do</span> <span class="o">|</span><span class="n">n</span><span class="p">,</span> <span class="n">i</span><span class="o">|</span>
</span><span class='line'>          <span class="k">if</span> <span class="vi">@sorted_array</span><span class="o">[</span><span class="n">i</span><span class="o">]</span> <span class="o">&gt;</span> <span class="vi">@sorted_array</span><span class="o">[-</span><span class="mi">1</span><span class="o">]</span>
</span><span class='line'>            <span class="vi">@sorted_array</span><span class="o">[</span><span class="n">i</span><span class="o">]</span><span class="p">,</span> <span class="vi">@sorted_array</span><span class="o">[-</span><span class="mi">1</span><span class="o">]</span> <span class="o">=</span> <span class="vi">@sorted_array</span><span class="o">[-</span><span class="mi">1</span><span class="o">]</span><span class="p">,</span> <span class="vi">@sorted_array</span><span class="o">[</span><span class="n">i</span><span class="o">]</span>
</span><span class='line'>          <span class="k">end</span>
</span><span class='line'>          <span class="k">if</span> <span class="p">(</span><span class="vi">@sorted_array</span><span class="o">[</span><span class="n">i</span><span class="o">]</span> <span class="o">&lt;</span>  <span class="vi">@sorted_array</span><span class="o">[-</span><span class="mi">1</span><span class="o">]</span><span class="p">)</span> <span class="o">&amp;&amp;</span> <span class="p">(</span><span class="vi">@sorted_array</span><span class="o">[</span><span class="n">i</span><span class="o">+</span><span class="mi">1</span><span class="o">]</span> <span class="o">&gt;</span> <span class="vi">@sorted_array</span><span class="o">[-</span><span class="mi">1</span><span class="o">]</span><span class="p">)</span>
</span><span class='line'>            <span class="vi">@sorted_array</span><span class="o">.</span><span class="n">insert</span><span class="p">(</span><span class="n">i</span><span class="o">+</span><span class="mi">1</span><span class="p">,</span> <span class="vi">@sorted_array</span><span class="o">[-</span><span class="mi">1</span><span class="o">]</span><span class="p">)</span>
</span><span class='line'>            <span class="vi">@sorted_array</span><span class="o">.</span><span class="n">slice!</span><span class="p">(</span><span class="o">-</span><span class="mi">1</span><span class="p">)</span>
</span><span class='line'>          <span class="k">end</span>
</span><span class='line'>        <span class="k">end</span>
</span><span class='line'>      <span class="k">end</span>
</span><span class='line'>      <span class="n">j</span><span class="o">+=</span><span class="mi">1</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>    <span class="vi">@sorted_array</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="nb">print</span> <span class="no">InsertionSort</span><span class="o">.</span><span class="n">new</span><span class="p">(</span><span class="o">[</span><span class="mi">4</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">6</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">5</span><span class="p">,</span><span class="mi">2</span><span class="o">]</span><span class="p">)</span><span class="o">.</span><span class="n">sort</span> <span class="c1">#=&gt; [1, 2, 3, 4, 5, 6]</span>
</span></code></pre></td></tr></table></div></figure>


<p>And in JavaScript:</p>

<figure class='code'><figcaption><span>Insertion Sort in JavaScript</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="n">function</span> <span class="nf">insertionSort</span><span class="o">(</span><span class="n">array</span><span class="o">)</span> <span class="o">{</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">sortedArray</span> <span class="o">=</span> <span class="o">[];</span>
</span><span class='line'>
</span><span class='line'>    <span class="k">for</span> <span class="o">(</span><span class="n">var</span> <span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="n">array</span><span class="o">.</span><span class="na">length</span><span class="o">;</span> <span class="n">i</span><span class="o">++)</span> <span class="o">{</span>
</span><span class='line'>
</span><span class='line'>        <span class="n">sortedArray</span><span class="o">.</span><span class="na">push</span><span class="o">(</span><span class="n">array</span><span class="o">[</span><span class="n">i</span><span class="o">]);</span>
</span><span class='line'>        <span class="n">var</span> <span class="n">len</span> <span class="o">=</span> <span class="n">sortedArray</span><span class="o">.</span><span class="na">length</span><span class="o">;</span>
</span><span class='line'>
</span><span class='line'>        <span class="k">if</span> <span class="o">((</span><span class="n">len</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="o">)</span> <span class="o">&amp;&amp;</span> <span class="o">(</span><span class="n">sortedArray</span><span class="o">[</span><span class="n">len</span> <span class="o">-</span> <span class="mi">1</span><span class="o">]</span> <span class="o">&lt;</span> <span class="n">sortedArray</span><span class="o">[</span><span class="n">len</span> <span class="o">-</span> <span class="mi">2</span><span class="o">]))</span> <span class="o">{</span>
</span><span class='line'>            <span class="k">for</span> <span class="o">(</span><span class="n">var</span> <span class="n">j</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span> <span class="n">j</span> <span class="o">&lt;</span> <span class="n">len</span><span class="o">;</span> <span class="n">j</span><span class="o">++)</span> <span class="o">{</span>
</span><span class='line'>                <span class="k">if</span> <span class="o">((</span><span class="n">len</span> <span class="o">===</span> <span class="mi">2</span><span class="o">)</span> <span class="o">&amp;&amp;</span> <span class="o">(</span><span class="n">sortedArray</span><span class="o">[</span><span class="n">j</span><span class="o">]</span> <span class="o">&gt;</span> <span class="n">sortedArray</span><span class="o">[</span><span class="n">len</span> <span class="o">-</span> <span class="mi">1</span><span class="o">]))</span>
</span><span class='line'>                <span class="o">{</span>
</span><span class='line'>                    <span class="n">var</span> <span class="n">first</span> <span class="o">=</span> <span class="n">sortedArray</span><span class="o">[</span><span class="n">j</span><span class="o">];</span>
</span><span class='line'>                    <span class="n">var</span> <span class="n">second</span> <span class="o">=</span> <span class="n">sortedArray</span><span class="o">[</span><span class="n">len</span> <span class="o">-</span> <span class="mi">1</span><span class="o">];</span>
</span><span class='line'>
</span><span class='line'>                    <span class="n">sortedArray</span><span class="o">[</span><span class="n">j</span><span class="o">]</span> <span class="o">=</span> <span class="n">second</span><span class="o">;</span>
</span><span class='line'>                    <span class="n">sortedArray</span><span class="o">[</span><span class="n">len</span> <span class="o">-</span> <span class="mi">1</span><span class="o">]</span> <span class="o">=</span> <span class="n">first</span><span class="o">;</span>
</span><span class='line'>                <span class="o">}</span>
</span><span class='line'>                <span class="k">else</span> <span class="nf">if</span> <span class="o">((</span><span class="n">sortedArray</span><span class="o">[</span><span class="n">j</span><span class="o">]</span> <span class="o">&lt;=</span> <span class="n">sortedArray</span><span class="o">[</span><span class="n">len</span> <span class="o">-</span> <span class="mi">1</span><span class="o">])</span>
</span><span class='line'>                <span class="o">&amp;&amp;</span> <span class="o">(</span><span class="n">sortedArray</span><span class="o">[</span><span class="n">len</span> <span class="o">-</span> <span class="mi">1</span><span class="o">]</span> <span class="o">&lt;=</span> <span class="n">sortedArray</span><span class="o">[</span><span class="n">j</span> <span class="o">+</span> <span class="mi">1</span><span class="o">]))</span>
</span><span class='line'>                <span class="o">{</span>
</span><span class='line'>                    <span class="c1">//Insert the new element where it belongs.</span>
</span><span class='line'>                    <span class="n">sortedArray</span><span class="o">.</span><span class="na">splice</span><span class="o">(</span><span class="n">j</span> <span class="o">+</span> <span class="mi">1</span><span class="o">,</span> <span class="mi">0</span><span class="o">,</span> <span class="n">sortedArray</span><span class="o">[</span><span class="n">len</span> <span class="o">-</span> <span class="mi">1</span><span class="o">]);</span>
</span><span class='line'>                    <span class="c1">// Delete it from the end of the array.</span>
</span><span class='line'>                    <span class="n">sortedArray</span><span class="o">.</span><span class="na">splice</span><span class="o">(</span><span class="n">sortedArray</span><span class="o">.</span><span class="na">length</span> <span class="o">-</span> <span class="mi">1</span><span class="o">,</span> <span class="mi">1</span><span class="o">);</span>
</span><span class='line'>                <span class="o">}</span>
</span><span class='line'>            <span class="o">}</span>
</span><span class='line'>        <span class="o">}</span>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>    <span class="k">return</span> <span class="n">sortedArray</span><span class="o">;</span>
</span><span class='line'>
</span><span class='line'><span class="o">}</span>
</span><span class='line'>
</span><span class='line'><span class="n">insertionSort</span><span class="o">([</span><span class="mi">4</span><span class="o">,</span> <span class="mi">1</span><span class="o">,</span> <span class="mi">2</span><span class="o">,</span> <span class="mi">6</span><span class="o">,</span> <span class="mi">3</span><span class="o">,</span> <span class="mi">5</span><span class="o">]);</span> <span class="c1">//=&gt; [1, 2, 3, 4, 5, 6]</span>
</span></code></pre></td></tr></table></div></figure>


<p><em>This is the second post in a series of posts on various sorting algorithms in computer science. See the entire series <a href="http://ambertunnell.github.io/blog/categories/sorting-algorithms/">here</a>.</em></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Sorting Algorithms Series: Bubble Sort]]></title>
    <link href="http://ambertunnell.github.io/blog/2014/08/20/bubble-sort/"/>
    <updated>2014-08-20T21:37:50-04:00</updated>
    <id>http://ambertunnell.github.io/blog/2014/08/20/bubble-sort</id>
    <content type="html"><![CDATA[<p><em>When I was learning Ruby, we never discussed sorting algorithms. It&rsquo;s my understanding that most sorting algorithm problems can be solved quite easily using built-in methods in most languages. That being said, it is important to understand the different sorting techniques available in computer science. Along those lines, here&rsquo;s a series of blog posts on the most common sorting algorithms!</em></p>

<p>We&rsquo;ll start with Bubble Sort.</p>

<p><strong>Bubble Sort</strong> is a simple sorting algorithm.</p>

<ol>
  <li>You start by comparing the first two items in an array. If the first item is larger than the second, you swap the two items.</li> 
  <li>Then, you compare the second and third items. If the second is larger than the third, you swap them.</li>
  <li>Continue until you reach the end of the array.</li>
  <li>Then, you start from the beginning again and repeat the process until you have one full pass of the array in which you did not swap any items.</li>
  <li>You now have a sorted array!</li>
</ol>




<!-- more -->


<p>The name &lsquo;bubble sort&rsquo; derives from the event of the smaller numbers slowly &lsquo;bubbling&rsquo; to the front of the array through the swapping process.</p>

<p style="text-align:center;"> <img src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Bubble-sort-example-300px.gif" title="Bubble Sort" alt="bubble sort video" /></p>

<p>Here&rsquo;s the bubble sort algorithm implemented in Ruby.</p>

<figure class='code'><figcaption><span>Bubble Sort in Ruby</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">BubbleSort</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="n">array</span><span class="p">)</span>
</span><span class='line'>    <span class="vi">@array</span> <span class="o">=</span> <span class="n">array</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">sort</span>
</span><span class='line'>    <span class="kp">loop</span> <span class="k">do</span>
</span><span class='line'>      <span class="n">i</span> <span class="o">=</span> <span class="mi">1</span>
</span><span class='line'>      <span class="n">swap_number</span> <span class="o">=</span> <span class="mi">0</span>
</span><span class='line'>       <span class="k">while</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="vi">@array</span><span class="o">.</span><span class="n">length</span>
</span><span class='line'>         <span class="k">if</span> <span class="vi">@array</span><span class="o">[</span><span class="n">i</span><span class="o">-</span><span class="mi">1</span><span class="o">]</span> <span class="o">&gt;</span> <span class="vi">@array</span><span class="o">[</span><span class="n">i</span><span class="o">]</span>
</span><span class='line'>          <span class="vi">@array</span><span class="o">[</span><span class="n">i</span><span class="o">-</span><span class="mi">1</span><span class="o">]</span><span class="p">,</span> <span class="vi">@array</span><span class="o">[</span><span class="n">i</span><span class="o">]</span> <span class="o">=</span> <span class="vi">@array</span><span class="o">[</span><span class="n">i</span><span class="o">]</span><span class="p">,</span> <span class="vi">@array</span><span class="o">[</span><span class="n">i</span><span class="o">-</span><span class="mi">1</span><span class="o">]</span>
</span><span class='line'>          <span class="n">swap_number</span> <span class="o">+=</span> <span class="mi">1</span>
</span><span class='line'>         <span class="k">end</span>
</span><span class='line'>         <span class="n">i</span><span class="o">+=</span><span class="mi">1</span>
</span><span class='line'>       <span class="k">end</span>
</span><span class='line'>      <span class="k">break</span> <span class="k">if</span> <span class="n">swap_number</span> <span class="o">==</span> <span class="mi">0</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>    <span class="k">return</span> <span class="vi">@array</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="nb">print</span> <span class="no">BubbleSort</span><span class="o">.</span><span class="n">new</span><span class="p">(</span><span class="o">[</span><span class="mi">4</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">6</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">5</span><span class="o">]</span><span class="p">)</span><span class="o">.</span><span class="n">sort</span> <span class="c1">#=&gt; [1, 2, 3, 4, 5, 6]</span>
</span></code></pre></td></tr></table></div></figure>


<p>And, here&rsquo;s it in JavaScript.</p>

<figure class='code'><figcaption><span>Bubble Sort in JavaScript</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
</pre></td><td class='code'><pre><code class='java'><span class='line'><span class="n">function</span> <span class="nf">bubbleSort</span><span class="o">(</span><span class="n">array</span><span class="o">)</span> <span class="o">{</span>
</span><span class='line'>    <span class="n">var</span> <span class="n">swapNum</span><span class="o">;</span>
</span><span class='line'>
</span><span class='line'>    <span class="k">while</span> <span class="o">(</span><span class="n">swapNum</span> <span class="o">!==</span> <span class="mi">0</span><span class="o">)</span> <span class="o">{</span>
</span><span class='line'>        <span class="n">swapNum</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span>
</span><span class='line'>        <span class="k">for</span> <span class="o">(</span><span class="n">var</span> <span class="n">i</span> <span class="o">=</span> <span class="mi">0</span><span class="o">;</span> <span class="n">i</span> <span class="o">&lt;</span> <span class="n">array</span><span class="o">.</span><span class="na">length</span><span class="o">;</span> <span class="n">i</span><span class="o">++)</span> <span class="o">{</span>
</span><span class='line'>            <span class="k">if</span> <span class="o">(</span><span class="n">array</span><span class="o">[</span><span class="n">i</span><span class="o">]</span> <span class="o">&gt;</span> <span class="n">array</span><span class="o">[</span><span class="n">i</span> <span class="o">+</span> <span class="mi">1</span><span class="o">])</span> <span class="o">{</span>
</span><span class='line'>
</span><span class='line'>                <span class="n">var</span> <span class="n">first</span> <span class="o">=</span> <span class="n">array</span><span class="o">[</span><span class="n">i</span><span class="o">];</span>
</span><span class='line'>                <span class="n">var</span> <span class="n">second</span> <span class="o">=</span> <span class="n">array</span><span class="o">[</span><span class="n">i</span><span class="o">+</span><span class="mi">1</span><span class="o">];</span>
</span><span class='line'>
</span><span class='line'>                <span class="n">array</span><span class="o">[</span><span class="n">i</span><span class="o">]</span> <span class="o">=</span> <span class="n">second</span><span class="o">;</span>
</span><span class='line'>                <span class="n">array</span><span class="o">[</span><span class="n">i</span><span class="o">+</span><span class="mi">1</span><span class="o">]</span> <span class="o">=</span> <span class="n">first</span><span class="o">;</span>
</span><span class='line'>
</span><span class='line'>                <span class="n">swapNum</span><span class="o">++;</span>
</span><span class='line'>            <span class="o">}</span>
</span><span class='line'>        <span class="o">}</span>
</span><span class='line'>
</span><span class='line'>    <span class="o">}</span>
</span><span class='line'>    <span class="k">return</span> <span class="n">array</span><span class="o">;</span>
</span><span class='line'><span class="o">}</span>
</span><span class='line'>
</span><span class='line'><span class="n">bubbleSort</span><span class="o">([</span><span class="mi">4</span><span class="o">,</span><span class="mi">1</span><span class="o">,</span><span class="mi">2</span><span class="o">,</span><span class="mi">6</span><span class="o">,</span><span class="mi">3</span><span class="o">,</span><span class="mi">5</span><span class="o">]);</span> <span class="c1">//=&gt; [1, 2, 3, 4, 5, 6]</span>
</span></code></pre></td></tr></table></div></figure>


<p>One of the biggest problems with using bubble sort is that it isn&rsquo;t practical on large data sets. It is incredibly inefficient with an average and worst-case time complexity of О(n<sup>2</sup>).</p>

<p>In the best-case where the array is already sorted, the time complexity is O(n) because it only has to do one pass of the array, whereas most other algorithms still have to go through all their steps even when given an already-sorted array.</p>

<p>That being said, bubble sort is still a very undesirable and inefficient sorting technique.</p>

<p><em>This is the first post in a series of posts on various sorting algorithms in computer science. See the entire series <a href="http://ambertunnell.github.io/blog/categories/sorting-algorithms/">here</a>.</em></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Writing beautiful code with haml]]></title>
    <link href="http://ambertunnell.github.io/blog/2014/07/18/writing-beautiful-code-with-haml/"/>
    <updated>2014-07-18T00:25:50-04:00</updated>
    <id>http://ambertunnell.github.io/blog/2014/07/18/writing-beautiful-code-with-haml</id>
    <content type="html"><![CDATA[<p>The more I code, the more I think of coding as an art form. Good code is easy to read by other humans, efficient, and easily adaptable. But great code is also elegant. When you look at a great piece of code, it feels <em>right</em>. Similarly, poorly written code, while often functional, just feels wrong and frustrating to look at.</p>

<p>Writing view templates using <a href="http://en.wikipedia.org/wiki/ERuby">ERB</a>, the default Rails templating language, has always seemed unnecessarily messy to me. ERB tags do not flow well with Ruby code or HTML tags. They are time-consuming to write in code. You also cannot use the <code>command-slash</code> commenting shortcut in Sublime Text with them; you must comment out each line of Ruby code separately (which makes them even more time-consuming to maintain).</p>

<p>Therefore, I was delighted when I discovered <a href="http://haml.info/">HAML (HTML abstraction markup language)</a>. A markup language that was designed to replace messy ERB templates with simpler, cleaner design. Why? Because markup should be beautiful.</p>

<!-- more -->


<p>While this idea may seem crazy to certain people, just take a look at the following basic forms, one written in basic HTML and one in HAML.</p>

<figure class='code'><figcaption><span>basic form_for with erb </span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="err">&lt;</span>%= form_for(@post) do |f| %&gt;
</span><span class='line'>
</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;field&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="err">&lt;</span>%= f.label :name %&gt;
</span><span class='line'>    <span class="err">&lt;</span>%= f.text_field :name %&gt;
</span><span class='line'>    <span class="err">&lt;</span>%= f.label :content %&gt;
</span><span class='line'>    <span class="err">&lt;</span>%= f.text_area :content %&gt;
</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;field&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="err">&lt;</span>%= f.collection_check_boxes :tag_ids, Tag.all, :id, :name %&gt;
</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;field&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="err">&lt;</span>%= f.fields_for :tags, Tag.new do |tag_form| %&gt;
</span><span class='line'>      <span class="err">&lt;</span>%= tag_form.label :name, &quot;Name&quot; %&gt;
</span><span class='line'>      <span class="err">&lt;</span>%= tag_form.text_field :name  %&gt;
</span><span class='line'>    <span class="err">&lt;</span>% end %&gt;
</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;actions&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>    <span class="err">&lt;</span>%= f.submit %&gt;
</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>
</span><span class='line'><span class="err">&lt;</span>% end %&gt;
</span></code></pre></td></tr></table></div></figure>


<p>Here is the same exact form using HAML instead of ERB:</p>

<figure class='code'><figcaption><span>basic form_for with haml</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="o">=</span> <span class="n">form_for</span><span class="p">(</span><span class="vi">@post</span><span class="p">)</span> <span class="k">do</span> <span class="o">|</span><span class="n">f</span><span class="o">|</span>
</span><span class='line'>  <span class="o">.</span><span class="n">field</span>
</span><span class='line'>    <span class="o">=</span> <span class="n">f</span><span class="o">.</span><span class="n">label</span> <span class="ss">:name</span>
</span><span class='line'>    <span class="o">=</span> <span class="n">f</span><span class="o">.</span><span class="n">text_field</span> <span class="ss">:name</span>
</span><span class='line'>    <span class="o">=</span> <span class="n">f</span><span class="o">.</span><span class="n">label</span> <span class="ss">:content</span>
</span><span class='line'>    <span class="o">=</span> <span class="n">f</span><span class="o">.</span><span class="n">text_area</span> <span class="ss">:content</span>
</span><span class='line'>  <span class="o">.</span><span class="n">field</span>
</span><span class='line'>    <span class="o">=</span> <span class="n">f</span><span class="o">.</span><span class="n">collection_check_boxes</span> <span class="ss">:tag_ids</span><span class="p">,</span> <span class="no">Tag</span><span class="o">.</span><span class="n">all</span><span class="p">,</span> <span class="ss">:id</span><span class="p">,</span> <span class="ss">:name</span>
</span><span class='line'>  <span class="o">.</span><span class="n">field</span>
</span><span class='line'>    <span class="o">=</span> <span class="n">f</span><span class="o">.</span><span class="n">fields_for</span> <span class="ss">:tags</span><span class="p">,</span> <span class="no">Tag</span><span class="o">.</span><span class="n">new</span> <span class="k">do</span> <span class="o">|</span><span class="n">tag_form</span><span class="o">|</span>
</span><span class='line'>      <span class="o">=</span> <span class="n">tag_form</span><span class="o">.</span><span class="n">label</span> <span class="ss">:name</span><span class="p">,</span> <span class="s2">&quot;Name&quot;</span>
</span><span class='line'>      <span class="o">=</span> <span class="n">tag_form</span><span class="o">.</span><span class="n">text_field</span> <span class="ss">:name</span>
</span><span class='line'>  <span class="o">.</span><span class="n">actions</span>
</span><span class='line'>    <span class="o">=</span> <span class="n">f</span><span class="o">.</span><span class="n">submit</span>
</span></code></pre></td></tr></table></div></figure>


<p></p>

<p>That&rsquo;s 44 percent fewer lines of code, with a cleaner and more elegant design that also took less time to write. You can also comment out the entire section with one command, if desired. (No more commenting out individual ERB lines again!)</p>

<h2>major pros</h2>

<h4>Elegance.</h4>

<p>It&rsquo;s shorter, cleaner, and way more beautiful than HTML.</p>

<h4>Faster.</h4>

<p>No more time wasted writing those useless closing tags! No more time wasted commenting out separate lines of code! Allows developers to produce awesome projects faster.</p>

<h4>Closely related to CSS.</h4>

<p>Your HTML code becomes more clearly associated with its CSS. Most useless HTML tags are gone, leaving simply the CSS relationships.</p>

<h4>Whitespace sensitive.</h4>

<p>Everybody must have the same indentations and code form. This will force coders to adhere to standard practices, guaranteeing that others will be able to easily read their code.</p>

<h2>major cons</h2>

<h4>Whitespace sensitive.</h4>

<p>You have to be extra careful with how you indent and write your code. This can be particularly frustrating for some people who would prefer not to have to follow a certain indentation practice or have to worry about whitespace. It can also be extremely hard to debug, since it&rsquo;s not always obvious if there&rsquo;s an extra whitespace in your code since you can&rsquo;t see it!</p>

<h4>Processing speed.</h4>

<p>According to <a href="http://sephinrothcn.wordpress.com/2014/04/14/slim-vs-haml-performance-perspective/">this person</a>, HAML has a slightly slower processing speed than ERB (and SLIM, another markup language focusing on elegant design.)</p>

<h4>Cost of change.</h4>

<p>Most people know HTML. Most people do not know HAML. It takes a bit of time to learn, when you can do the same things in HTML that you can do in HAML.</p>

<h2>change can be frustrating</h2>

<p>&hellip;but it doesn&rsquo;t have to be!</p>

<p>Fortunately, if you do want to use HAML on a project going forward, there are handy websites like <a href="http://html2haml.heroku.com/">Html2Haml</a> that will instantly convert ERB templates to HAML, hassle-free.</p>

<p>Just make sure you <code>gem install haml</code> and require HAML in your project.</p>

<p>You can also create a new Rails app that uses HAML automatically with this command:</p>

<p><code>rails new myapp -m https://raw.github.com/RailsApps/rails-composer/master/composer.rb</code></p>

<p>After you run this command, you will be prompted for several preferences, including templating engine. Then, you can select ERB, HAML, or SLIM. If you choose HAML, it will automatically create your view files with the <code>.html.haml</code> extension.</p>

<p>Now go and produce prettier code with HAML!</p>

<h3>Additional Resources:</h3>

<p><li><a href="https://rubygems.org/gems/haml">Haml gem on RubyGems</a></li>
<li><a href="http://haml.info/">Haml website</a></li>
<li>Online HAML conversion: <a href="http://html2haml.heroku.com/">Html2haml</a></li>
<li><a href="http://slim-lang.com/">Slim website</a></li>
<li>Online SLIM conversion: <a href="http://html2slim.herokuapp.com/">Html2slim</a></li>
<li><a href="http://sephinrothcn.wordpress.com/2014/04/14/slim-vs-haml-performance-perspective/">Study on ERB, HAML, SLIM processing speed</a></li></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Analyzing instance variables in Ruby]]></title>
    <link href="http://ambertunnell.github.io/blog/2014/06/29/analyzing-instance-variables-in-ruby/"/>
    <updated>2014-06-29T21:26:29-04:00</updated>
    <id>http://ambertunnell.github.io/blog/2014/06/29/analyzing-instance-variables-in-ruby</id>
    <content type="html"><![CDATA[<p>Instance variables in Ruby can be accessed in two ways. Directly with an @ symbol, <code>@variable</code>, or through a method call, <code>self.variable</code>. Many Rubyists think these are synonymous. However, they are not.</p>

<p>By accessing the data through the method call, you are protecting the data from being accessed directly. Therefore, if the data changes unexpectedly, you will only have to adjust the one method. If you access the data directly throughout your code, you may have to change it many times so that your code doesn&rsquo;t break.</p>

<p>It is a fine distinction, but can become an incredibly important one the larger your program is.</p>

<!-- more -->


<p>Here&rsquo;s an example. Let&rsquo;s set up a basic class to get us started.</p>

<figure class='code'><figcaption><span>Cat class</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">Cat</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="nb">name</span><span class="p">,</span> <span class="n">age</span><span class="p">)</span>
</span><span class='line'>    <span class="vi">@name</span> <span class="o">=</span> <span class="nb">name</span>
</span><span class='line'>    <span class="vi">@age</span> <span class="o">=</span> <span class="n">age</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>This Cat class can be initialized with two variables: @name and @age.</p>

<p>Now, let&rsquo;s make our class more interesting.</p>

<figure class='code'><figcaption><span>Cat class</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">Cat</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="nb">name</span><span class="p">,</span> <span class="n">age</span><span class="p">)</span>
</span><span class='line'>    <span class="vi">@name</span> <span class="o">=</span> <span class="nb">name</span>
</span><span class='line'>    <span class="vi">@age</span> <span class="o">=</span> <span class="n">age</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">age_in_human_years</span>
</span><span class='line'>    <span class="k">if</span> <span class="vi">@age</span> <span class="o">==</span> <span class="mi">0</span>
</span><span class='line'>      <span class="vi">@human_age</span> <span class="o">=</span> <span class="mi">0</span>
</span><span class='line'>    <span class="k">elsif</span> <span class="vi">@age</span> <span class="o">==</span> <span class="mi">1</span>
</span><span class='line'>      <span class="vi">@human_age</span> <span class="o">=</span> <span class="mi">15</span>
</span><span class='line'>    <span class="k">else</span>
</span><span class='line'>      <span class="vi">@human_age</span> <span class="o">=</span> <span class="mi">16</span> <span class="o">+</span> <span class="vi">@age</span> <span class="o">*</span> <span class="mi">4</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>
Now, we have a method that accesses the @age instance variable that is initialized upon instantiation. By using &lsquo;@&rsquo; instead of &lsquo;self&rsquo;, we are directly accessing that variable.</p>

<p>But, what if we wanted a variable that actually equals age + 2? We could add in that variable and use it throughout. Like so:</p>

<figure class='code'><figcaption><span>Cat class</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">Cat</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="nb">name</span><span class="p">,</span> <span class="n">age</span><span class="p">)</span>
</span><span class='line'>    <span class="vi">@name</span> <span class="o">=</span> <span class="nb">name</span>
</span><span class='line'>    <span class="vi">@age</span> <span class="o">=</span> <span class="n">age</span>
</span><span class='line'>    <span class="vi">@new_age</span> <span class="o">=</span> <span class="n">age</span> <span class="o">+</span> <span class="mi">2</span> <span class="c1">#=&gt; addition</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">age_in_human_years</span>
</span><span class='line'>    <span class="k">if</span> <span class="vi">@new_age</span> <span class="o">==</span> <span class="mi">0</span> <span class="c1">#=&gt; change 1</span>
</span><span class='line'>      <span class="vi">@human_age</span> <span class="o">=</span> <span class="mi">0</span>
</span><span class='line'>    <span class="k">elsif</span> <span class="vi">@new_age</span> <span class="o">==</span> <span class="mi">1</span> <span class="c1">#=&gt; change 2</span>
</span><span class='line'>      <span class="vi">@human_age</span> <span class="o">=</span> <span class="mi">15</span>
</span><span class='line'>    <span class="k">else</span>
</span><span class='line'>      <span class="vi">@human_age</span> <span class="o">=</span> <span class="mi">16</span> <span class="o">+</span> <span class="vi">@new_age</span> <span class="o">*</span> <span class="mi">4</span> <span class="c1">#=&gt; change 3 </span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>
One could argue that we could&rsquo;ve just initialized @age to be equal to age+2, but I think that would go against Ruby convention and confuse matters. Plus, we could then never access both <code>age</code> and <code>age+2</code>. <code>@age</code> would be stuck at age + 2.</p>

<p>Okay, we made those changes. That wasn&rsquo;t too hard. However, what if we referenced this variable in a thousand different places? It just wouldn&rsquo;t be feasible or desirable to have to comb through the code and change them all.</p>

<p>Here&rsquo;s where <code>self</code> comes in. Let&rsquo;s go back one step and reimplement the example with <code>self</code>.</p>

<figure class='code'><figcaption><span>Cat class</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">Cat</span>
</span><span class='line'>
</span><span class='line'>  <span class="kp">attr_reader</span> <span class="ss">:age</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="nb">name</span><span class="p">,</span> <span class="n">age</span><span class="p">)</span>
</span><span class='line'>    <span class="vi">@name</span> <span class="o">=</span> <span class="nb">name</span>
</span><span class='line'>    <span class="vi">@age</span> <span class="o">=</span> <span class="n">age</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">age_in_human_years</span>
</span><span class='line'>    <span class="k">if</span> <span class="nb">self</span><span class="o">.</span><span class="n">age</span> <span class="o">==</span> <span class="mi">0</span>
</span><span class='line'>      <span class="vi">@human_age</span> <span class="o">=</span> <span class="mi">0</span>
</span><span class='line'>    <span class="k">elsif</span> <span class="nb">self</span><span class="o">.</span><span class="n">age</span> <span class="o">==</span> <span class="mi">1</span>
</span><span class='line'>      <span class="vi">@human_age</span> <span class="o">=</span> <span class="mi">15</span>
</span><span class='line'>    <span class="k">else</span>
</span><span class='line'>      <span class="vi">@human_age</span> <span class="o">=</span> <span class="mi">16</span> <span class="o">+</span> <span class="nb">self</span><span class="o">.</span><span class="n">age</span> <span class="o">*</span> <span class="mi">4</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>So, we changed the <code>@age</code> to <code>self.age</code> throughout. And, added in a <code>attr_reader</code>,  which is shorthand for this method:</p>

<figure class='code'><figcaption><span>attr_reader</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'>  <span class="k">def</span> <span class="nf">age</span>
</span><span class='line'>    <span class="vi">@age</span>
</span><span class='line'>  <span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>It merely creates a method that can access the instance variable. So, to clarify, when we reference @age we are accessing the variable data directly. But, when we use self.age (note: the &lsquo;self&rsquo; is actually optional), we are accessing the variable indirectly through this reader method.</p>

<p>So, again, say we want to make that age adjustment and add 2 to the given age.  Instead of adjusting the code accordingly, we can just create our own reader method for that variable.</p>

<figure class='code'><figcaption><span>Cat class</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">Cat</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">age</span>
</span><span class='line'>    <span class="vi">@age</span> <span class="o">+</span> <span class="mi">2</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">initialize</span><span class="p">(</span><span class="nb">name</span><span class="p">,</span> <span class="n">age</span><span class="p">)</span>
</span><span class='line'>    <span class="vi">@name</span> <span class="o">=</span> <span class="nb">name</span>
</span><span class='line'>    <span class="vi">@age</span> <span class="o">=</span> <span class="n">age</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nf">age_in_human_years</span>
</span><span class='line'>    <span class="k">if</span> <span class="nb">self</span><span class="o">.</span><span class="n">age</span> <span class="o">==</span> <span class="mi">0</span>
</span><span class='line'>      <span class="vi">@human_age</span> <span class="o">=</span> <span class="mi">0</span>
</span><span class='line'>    <span class="k">elsif</span> <span class="nb">self</span><span class="o">.</span><span class="n">age</span> <span class="o">==</span> <span class="mi">1</span>
</span><span class='line'>      <span class="vi">@human_age</span> <span class="o">=</span> <span class="mi">15</span>
</span><span class='line'>    <span class="k">else</span>
</span><span class='line'>      <span class="vi">@human_age</span> <span class="o">=</span> <span class="mi">16</span> <span class="o">+</span> <span class="nb">self</span><span class="o">.</span><span class="n">age</span> <span class="o">*</span> <span class="mi">4</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>The only thing we did this time for that change is delete the default <code>attr_reader</code> method and define a short method that changes the information received when one calls <code>.age</code>. Also, this way, we can preserve access to the original given age, by calling <code>@age</code>, and we can access @age+2, by calling <code>.age</code>.</p>

<p>The difference may seem insignificant. And, in small programs, it probably is. But, as programs grow larger, this may make a significant difference in how costly one change may be.If you are only directly accessing the data of an instance variable in one place, you only have to change it in one place. But, if you are directly accessing it hundreds of times, you may have to look at all of those pieces to verify that they won&rsquo;t break now that the value of a variable has changed.</p>

<p>So, the take-away: always hide data from yourself. It is the best defensive strategy to protect your code from unexpected changes.</p>

<h3>Additional Resources:</h3>

<p><li><a href="http://www.poodr.com/">Practical Object-Oriented Design in Ruby (POODR)</a> by Sandi Metz</li></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Ruby magic]]></title>
    <link href="http://ambertunnell.github.io/blog/2014/06/15/hidden-ruby-magic-tricks/"/>
    <updated>2014-06-15T17:53:07-04:00</updated>
    <id>http://ambertunnell.github.io/blog/2014/06/15/hidden-ruby-magic-tricks</id>
    <content type="html"><![CDATA[<p>I&rsquo;ve been learning Ruby for about 2-3 months now, and I&rsquo;ve already fallen in love. Hard. The language is so intuitive that often I find myself trying methods in Ruby that I&rsquo;ve never learned about just because I think there is a good chance they&rsquo;ll work. And, often if they don&rsquo;t do exactly what I thought they did, they still do something interesting that is awesome. <!-- more --></p>

<p>In this post, I plan to discuss hidden Ruby tricks that many beginning Rubyists might not know about (yet!) that I&rsquo;ve discovered online or through playing around with Ruby. This is by no means a comprehensive list, but I hope it illustrates a few of Ruby&rsquo;s awesome tricks. They are all included in the <a href="http://ruby-doc.org/">Ruby Documentation</a> if you want to learn more. Also, shout out in the comments if you know of any other good ones to add to the list!</p>

<h2><code>.collect.with_index</code></h2>

<p>This one may seem obvious to most, but it was a happy discovery for me last week when I was trying to solve a problem. I had been familiar with the method <code>.each.with_index</code> for a while, and every time I needed to use indexes while iterating, I used it. However, I prefer <code>.collect</code> over <code>.each</code> in most cases, and was frustrated that I couldn&rsquo;t use indexes with collect. I&rsquo;m not sure why I thought it could only work with <code>.each</code>, but I did for a while. But then I tried it with <code>.collect</code>, and it worked! .<code>collect.with_index</code> is a real thing! So, the method <code>.with_index</code> can work on either <code>.each</code> or <code>.collect</code>.</p>

<p>In general, <code>.collect</code> is preferable to <code>.each</code> in any iteration where you are trying to collect data from a block into a new array. The code written with <code>.collect</code> will be cleaner and more concise, as shown in the example below.</p>

<figure class='code'><figcaption><span>each.with_index </span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">array</span> <span class="o">=</span> <span class="o">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">4</span><span class="o">]</span>
</span><span class='line'>
</span><span class='line'><span class="n">new_array</span> <span class="o">=</span> <span class="nb">Array</span><span class="o">.</span><span class="n">new</span>
</span><span class='line'><span class="n">array</span><span class="o">.</span><span class="n">each</span><span class="o">.</span><span class="n">with_index</span> <span class="p">{</span><span class="o">|</span><span class="n">num</span><span class="p">,</span> <span class="n">index</span><span class="o">|</span> <span class="n">new_array</span> <span class="o">&lt;&lt;</span> <span class="n">num</span> <span class="o">*</span> <span class="n">index</span> <span class="p">}</span>
</span><span class='line'><span class="n">new_array</span> <span class="c1">#=&gt; [0,2,6,12]</span>
</span></code></pre></td></tr></table></div></figure>




<figure class='code'><figcaption><span>collect.with_index </span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">array</span> <span class="o">=</span> <span class="o">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">,</span><span class="mi">4</span><span class="o">]</span>
</span><span class='line'>
</span><span class='line'><span class="n">new_array</span> <span class="o">=</span> <span class="n">array</span><span class="o">.</span><span class="n">collect</span><span class="o">.</span><span class="n">with_index</span> <span class="p">{</span><span class="o">|</span><span class="n">num</span><span class="p">,</span> <span class="n">index</span><span class="o">|</span> <span class="n">num</span> <span class="o">*</span> <span class="n">index</span><span class="p">}</span>
</span><span class='line'><span class="n">new_array</span> <span class="c1">#=&gt; [0,2,6,12]</span>
</span></code></pre></td></tr></table></div></figure>


<h2><code>.freeze</code></h2>

<p>Freeze! Because this is Ruby, the method <code>.freeze</code> does exactly what you think it does. It freezes the object from being altered in any way. And you can even check if an object is frozen by asking it if it&rsquo;s frozen! This may be useful if you have a class that you want to alter in your program until a certain condition is met, then if you want the object to be immutable you can just <code>.freeze</code> it from that point on.</p>

<figure class='code'><figcaption><span>.freeze </span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">array</span> <span class="o">=</span> <span class="o">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="o">]</span>
</span><span class='line'><span class="n">array</span><span class="o">.</span><span class="n">freeze</span>
</span><span class='line'><span class="n">array</span><span class="o">.</span><span class="n">collect!</span> <span class="p">{</span><span class="o">|</span><span class="n">num</span><span class="o">|</span> <span class="n">num</span> <span class="o">*</span> <span class="mi">27</span><span class="p">}</span>
</span><span class='line'>  <span class="c1">#=&gt; &quot;RuntimeError: can&#39;t modify frozen Array&quot;</span>
</span><span class='line'><span class="n">array</span><span class="o">.</span><span class="n">frozen?</span>
</span><span class='line'>  <span class="c1">#=&gt; true </span>
</span></code></pre></td></tr></table></div></figure>


<p></p>

<h2><code>.to_s(base)</code></h2>

<p>This was a cool discovery for me. If you convert an integer to a string (using <code>.to_s</code>), it can take an argument that will convert it to a different base. It works up to base 36.</p>

<figure class='code'><figcaption><span>.to_s(base)</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1">#2 in binary</span>
</span><span class='line'><span class="mi">2</span><span class="o">.</span><span class="n">to_s</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span> <span class="c1">#=&gt; &quot;10&quot;</span>
</span><span class='line'>
</span><span class='line'><span class="c1">#converting to binary</span>
</span><span class='line'><span class="mi">5678437</span><span class="o">.</span><span class="n">to_s</span><span class="p">(</span><span class="mi">2</span><span class="p">)</span> <span class="c1">#=&gt; &quot;10101101010010101100101&quot;</span>
</span><span class='line'>
</span><span class='line'><span class="c1">#converting to base 23</span>
</span><span class='line'><span class="mi">5678437</span><span class="o">.</span><span class="n">to_s</span><span class="p">(</span><span class="mi">23</span><span class="p">)</span> <span class="c1">#=&gt; &quot;k6g6d&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Splat <code>*</code> symbol</h2>

<p>Splat(<code>*</code>) is very cool and powerful. Here&rsquo;s a few splat tricks I&rsquo;ve learned.</p>

<h3>allows an array to take unspecified amount of arguments</h3>

<p>It allows an array to take any number of arguments, and returns those values in a array. You can use it with other aguments, if you want to separate the first or last argument from the array.</p>

<figure class='code'><figcaption><span>splat_power</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="c1">#splat argument as the only arugment </span>
</span><span class='line'><span class="k">def</span> <span class="nf">splat_is_awesome</span><span class="p">(</span><span class="o">*</span><span class="n">a</span><span class="p">)</span>
</span><span class='line'>  <span class="n">a</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="n">splat_is_awesome</span><span class="p">(</span><span class="s2">&quot;and&quot;</span><span class="p">,</span><span class="s2">&quot;it&quot;</span><span class="p">,</span><span class="s2">&quot;looks&quot;</span><span class="p">,</span><span class="s2">&quot;cool&quot;</span><span class="p">,</span><span class="s2">&quot;too&quot;</span><span class="p">)</span>
</span><span class='line'> <span class="c1">#=&gt; [&quot;and&quot;, &quot;it&quot;, &quot;looks&quot;, &quot;cool&quot;, &quot;too&quot;] </span>
</span><span class='line'>
</span><span class='line'><span class="c1">#splat as last argument</span>
</span><span class='line'><span class="k">def</span> <span class="nf">splat_power</span><span class="p">(</span><span class="n">a</span><span class="p">,</span><span class="o">*</span><span class="n">b</span><span class="p">)</span>
</span><span class='line'>  <span class="o">[</span><span class="n">a</span><span class="p">,</span><span class="n">b</span><span class="o">]</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="n">splat_power</span><span class="p">(</span><span class="s2">&quot;powerful&quot;</span><span class="p">,</span><span class="s2">&quot;stuff&quot;</span><span class="p">,</span><span class="s2">&quot;here&quot;</span><span class="p">)</span>
</span><span class='line'> <span class="c1">#=&gt; [&quot;powerful&quot;, [&quot;stuff&quot;, &quot;here&quot;]] </span>
</span><span class='line'>
</span><span class='line'><span class="c1">#splat as first argument</span>
</span><span class='line'><span class="k">def</span> <span class="nf">splat_power_reversed</span><span class="p">(</span><span class="o">*</span><span class="n">a</span><span class="p">,</span><span class="n">b</span><span class="p">)</span>
</span><span class='line'>  <span class="o">[</span><span class="n">a</span><span class="p">,</span><span class="n">b</span><span class="o">]</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="n">splat_power_reversed</span><span class="p">(</span><span class="s2">&quot;powerful&quot;</span><span class="p">,</span><span class="s2">&quot;stuff&quot;</span><span class="p">,</span><span class="s2">&quot;here&quot;</span><span class="p">)</span>
</span><span class='line'> <span class="c1">#=&gt; [[&quot;powerful&quot;, &quot;stuff&quot;], &quot;here&quot;] </span>
</span></code></pre></td></tr></table></div></figure>


<p></p>

<h3>converts 1D array to a hash</h3>

<p>I think this is the kind of thing that doesn&rsquo;t seem very useful until you get that one rare type of problem where it ends up being perfect for. If you use splat <code>*</code> on an array as the key in a new Hash, it will automatically split the array into key-value pairs and then create the new hash. Note that it only works when you have an array with an even number of elements.</p>

<figure class='code'><figcaption><span>array to hash using splat</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">animals</span> <span class="o">=</span> <span class="o">[</span><span class="s2">&quot;cat&quot;</span><span class="p">,</span><span class="s2">&quot;meow&quot;</span><span class="p">,</span><span class="s2">&quot;snake&quot;</span><span class="p">,</span><span class="s2">&quot;hiss&quot;</span><span class="o">]</span>
</span><span class='line'><span class="no">Hash</span><span class="o">[*</span><span class="n">animals</span><span class="o">]</span> <span class="c1">#=&gt; {&quot;cat&quot;=&gt;&quot;meow&quot;, &quot;snake&quot;=&gt;&quot;hiss&quot;} </span>
</span><span class='line'>
</span><span class='line'><span class="c1">#It first splits the elements into pairs and then creates the Hash: </span>
</span><span class='line'><span class="c1"># [&quot;cat&quot;,&quot;meow&quot;,&quot;snake&quot;,&quot;hiss&quot;] ==&gt; </span>
</span><span class='line'><span class="c1"># [&quot;cat&quot;=&gt;&quot;meow&quot;,&quot;snake&quot;=&gt;&quot;hiss&quot;] ==&gt; </span>
</span><span class='line'><span class="c1"># {&quot;cat&quot;=&gt;&quot;meow&quot;, &quot;snake&quot;=&gt;&quot;hiss&quot;}  </span>
</span></code></pre></td></tr></table></div></figure>



]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Useful Ruby resources]]></title>
    <link href="http://ambertunnell.github.io/blog/2014/06/03/useful-ruby-resources/"/>
    <updated>2014-06-03T22:17:00-04:00</updated>
    <id>http://ambertunnell.github.io/blog/2014/06/03/useful-ruby-resources</id>
    <content type="html"><![CDATA[<p>After being at <i>The Flatiron School</i> for two weeks, I&rsquo;ve come to realize that it&rsquo;s all in the resources. Every task can be done quicker, smarter, and better with the right resources. Considering that, here&rsquo;s an on-going list of awesome resources for the beginning Rubyist that I&rsquo;ve learned about so far. If you know of other great resources not yet included, mention them in the comments! <!-- more --></p>

<h3><a href="http://ruby-doc.org/">Ruby Documentation</a></h3>


<p>Use the documentation! It&#8217;s the best resource you have. If you want to know what a method does, it will almost always say it in the documentation. If not, the method probably doesn&#8217;t exist. (But sometimes it does.) Despite that: Use. The. Documentation.</p>




<h3><a href= "http://www.ruby-doc.org/stdlib-2.0/libdoc/irb/rdoc/IRB.html" target="_blank">IRB</a></h3>


<p></p>

<p>For weeks before Flatiron, I was beginning to learn Ruby. And when I wanted to know what a Ruby method did, I would often open up another ruby doc in a text editor and then puts the result to the terminal. Then, on the first day of class, I learned about IRB! IRB stands for &#8220;interactive ruby,&#8221; and is a tool that interactively executes Ruby code in the terminal. Just key in &#8220;irb&#8221; and Ruby away! Now, every time I&#8217;m unsure of a piece of code, I simply check it in irb! Such a time-saver!</p>




<h3><a href= "https://rubygems.org/gems/pry" target="_blank">Pry</a></h3>


<p></p>

<p>Also extremely useful is the RubyGem Pry. Unlike IRB which is great to check a basic piece of syntax, Pry can actually be run in your program and will tell you what piece of information it receives every step of the way. It&#8217;s crazy useful, and if you are a Ruby developer, an absolute must in debugging.</p>




<h3><a href= "http://www.rubular.com/" target="_blank">Rubular.com</a></h3>


<p>If you know anything about Ruby, you&#8217;ll know about Regular Expressions (aka &#8220;Regex&#8221;). And if you know anything about Ruby, I&#8217;m sure you have a love-hate relationship with them. Ruby is fondly know as being fairly English-y and intuitive, but I don&#8217;t really consider things that look like this English:</p>


<p style="text-align: center">/\A[a-z]+&#46;*[a-z]*@{1}[a-z]+&#46;[a-z]+&#46;*[a-z]*\z/</p>


<p>Regexs are extremely powerful in Ruby, because they let you manipulate data in a very complicated yet precise way. But, often they are long and cumbersome. Enter Rubular! In Rubular, you can build your regexs interactively with the data you are trying to manipulate, and conversely, immediately determine what data an already-constructed regex is trying to gather. It&#8217;s truly priceless for a dedicated Rubyist.</p>



]]></content>
  </entry>
  
</feed>