map Array Method | JavaScript Tutorial

the array map method executes a given function on every elements from an array and returns a new array this sounds complicated so let's see an example of how this works we can for example call a function on this numbers array which is an array of numbers from 1 to 5 and we can multiply all the numbers from the array let's see how we're going to do that so map and we need to provide a callback function as we did for the for each method so let's write it here double for example which takes in again 3 parameters the current value the index and the array so let's have the value the index and the array although we're not going to use the indexing array in this example but it's just for you to see that you can access it if you need it so double what we want to do here is to return value times 2 so the value will be all the numbers from the array and we want to return double that number we can take this and put it as a callback function on the map let's see what happens now with the numbers array and look at that the array is not changed why is that well because the map function doesn't change the array which is called upon it will create a new array and it will return it so we can create a new array numbers double for example and store that return from the map and now we can see numbers double will be all the numbers doubled let's also create a function for example where we're going to multiply the value by the index so you can see that the index is working multiplied or something like that value index and array and we're going to return value times index index first will be 0 then 1 2 3 & 4 and now let's pass in this as the callback function for the map we can even remove this so it won't bother us let's leave this as numbers double it's okay now you can see we get 0 because 0 times 1 is 0 here we get 2 as 2 times 1 is 2 2 times 3 6 this is 12 and this is 20 so that's perfect all right this is an interesting example so let's work on some more realistic challenges I'm going to swap this out with an array of objects and here we're going to have an array of products so let's give it a name of laptop for example we're going to have a price 1000 and we're going to have a count so how many laptops we want in a store for example and we have 5 let's give another one desktop price for example 1500 and count would be too and the last one named own price would be 500 and count will be bad and now what we want is to see what is the value of the product so for example here we want to see what's the total worth of all the laptops we have we're going to let's change this to product and here we're going to change it to the total products value or something like that and now this function let's remove it and we can also create an arrow function here which will take in the value or let's call it item so better okay and what you want to return is the item that price keep in mind that now the item is the object from the products array and you want to return item price times item that count and now we're going to console a glog the total product value I forgot to change numbers let's change this to product and let console that clear this alright and now you can see that we have five thousand here because we have five laptops worth one thousand we have one thousand five hundred times two which is three hundred three thousand and so on this is one example you can have you can go even further and here instead of returning the multiplication you can keep the name and add another property of total or something like that let's do that we're going to return an object like this so we're turning a new object where the name will be the item that name so we're keeping the name from the object and the total value will be the multiplication of the price and the count now if we're saving this we'll get an array of objects where we have the laptop we have the names and we have the total value is pretty cool or another interesting example on using the map function let me remove this and clear everything console that clear okay we can convert an array of string numbers to an array of numbers let's see numbers here instead of having like one two three four we're going to have one two three and four this is something we might get from a function for example and we need to convert the array of strings into an array of numbers and you can do that using the map let's call this actually strings or STR and now numbers will be STR times map and we can pass in the number constructor which will basically do something like let's say we have item and we're calling number of item so this is the same thing we can just pass in number and now we click on so that log numbers will get an array of numbers all right I hope you enjoyed these examples and you liked this tutorial and I'll see you in the next tutorial bye [Music]

Channel: Florin Pop

Views: 19,965

Rating: 4.965167 out of 5

Keywords: javascript, javascript tutorial, javascript tutorial for beginners, array method, javascript arrays, higher order function, learn javascript, javascript array methods, map, JavaScript map, map array method, learn map, map HOF

Id: P4RAFdZDn3M

Length: 7min 13sec (433 seconds)

Published: Thu Apr 02 2020