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

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

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