You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is a simple demonstration on how to use ```map()``` and ```forEach()``` methods in javascript. and explaination of how they work, and a comparission between these two array methods.
4
+
5
+
## Motivation
6
+
7
+
## Build status
8
+
9
+
## Installation
10
+
11
+
12
+
13
+
14
+
15
+
2
16
3
17
This code compares how **.map** and **.forEach** handle the same set of data. The intention of comparison is to discover how .map works on a deeper level. I wrote a full article detailing what I discovered on Medium.com. [Click here to read the full article](https://medium.com/@petertumulty/the-power-of-the-map-method-4db6b1a73655)
console.log('Using .map, array[index] returns the same out put as value.');
30
-
console.log('------------');
31
-
console.log("Why bother having a .map and a forEach? Why not just have one or the other? ");
32
-
console.log("As you can see that both the forEach and .map both take in three arguments and do exactly the same thing. So there really isn't a need for both, right? Ah not necessarily...")
33
-
console.log('------------');
34
-
console.log(data.forEach(TransformArray));
35
-
console.log("The undefined you are seeing above occurs because we are trying to run the TransformArray function on the data in the forEach.");
36
-
console.log("Why doesn't this work? It doesn't work because the forEach method is simple and only spits back what you put in. The callback function inside the forEach method is designed to only spit back the data you put in it.")
37
-
console.log(data.map(TransformArray));
38
-
console.log("The data you are seeing is when you run the TransfromArray function inside the .map parameters. It works because the callback function inside the .map parameters is designed for the data being passed in it to be mutuble.");
12
+
console.log(t);
39
13
40
-
});
41
-
});
14
+
// adding the results of the map method over my array to HTML
<h1>What's the difference between map() and forEach()</h1>
47
+
<hr/>
48
+
</header>
49
+
<main>
50
+
<h2>If this is the first you are heading about these array methods. Let me give you a quick defintion of each of these methods and their purpose, before we dig a little deeper.</h2>
51
+
<br/>
52
+
<br/>
53
+
<h2style="text-align: left;">From <ahref="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">The Mozilla Documentation</a>, <spanclass="seoSummary">The <code><strong>map()</strong></code> method <strong>creates a new array</strong> populated with the results of calling a provided function on every element in the calling array.</span></h2>
54
+
<br/>
55
+
<h2style="text-align: left;">From <ahref="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">The Mozilla Documentation</a>, <span>The <code><strong>forEach()</strong></code> method executes a provided function once for each array element.</span></h2>
56
+
<br/>
57
+
<br/>
58
+
<h2>These definitions aren't great, simply put both these <u>methods execute a call back function on each item in an array.</u></h2>
59
+
<br/>
60
+
<h2> So, to understand the mechanics of these array methods we start first have to start with an array.</h2>
<h2>Upon basic execution, both <code><strong>map()</strong></code> and <code><strong>forEach()</strong></code> return the same results and perform the same task.</h2>
73
+
<br/>
74
+
75
+
<h2>Now it's time to go a little deeper...</h2>
76
+
<br/>
77
+
<h2>So both both <code><strong>map()</strong></code> and <code><strong>forEach()</strong></code> provide three parameter variables in their call back function. I've named them <code>item, index, array</code>, but feel free to give them any name you <small><u>(pro tip: refer to the MDN documentation for the proper naming convetions)</u></small>.</h2>
78
+
<h2>We've seen the <code>item</code> variable in action, now lets look at the <code>index</code> variable for these methods.</h2>
79
+
80
+
<h2> Here's the <code><strong>map()</strong></code> method in action returing it's <code>index</code> variable parameter</h2>
<h2>Why <code><strong>forEach()</strong></code> returns <code>undefined</code> is because by nature this method restricts any modification to the elements inside of the array. The method only allows <code>read only</code> access to the items in the array.</h2>
111
+
112
+
<h2>Here's another example. Lets see what happens when we set each of these methods to a variables</h2>
<h2>The reason <code><strong>forEach()</strong></code> returns <code>undefined</code> when set to a variable is because it executes a call back once on each item to an array.</h2>
116
+
<h2>So there is a conflict of usage when setting that callback execution to a variable. The browser doesn't know how to interpret one variable set to the results of a callback on each item. </h2>
117
+
<h2>Unlike <code><strong>forEach()</strong></code>, the <code><strong>map()</strong></code> method creates a new array on execution, so setting it to a variable will simply return the items recreated as a new array.</h2>
118
+
<h2>As of right now, that's all I have to say about these array methods by making a comparission I hope I've demostrated how they functio and there purpose on a deeper level.</h2>
119
+
<h2>If you have any question feel free to <ahref="https://github.com/ptums/using-javascript-map-foreach-method">make a pull request</a> on this repo and commit your questions.</h2>
120
+
<h2>This site is also suplemental material for an article I wrote on the subject called <ahref="https://medium.com/@petertumulty/the-power-of-the-map-method-4db6b1a73655">The power of the map method
0 commit comments