Array Methods in JavaScript | Tiffany R. White Blog

Array Methods in JavaScript

Reading time: 3 mins

<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>.



No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.




Webmentions 0

No webmentions were found.