edit-article

Article Description: JavaScript-Array-Methods-forEach - by Don Sagrott, founder @sospep.com - using the native JavaScript array method of forEach 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;">native JavaScript Array method - Array.forEach()</h1> <h2>[WHAT]</h2> <ol> <li>[] by Don Sagrott, founder @ sospep.com -<strong></strong></li> <li>[] very similar to a for loop, BUT takes a callback function as an arguement,</li> <li>[] walks through each item of the array and executes the given callback function on that element</li> <li>[] forEach method modifies the original array with the specified callback functionality</li> </ol> <h2>[WHY]</h2> <ol> <li>[] this article is intended to be a quick 1 page reference to the array method forEach</li> <li>[] along with a<strong> simple explanation</strong> of the method</li> <li>[] and a <strong>simple code example</strong> ( with context )</li> <li>[] of using the foreEach VS a for loop - we dont have to write/manage the index code,</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> <li>[] 2019-11-23- updated, split into individual articles</li> </ol> <h2>[EXAMPLE]</h2> <ol> <li>[] The Array we will be working with is named 'cars' and is defined below. It contains a list of car model names, each array element is a "string" value and there are 5 initial elements.</li> </ol> <p>var cars = ["corvette", "camaro", "mustang", "charger", "GTR"] ;</p> <ol> <li>[] forEach element in the array, we will modify the element by capitalizing the first letter of each car name that is currently in the array</li> </ol> <div> <p style="text-align: left;">cars.forEach( function(element, index){</p> <p style="text-align: left;">&nbsp; element.<span class="pln" 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;">charAt</span><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;">(</span><span class="lit" 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: #7d2727;">0</span><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;">).</span><span class="pln" 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;">toUpperCase</span><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;">()</span><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;">+</span><span class="pln" 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 class="pln" 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;"><span style="color: #101094;">element</span></span><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;">.</span><span class="pln" 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;">slice</span><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;">(</span><span class="lit" 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: #7d2727;">1</span><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;">);</span></p> <p style="text-align: left;">})</p> <p style="text-align: left;">console.log(cars);</p> <p style="text-align: left;">// [ Corvette, Camaro, Mustang, Charger, GTR ]</p> </div> <h2>[HOW-TO]</h2> <ol> <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> <h2>[REFERENCE]</h2> <ol> <li>[] # # - <a href="/view/task?id=7401" target="_blank">CREATE-article#</a> 5763 (this)</li> <li>[] MDN - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" target="_blank">Array.prototype.forEach()</a> -</li> </ol> <h2><strong>[RELATED]</strong></h2> <ol> <li>[x] # # - JavaScript Array Methods - overview article describing some of the most commonly used JavaScript Array methods</li> <li>[x] # 5764 - <a href="/view/article?id=5764" target="_blank">Array.map()</a></li> <li>[x] # 5772 - <a href="/view/article?id=5772" target="_blank">Array.reduce()</a></li> <li>[x] # # - Array.filter()</li> <li>[x] # # - Array.find()</li> </ol>