6.14 Mapp an Array

Another very useful and powerful method we have in JavaScript is the map method. With this method we can map each element of the array onto something else. So, following the example of the last video, we have an array of positive numbers, let's say that we want to build some HTML markup, using the elements of this elements of this array. So we call the constant filterd.map and again, we have to pass a again, we need to pass a call back function here. This function, just like the function we passed to the method, can have three parameters. Value, index and array. So, in this case, once again, we're going to work only with the value so that we can pass a function or an arrow function. So we get some number of html markup. So we can add a string, with a list element li. Then we add the number, and finally the closing list item. So, with this markup, we can display each number with a bullet. Of course, we have to put them inside an ul element, and I'll show you that in a moment. So let's see the result of the map method. I'll store the result in a constant called items, and now let's display this on the console. So you can see that each number is now mapped to a string, this is our list item. So now we have an array of strings, we can use the Join method that you learned earlier earlier to join the elements of this array and create a string. So, constant, html, we set it on items.join, and then display it on the console. Now, instead of an array, we have a string. Note that by default, the comma as a separator, we don't want to have commas in our html markup, we just want to combine them using a just want to combine them using a blank character like this. Save the changes, now the comma is disappeared, the only that remains is the ul element. So the very simple implementation would be like this, you add ul and then concatenate it with all these elements and then another ul. Save the changes and here is our html markup to display all these numbers using bullets. Later in the course, I'll show you a more elegant way to elegant way to implement the same thing, all I want you to take away from this video you to take away from this video is that we can use the map method to map each element of an array into something else. Now, in this example, you map these numbers to strings, but you can also map them to to objects, so let me show you another example. So I'm going to delete this htm. Instead of mapping a number to a string, let's say you want to map it to an object. So here I'm going to define an object, in this object, we want to have a value property and set it to this number. And finally, you want to return this object. Let's take a look at the result. Here, I made a mistake, I deleted the html constant and that's why we get this error. The HTML is not defined. So let's display the constant item. Now here is the result of our map. We have mapped each number to an object with a value property. So very useful when creating applications. Now, let me show you something tricky here, in our call function tricky here, in our call back function, we declare this constant and then return it. Technically, we don't need to declare this as a constant, we can just put the return keyword in here and return this object. Because we're not working with this constant, with this object constant, So, save the changes, you still get the same result, That's it for this video on how to map an array in JavaScript, let's meet again for a next video where we'll see the reduction of an array.