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

<h1 style="text-align: center;">native JavaScript Array method - Array.reduce()</h1>
<h2>[WHAT]</h2>
<ol>
<li>[] by Don Sagrott, founder @ sospep.com - the Array.reduce() function can be used to create a single value from an array.</li>
<li>[] it generates the new value based on an existing array and&nbsp;</li>
<li>[] takes a callback function as an arguement,</li>
<li>[] that walks through each item of the array and executes the given callback function on each element</li>
<li>[] returns the new value</li>
</ol>
<div>
<p style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">&nbsp;</p>
</div>
<h2><strong>[WHY]</strong></h2>
<ol>
<li>[] this article is intended to be a quick 1 page reference to the array method Map [] along with a<strong> simple explanation</strong> of the method [] and a <strong>simple code example</strong> ( with context )</li>
<li>[] totals , subtotals, counts,&nbsp;</li>
</ol>
<h2>[WHERE]</h2>
<ol>
<li>[] <span style="display: inline !important; float: none; background-color: #ffffff; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">your array has a component element that you would like the cumulative value of, ex countTotal, costTotal, ...&nbsp;</span></li>
</ol>
<h2>[WHEN]<span style="font-size: xx-small;">&nbsp;</span></h2>
<ol>
<li>[] 2019-12-10-&nbsp;</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;<strong></strong></div>
<ol>
<li>[] we will count the number of characters in each element in the array, and then return the value of the total # of characters in all names</li>
</ol>
<div>const reducer = (accumulator, currentValue) =&gt; accumulator + currentValue.length;</div>
<div>
<p style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">console.log(cars.reduce(reducer,0));</p>
</div>
<div>
<p>// 31</p>
</div>
<h2>[HOW-TO]</h2>
<ol>
<li><strong>[] reduce an arrary of a single type</strong></li>
<li>[] create a reducer function that will be passed to the Array.reduce() function</li>
<li><span style="display: inline !important; float: none; background-color: #ffffff; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">const reducer = (accumulator, currentValue) =&gt; accumulator + currentValue.length;</span></li>
<li><span style="display: inline !important; float: none; background-color: #ffffff; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">[]&nbsp;<br /></span></li>
<li>[!*] passed the start index in the&nbsp;</li>
<li><strong>[] reduce an object.property contained in an array of objects</strong></li>
<li>[]&nbsp;</li>
</ol>
<div>--&nbsp;</div>
<div><ol style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">
<li>[] use forEach - to iterate the example cars array and modify it by capitalizing the first letter of each car name listed in the array</li>
<li>[] in the example we pass an anonymous function as a callback to the forEach method</li>
<li>[] <strong></strong>the arguements (element and index) are provided by the forEach method and refer to the individual array element that is passed and the array index value,</li>
<li>[] you can name these arguements whatever you like ( ele, idx), ( car, i )</li>
<li>[] REMEMBER the forEach methods given callback operates on the original array, so any changes made will permanently alter the original data</li>
</ol><strong></strong><em></em></div>
<h2>[REFERENCE]</h2>
<ol>
<li>[] # # - <a href="/view/task?id=7401" target="_blank">CREATE-article#</a> 5772 (this)</li>
<li><span style="display: inline !important; float: none; background-color: #ffffff; color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">[] MDN - </span><a style="color: #0066cc; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: underline; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce" target="_blank">Array.prototype.reduce()</a><strong></strong><em></em></li>
</ol>
<h2><strong>[RELATED]</strong></h2>
<ol>
<li>[] # 5763 - <a href="/view/article?id=5763" target="_blank">Array.forEach()</a></li>
<li>[] # 5764 - <a href="/view/article?id=5764" target="_blank">Array.map()</a>&nbsp;</li>
<li>[] # # - Array.filter()</li>
<li>[] # # - Array.find()</li>
</ol>
<div><hr /></div>
<div>
<h2 style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 1.5em; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">reduce()&nbsp;</h2>
<p style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"><strong>&gt; The main difference between 'reduce' and 'filter' is that ...</strong></p>
<p style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">- note the different args provided for the reduce method&nbsp;</p>
<p style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">- "The&nbsp;sum&nbsp;is the last returned value of the reduce function. For example initially the sum value will be&nbsp;0&nbsp;then when the callback runs on the first element it will add the elem to the sum and return that value. On second iteration the sum value will be&nbsp;first elem + 0, on third iteration it will be&nbsp;0 + first elem + second elem.&nbsp;"</p>
<p style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;"><strong>- EXAMPLE -</strong>&nbsp;lets get a total count of the number of cars that begin with the letter C</p>
<p style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">var countcCars = cCars.reduce( function(sum, element){</p>
<p style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">&nbsp; return sum += 1 ;</p>
<p style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">} )</p>
<p style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">// 3</p>
<strong></strong><em></em></div>

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