<img src="/images/Methods.jpeg" alt="Methods" />
<h3 id="different-types-of-methods">Different Types of Methods</h3>
There are a few basic methods to work with arrays in JavaScript. The most basic and, perhaps the most familiar, is the <code class="highlighter-rouge">.length()</code> method.
You can get the length of the elements in an array with with this method and a <code class="highlighter-rouge">for</code> loop, which is an iterator/counter loop. For more information about for loops, check <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">here</a>.
An example of iterating through an array with a for loop to find the index of an element:
<div class="language-javascript highlighter-rouge"><pre class="highlight"><span class="kd">var</span> <span class="nx">array</span> <span class="o">=</span> <span class="p">[</span><span class="s2">"Tiffany"</span><span class="p">,</span> <span class="s2">"Cheerios"</span><span class="p">,</span> <span class="s2">"ice cream"</span><span class="p">,</span> <span class="s2">"pig"</span><span class="p">,</span> <span class="s2">"Macbook"</span><span class="p">];</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">array</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">index</span> <span class="o">=</span> <span class="nx">array</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">’Index: ‘</span><span class="p">,</span> <span class="nx">index</span><span class="p">);</span> <span class="p">}</span> </code></pre> </div>
This will list all the elements in the array to the console, as well as an <code class="highlighter-rouge">undefined</code> since I’m not returning a value.
<h4 id="foreach-method">forEach() Method</h4>
Another method worth noting is the <code class="highlighter-rouge">forEach()</code> method which is another iterator and perhaps more syntatic sugar than a for loop. It is worth mentioning that <code class="highlighter-rouge">forEach()</code> has perf costs and for large records and datasets, a <code class="highlighter-rouge">for</code> loop would be a better choice.
An example of a <code class="highlighter-rouge">forEach</code> on an array would look like this:
<div class="language-javascript highlighter-rouge"><pre class="highlight"><span class="kd">var</span> <span class="nx">array</span> <span class="o">=</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">3</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">5</span><span class="p">,</span><span class="mi">6</span><span class="p">,</span><span class="mi">7</span><span class="p">,</span><span class="mi">8</span><span class="p">,</span><span class="mi">9</span><span class="p">,</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">array</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span> <span class="p">});</span> </code></pre> </div>
This does essentially the same thing as a <code class="highlighter-rouge">for</code> loop only it is cleaner and perhaps easier to use.
<h4 id="map-method">map() Method</h4>
This method creates a new method from elements in an old method using a callback function with three arguments: <code class="highlighter-rouge">currentValue</code>, <code class="highlighter-rouge">index</code>, and <code class="highlighter-rouge">array</code>.
You can use <code class="highlighter-rouge">map()</code>to parse an array of objects or return a new array full of different number sets than the previous array. For instance:
<div class="language-javascript highlighter-rouge"><pre class="highlight"><span class="kd">var</span> <span class="nx">even</span> <span class="o">=</span> <span class="p">[</span><span class="mi">2</span><span class="p">,</span><span class="mi">4</span><span class="p">,</span><span class="mi">6</span><span class="p">,</span><span class="mi">8</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">odd</span> <span class="o">=</span> <span class="nx">even</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">num</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">num</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span> <span class="p">});</span> </code></pre> </div>
is something I could use to find and return a new array of odd numbers from an old array of even ones.
<h4 id="concat-method">concat() Method</h4>
This method just concatenates two arrays into one. For instance:
<div class="language-javascript highlighter-rouge"><pre class="highlight"> <span class="kd">var</span> <span class="nx">greetArr</span> <span class="o">=</span> <span class="p">[</span><span class="s2">"Hello"</span><span class="p">,</span> <span class="s2">"World!"</span><span class="p">],</span>
<span class="nx">jsArr</span> <span class="o">=</span> <span class="p">[</span><span class="s2">"Javascript"</span><span class="p">,</span> <span class="s2">"is"</span><span class="p">,</span> <span class="s2">"fun!"</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">jsGreet</span> <span class="o">=</span> <span class="nx">greetArr</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nx">jsArr</span><span class="p">);</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">jsGreet</span><span class="p">);</span> </code></pre>
</div>
This will concatenate the arrays out to look like this: <code class="highlighter-rouge">["Hello", "World!", "Javascript", "is", "fun!"]</code>
While we don’t want the commas in between the words, this gives you a basic idea of what <code class="highlighter-rouge">concat</code> does.
<h4 id="thoughts">Thoughts</h4>
These are just some of my favorite array methods for JavaScript. There are way more and you can find them in the Mozilla <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">docs</a>.
