Five powerful JavaScript array methods.
Tags: javascript, node, webdev
Published: 2020-06-08 19:22:36

Full article can be found <a href="https://taslangraham.com/2020/02/03/five-powerful-javascript-array-methods/">here</a>.
<!-- wp:paragraph -->
<p>Arrays are very common data structures in programming and is supported by many modern programming languages. In general, an array is collection of items stored at contiguous memory locations. Is most programming languages, these items are the same type. However, In JavaScript, elements stored within an array does not have to be of the same type.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>JavaScript provides a vast number of methods that can be performed on arrays. In this article I'll discuss five methods that can improve the way you use arrays in JavaScript. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Creating an array in JavaScript</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>JavaScript allows you to create an array in two different ways.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Method 1</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>let arr = new Array();</code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Method 2</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><code>let arr = [] </code></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Both methods does the same thing, however, for execution speed, simplicity and readability, use the second method(the array literal method). </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Array Methods</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now let's look at five powerful JavaScript array methods. Using these methods will definitely improve your codes readability and speed.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>we'll use the following array in our examples:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":262,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://taslangraham.files.wordpress.com/2020/02/movies-array-1.png?w=1024" alt="" class="wp-image-262"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This is an array that holds an object at each index,</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>filter() method</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <strong>filter()</strong> method creates a <strong>new array</strong> containing all the elements that passes the test implemented by the callback function provided in the <strong>filter()</strong> method. Let's take a look.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":263,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://taslangraham.files.wordpress.com/2020/02/array-filter.png?w=1024" alt="" class="wp-image-263"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Inside the callback function, the <code>ticketPrice </code>of each array element in checked to see if it is less than 100. If the callback function returns <code>true</code> then this element is added to the new array.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>map() method</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>With the <strong>map()</strong> method a function is called once for each element in the array. The results from the function called is used to create a new array.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The <strong>map()</strong> method can be useful when you want to create a new array using values from an existing array or you want to extract specific values from within an array.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's say we want to get the name of every movie. We'd do the following.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":265,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://taslangraham.files.wordpress.com/2020/02/array-map.png?w=1024" alt="" class="wp-image-265"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Inside the callback function which is executed for each element in the movies array, we return the name of the movie found at each element. This is then stored inside the <code>movieNames array</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>find()</strong> <strong>method</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <strong>find()</strong> method returns the value of the first element in an array that passes a test (provided as a function[callback]).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>What if we wanted the information for the movie Queen &amp; Slim? We'd do the following.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":267,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://taslangraham.files.wordpress.com/2020/02/array-find.png?w=1024" alt="" class="wp-image-267"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The <strong>find()</strong> method will return the value of the first array element that the callback function returns a <em>true</em> value for. Once a <em>true</em> value is returned, it does not check the remaining elements within the array.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>forEach() method</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>forEach()</strong> method works similarly to a for-loop and can be used instead of a for-loop. A function is called once for each element of the array. You can then perform any kind of operation on the elements of the given array.  The <strong>forEach()</strong> method is different from the previous methods in that it does not create a new array.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's loop through the movies array and print the name of each movie.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":269,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://taslangraham.files.wordpress.com/2020/02/array-foreach.png?w=1024" alt="" class="wp-image-269"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Using the <strong>forEach()</strong> method makes it much easier and cleaner to loop through an array.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><strong>reduce() method</strong></h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The <strong>reduce()</strong> method executes a <strong>reducer</strong> function (that you provide) on each element of the array, resulting in a single output value which is stored in an <strong>accumulator</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>What if we wanted to calculate the total of all movie ticket price (ticketPrice)? You could loop through the array using a for-loop or a forEach() and sum the ticketPrice of all element in the array. However, you could do this in a much easier way using the <strong>reduce()</strong> method. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is how it is done.</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"ids":[272]} -->
<figure class="wp-block-gallery columns-1 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://taslangraham.files.wordpress.com/2020/02/array-reduce-1.png?w=1024" alt="" data-id="272" data-link="https://taslangraham.com/array-reduce-1/" class="wp-image-272"/></figure></li></ul></figure>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>The <strong>reducer</strong>&nbsp;function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The <code>0</code> is the initial value given to the <code>accumulator</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There you have it, five methods that will without a doubt improve the way you use arrays in JavaScript. Using the filter(), map(), find(), forEach() and reduce() method on your arrays will allow you to do more with less code and great efficiency.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading! Until next time, Think, Learn, Create, Repeat!</p>
[View original post](https://taslangraham.com/2020/02/03/five-powerful-javascript-array-methods/)


<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Sources</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>https://www.w3schools.com/jsref/jsref_obj_array.asp</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>https://www.geeksforgeeks.org/javascript-array-map-method/</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>https://www.geeksforgeeks.org/javascript-tutorial/#array</p>
<!-- /wp:paragraph -->
<a href="https://www.buymeacoffee.com/taslan" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>