(public).sospep.subjects ~ view article ~ JavaScript-Array-Methods

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

~ view article ~ Chapter] ch-005-features FROM [ Book] language-javascript IN [ libraries] technology-developer-www