The Array map method
One very common operation in programming is to iterate through an Array's contents, apply a function to each item, and create a new array containing the results. For example, let's say you wanted to loop through an array of stock objects and select only the name for display on screen. In this lesson we will demonstrate how to use the Array's map method to easily perform this operation with less code than a loop would require.
[00:00] In the previous video, we learned about the Array's forEach method. The Array's forEach method is really convenient if you want to do something to every item in an Array. Let's take another look at our example here.
[00:12] The getStockSymbols function, its job is to accept an Array of stocks, pull out the symbol from each one of those stocks, and put all of the symbols in an Array and then return it. It turns out that this process of applying some transformation to every item in an Array and then creating an Array to hold all of the results is very common.
[00:32] The Array has a map method that we can use to make this code even shorter. Instead of just using the Array's map method, we're actually going to define it inline, right here, for you so that you can see how it works.
[00:45] The Array's map method is similar to forEach in that it accepts a function. We're going to call this a "projection function." The whole job of this projection function is just to transform the item in the Array into something else.
[00:55] I'm going to write, almost identical, the code above. What we're going to do, the map function is going to create an Array to hold all of the results. This line of code right here is pretty much equivalent to this line of code.
[01:07] In both cases, we need an Array to store the results. Then we're going to use forEach once again. Except this time, I'm going to call this.forEach. The reason why I call this.forEach is that the map method is actually being added to the Array itself. This, in the context of this function, is an Array.
[01:25] I'm going to accept, this closure is going to accept each item in the Array. Then we're going to apply the projection function to the item and add the result to the results Array. Finally, we'll return the results.
[01:43] I want you to notice how this piece of code and this piece of code are very, very similar. There's obviously a pattern here where we create an Array to hold all the results. We use forEach to translate each of the items in the Array. Then we collect up the results into a new Array and then return them.
[02:01] Now, using the Array's map method below, I can comment out this code and rewrite it in a much more terse way. I'm just going to write "stocks.map." I'm going to pass in my projection function, which is going to get passed each stock in the Array. I'm just going to return the stock's symbol.
[02:23] If we run this code right now, we'll see that we get the exact same result. I'm going to go ahead and remove the code that we commented out. Because when I defined this map function I was actually just overriding the map function that's already on the Array, which will do precisely this, I can delete this too.
[02:42] If we do nothing but this and we run, we see once again we get the exact same value. Now we know how map works. Just like forEach, the great thing about map over using a simple for loop is that it will work not only on data that's in memory in an Array. We'll also learn later that it can work on data that arrives asynchronously over time.
Only symbols are in the array.
A very bad example for beginners. However, master doesn't look anything useful. Awful example, can't imagine why and for what i pay the money. W3Schools explains better.
Hi, Could you please explain why: var symbols = getStockSymbols([ ..........]) var is assigned to an array and on line #1 it is function with the same name?
I think you were just tired when watching this and probably figured it out by yourself :) however on the first line you define the function, which accepts an array of stock objects, and finally, you just invoke that function, passing the whole array manually (pretend you are fetching some data from whatever api), and then storing a reference to the symbols array returned from the function in a variable called "symbols" (the "var symbols..." thing you mentioned ).
Hi, I have a question regarding the symbols object. After the function has run has the values in this object been replaced and only contains the symbols, or does it still contain price and volume?