Mapping - JavaScript Tutorial

- [Instructor] The first of JavaScript's built-in array functions we're going to be talking about is called map. Quite often it happens that we have an array of data and we want to convert each of the individual elements in the array to some other form. For example, we might have an array of numbers and we might want to double all the numbers in the array. Or we might want to convert an array of inch measurements to an array of centimeter measurements. Or we might have an array of person objects with name, age, and job attributes, and maybe a lot more data as well. And we want to convert this data into an array that contains only the people's names. The typical way of doing this, and the way that many of us first learned how to do it, was to use a for loop and an index variable to loop through all the elements in the array, and push modified elements onto a new array. Or worse, we just modify the elements in place, which destroys the original data. However, as many of us know, this way can very easily lead to bugs, especially as the body of the for loop gets bigger and more complex. Fortunately for us, JavaScript provides a much easier, cleaner, and more functional way of doing this using its built-in map function that we can call on any array. The way we use map is by calling it on an array and passing it some function we want to apply to each element in the array. Map then returns another array that contains the return values of the function for each element in our original array. So in other words, it takes each element and maps it to the return value of the function we give it. If this function does something like square a number, for example, map will return a new array where each of the numbers has been squared. Now, before we continue there's one important thing to note about the built-in array functions. Some functions like map don't actually change the original array we're calling the functions on. They just return a modified copy. So just calling map on an array, for example, without defining another constant to hold the result, essentially does nothing. But keep in mind also that this is not the case for many other built-in array functions in JavaScript. The reverse function, for example, if we call numbers dot reverse, actually does modify the original array that you call it on. So for example, if we log numbers now, console dot log, numbers, and run our program, npx babel dash node c h zero three, slash zero three, underscore zero three, slash start, slash examples dot js, and run it. We see that reverse has actually mutated our original array, which obviously we don't want. And if you're using ESLint to warn you of unwanted mutation in your code, as we talked about in a previous video, you should be able to guard yourself against this fairly easily. And if you're not using ESLint, well, be careful. So earlier in the video I mentioned a few examples of how map might be used in our programs. Let's go through an example to solidify our understanding of what map looks like in code. Again, the typical procedural way of doing this is something like this. We start off with our numbers array, we create another array, we'll call it doubled numbers and make that an empty array. And then we'll write a for loop that cycles through each element in the array, does something to it, and pushes it on to the new array, like this. For let i equals zero, i is less than numbers dot length, i plus plus, and then doubled numbers dot push, the new element, which will be numbers i, times two. Now this works and it's not necessarily a bad way of doing it but the main problem here is readable and conceptual purity. If we want to double all the numbers in an array, we shouldn't be forced to worry about indexing and array lengths and off by one errors. We should be able to program in a way that allows us to simply specify what it is we want. Instead of how to compute the result. And that's exactly what functional programming allows us to do. Let's look at how we can do the same thing in a functional way. We're going to re-write this functionality using the map function. First we're going to write a function called double. And this function is simply going to take one argument and double it. And all we have to do now is define a new constant. Const, doubled numbers, and call the map function on our numbers array. Numbers dot map. And finally we're going to pass our new double function to map. Because we want to double each element in our array. Let's log this to the console and run our code. Console dot log doubled numbers. And we see that it works beautifully with the added benefit that it's now much easier to read and maintain. We don't have to worry about indexing or exceeding the length of our array since map takes care of all that for us. All we have to think about now is how we want to transform each element in our array and express that in a function like we did with double.