edit-article
Home
Up
Delete
Article Name:
Article Description:
JavaScript-Array-Methods-Reduce - by Don Sagrott, founder @sospep.com - using the native JavaScript array method of reduce to manipulate your JavaScript arrays. The reduce method returns a single value from an array
Chapter ID/Name:
Status:
Write
Writing
Written
Add Photo:
Owner ID:
Content:
use HTML
Edit Content
<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 </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;"> </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, </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, ... </span></li> </ol> <h2>[WHEN]<span style="font-size: xx-small;"> </span></h2> <ol> <li>[] 2019-12-10- </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. </li> </ol> <div>var cars = ["corvette", "camaro", "mustang", "charger", "GTR"] ; <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) => 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) => 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;">[] <br /></span></li> <li>[!*] passed the start index in the </li> <li><strong>[] reduce an object.property contained in an array of objects</strong></li> <li>[] </li> </ol> <div>-- </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> </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() </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>> 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 </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 sum is the last returned value of the reduce function. For example initially the sum value will be 0 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 first elem + 0, on third iteration it will be 0 + first elem + second elem. "</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> 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;"> 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>