If this is the first you are reading 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.
--
-
From The Mozilla Documentation, The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
- -
From The Mozilla Documentation, The forEach() method executes a provided function once for each array element.
- -
+ +
From The Mozilla Documentation, The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
+
+ From The Mozilla Documentation, The forEach() method executes a provided function once for each array element.
+
These definitions aren't great, simply put both these methods execute a call back function on each item in an array.
-+
So, to understand the mechanics of these array methods we start first have to start with an array.
-+
Now let's run each method on the array as followed...
-+
Here's the map() method in action
- +
Here's the forEach() method in action
Upon basic execution, both map() and forEach() return the same results and perform the same task.
- +
Now it's time to go a little deeper...
-+
So both both map() and forEach() provide three parameter variables in their call back function. I've named them item, index, array, but feel free to give them any name you (pro tip: refer to the MDN documentation for the proper naming convetions).
We've seen the item variable in action, now lets look at the index variable for these methods.
@@ -83,7 +46,7 @@ Here's the map() method in action returing it
And, here's the forEach() method in action returing it's index variable parameter
-
+
Same results...
Here's the map() method in action returing it's array variable parameter
@@ -91,10 +54,8 @@ Here's the map() method in action returing it
And, here's the forEach() method in action returing it's array variable parameter
Again, they return the same results...
- Say, what's going on here? Why do we have two methods that so far do exactly the same thing?
-
Let's keep digging...
-
+
At this point, I'll say about these methods its not what they do that makes them different, but its how they are used that seperates them.
Let's explore
@@ -116,9 +77,9 @@ Here's another example. Lets see what happens when we set each of these meth
The reason forEach() returns undefined when set to a variable is because it executes a call back once on each item to an array.
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.
Unlike forEach(), the map() method creates a new array on execution, so setting it to a variable will simply return the items recreated as a new array.
- 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 function and there purpose on a deeper level.
+ As of right now, that's all I have to say about these array methods by making a comparision I hope I've demonstrated how they function and their purpose on a deeper level.
If you have any question feel free to make a pull request on this repo and commit your questions.
- This site is also suplemental material for an article I wrote on the subject called The power of the map method
+ This site is also supplemental material for an article I wrote on the subject called The power of the map method.
forEach() method in action returing it's index variable parametermap() method in action returing it's array variable parametermap() method in action returing it
And, here's the forEach() method in action returing it's array variable parameter
Again, they return the same results...
-Say, what's going on here? Why do we have two methods that so far do exactly the same thing?
-Let's keep digging...
-+
At this point, I'll say about these methods its not what they do that makes them different, but its how they are used that seperates them.
Let's explore
@@ -116,9 +77,9 @@Here's another example. Lets see what happens when we set each of these meth
The reason forEach() returns undefined when set to a variable is because it executes a call back once on each item to an array.
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.
Unlike forEach(), the map() method creates a new array on execution, so setting it to a variable will simply return the items recreated as a new array.
- 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 function and there purpose on a deeper level.
+ As of right now, that's all I have to say about these array methods by making a comparision I hope I've demonstrated how they function and their purpose on a deeper level.
If you have any question feel free to make a pull request on this repo and commit your questions.
- This site is also suplemental material for an article I wrote on the subject called The power of the map method
+ This site is also supplemental material for an article I wrote on the subject called The power of the map method.
forEach() returns undefined when set to a variable is because it executes a call back once on each item to an array.forEach(), the map() method creates a new array on execution, so setting it to a variable will simply return the items recreated as a new array.