Array Methods in JavaScript

<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=&quot;kd&quot;>var</span> <span class=&quot;nx&quot;>jsGreet</span> <span class=&quot;o&quot;>=</span> <span class=&quot;nx&quot;>greetArr</span><span class=&quot;p&quot;>.</span><span class=&quot;nx&quot;>concat</span><span class=&quot;p&quot;>(</span><span class=&quot;nx&quot;>jsArr</span><span class=&quot;p&quot;>);</span>

<span class=&quot;nx&quot;>console</span><span class=&quot;p&quot;>.</span><span class=&quot;nx&quot;>log</span><span class=&quot;p&quot;>(</span><span class=&quot;nx&quot;>jsGreet</span><span class=&quot;p&quot;>);</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>.

Subscribe to Tiffany R. White Blog

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe