edit-article

Article Description: JavaScript-Array-Methods - [] by Don Sagrott, founder @sospep.org - using the native javascript array methods of forEach, map, filter and reduce to manipulate your JavaScript arrays

Chapter ID/Name:

Status: Write Writing Written

Add Photo:

Owner ID:

Content: use HTML Edit Content <h1 style="text-align: center;">Javascript Array manipulation methods</h1> <h2>[WHAT]</h2> <ol> <li>[] by Don Sagrott, founder @ sospep.com - this article explains several of the methods that you can use to manipulate arrays in javascript.&nbsp;</li> </ol> <h2>[WHY]</h2> <ol> <li>[] this article is intended to be a quick 1 page reference to the different array methods along with a<strong> simple explanation</strong> of each method and a <strong>simple code example</strong> ( with context )</li> <li>[] for many years, i relied far too heavily on javascripts 'for loop' when perhaps there <strong>a better way to process array data</strong> using one of javascripts built in array methods</li> </ol> <h2>[WHERE]</h2> <ol> <li><strong>[] READ THE FULL ARTICLE</strong></li> <ol> <li>[] see below</li> </ol></ol> <h2>[WHEN]</h2> <ol> <li>[] 2017-10-13</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li>[] The Array we will be working with is defined below and is a list of car model names, each array element is a "string" value and there are 5 initial elements, the array's name is cars.&nbsp;</li> </ol> <div>var cars = ["corvette", "camaro", "mustang", "charger", "GTR"] ; &nbsp;</div> <h2>[HOW-TO]</h2> <ol> <li>[] <a href="/view/article?id=5763" target="_blank">use forEach</a> - to iterate the example cars array and modify it by capitalizing the first letter of each car name listed in the array&nbsp;</li> <li>[] <a href="/view/article?id=5764" target="_blank">use map</a> - to create a new array of car "objects", based on the car names in the original array,&nbsp;</li> <li>[] use filter - to create a new array of only the cars that begin with the letter 'C'</li> <li>[] <a href="/view/article?id=5772" target="_blank">use reduce</a> - to get a total count of the number of characters in all of the modelNames&nbsp;</li> <li>[] use find -&nbsp;</li> </ol> <h2>[REFERENCE]</h2> <ol> <li>[] # 7401 - <a href="/view/task?id=7401" target="_blank">CREATE-article#</a> 5743 (this)&nbsp;</li> <li>[]&nbsp;<a href="https://medium.com/@manojsinghnegi/array-methods-explained-filter-vs-map-vs-reduce-vs-foreach-ea3127c6d319" target="_blank">Array Methods Explained : Filter vs Map vs Reduce vs Foreach</a>&nbsp;</li> <li>[]&nbsp;<a href="http://www.datchley.name/working-with-collections/" target="_blank">.map, .reduce &amp; .filter, Oh My!</a></li> <li>[]&nbsp;<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?v=example" target="_blank">Array.prototype.forEach() - JavaScript | MDN</a></li> <li>[] MDN - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce" target="_blank">Array.prototype.reduce()</a></li> <li>[] += new array methods in es6 - including ] from, ] find, ] findIndex, ] .of, ] for .. of &gt; cc REF 2</li> <li>[] += predicate function, declaritive fluent style,&nbsp;</li> <li>[] += organize your logic into building blocks of functions, and then chain them to create more readable and understandable implementations.</li> </ol> <h2><strong>[ RELATED = ]</strong></h2> <ol> <li>[x] <a href="https://hackernoon.com/what-you-should-know-about-es6-maps-dc66af6b9a1e" target="_blank">What You Should Know About ES6 Maps &ndash; Hacker Noon</a>&nbsp;</li> </ol> <div><hr /></div> <h1 style="text-align: center;">JavaScript's native Array methods</h1> <p>filter()</p> <p style="text-align: left;"><strong>- WHAT -</strong> very similar to the forEach, takes a callback function as an arguement BUT checks the return value for matching callback criteria and returns a seperate array of data</p> <p style="text-align: left;">- returns a new array with a subset of the original arrays elements, subset elements match the given callbacks functionality</p> <p style="text-align: left;"><strong>- WHY -</strong>&nbsp;] remove duplicate elements, ] find elements matching a particular condition, ...</p> <p style="text-align: left;"><strong>- WHERE -</strong></p> <p><strong>&gt; The main difference between 'forEach' and 'filter' is that forEach just loops over the array and executes the callback but filter executes the callback and check its return value.&nbsp;</strong></p> <p>aka it RETURNS a seperate array with elements matching the given criteria in the callback function&nbsp;</p> <p>KIM - the original 'cars' array still remains intact, we have created a second array, with a subset of elements from the original array that match the given criteria provided in our callback function&nbsp;</p> <p>+ ref# 2 -&nbsp;the predicate function you pass to&nbsp;<code>filter()</code>&nbsp;should return either&nbsp;<code>true</code>, to allow that item in the list, or&nbsp;<code>false</code>&nbsp;to skip it.</p> <p style="text-align: left;"><strong>- EXAMPLE - </strong>lets create an array of just the cars whose names start with the letter C</p> <p>var cCars = cars.filter( function(element, index){</p> <p><span style="text-decoration: line-through;"><span class="pun" style="font-family: inherit; font-style: inherit; font-variant-caps: inherit; white-space: inherit; font-size: inherit; margin: 0px; padding: 0px; border: 0px; line-height: inherit; vertical-align: baseline; color: #303336; text-decoration: line-through;">&nbsp; if (element.charAt(0) == 'C' ) return element ; &nbsp;</span></span></p> <p><span class="pun" style="font-family: inherit; font-style: inherit; font-variant-caps: inherit; white-space: inherit; font-size: inherit; margin: 0px; padding: 0px; border: 0px; line-height: inherit; vertical-align: baseline; color: #303336;">&nbsp; </span><span style="color: #303336;">element.charAt(0) === 'C' ;</span><span style="color: #303336;">&nbsp;</span></p> <p>&nbsp;</p> <p>} )</p> <p>// [ Corvette, Camaro, Charger ] &nbsp;</p> <h2>&nbsp;</h2>