edit-article

Article Name:

Article Description:

Chapter ID/Name:

Status:

Add Photo:

Owner ID:

Content: use HTML Edit Content

<h1 style="text-align: center;">native JavaScript Array method - Array.map()</h1>
<h2>[WHAT]</h2>
<ol>
<li>[] by Don Sagrott, founder @ sospep.com - the Array.map() function can be used to create a copy of an existing (source) array with elements that meet a given condition that is specified in the callback function that is passed into the map<strong></strong></li>
<li>[] <strong>generates a new array</strong> based on an existing array,</li>
<li>[] 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>[] returns the new array</li>
</ol>
<h2><strong>[WHY]</strong></h2>
<ol>
<li>[] this article is intended to be a quick 1 page reference to the array method Map</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>[] using the Array.Map() method VS using ] 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 for each of the covered Array Methods</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>
<li>[] var cars = ["corvette", "camaro", "mustang", "charger", "GTR"] ;&nbsp;<strong></strong></li>
<li><strong>[] - EXAMPLE -</strong>&nbsp;lets create a new array of car objects from our cars array</li>
</ol>
<div>
<p>Cars = cars.map( function(element, index){</p>
<p>&nbsp; return {modelname:element};</p>
<p>} )</p>
<p>// [ { modelname: Corvette},{ modelname:Camaro}, { modelname:Mustang}, { modelname:Charger},{ modelname: GTR} ]</p>
</div>
<h2>[HOW-TO]</h2>
<ol>
<li>[] use map - to create a new array of car "objects", based on the car names in the original array,</li>
</ol>
<h2>[REFERENCE]</h2>
<ol>
<li>[] # # - <a href="/view/task?id=7401" target="_blank">CREATE-article#</a> 5764 (this)</li>
<li>[] # # - MDN - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" target="_blank">Array.prototype.Map()</a> -</li>
</ol>
<h2>[RELATED]</h2>
<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>[] # 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>[] # 5772 - <a href="/view/article?id=5772" target="_blank">Array.reduce()</a></li>
<li>[] # # - Array.filter()</li>
<li>[] # # - Array.find()</li>
</ol>