Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,290 --> 00:00:02,790 Let's now start seeing 2 2 00:00:02,790 --> 00:00:06,450 the three data transformation methods in practice, 3 3 00:00:06,450 --> 00:00:09,633 starting with the map method in this video. 4 4 00:00:11,440 --> 00:00:14,440 And as we just learned, the map method 5 5 00:00:14,440 --> 00:00:18,690 is yet another way that we can use to loop over a race. 6 6 00:00:18,690 --> 00:00:22,020 But unlike for each, the map method will give us 7 7 00:00:22,020 --> 00:00:24,160 a brand new array 8 8 00:00:24,160 --> 00:00:27,216 and this new array will contain in each position 9 9 00:00:27,216 --> 00:00:30,430 the results of applying a callback function 10 10 00:00:30,430 --> 00:00:33,540 to the original array elements. 11 11 00:00:33,540 --> 00:00:36,310 So let's see how that works. 12 12 00:00:36,310 --> 00:00:40,863 And let's start by bringing back our movements array here, 13 13 00:00:42,400 --> 00:00:47,400 so this one, so we will once more work with these movements. 14 14 00:00:47,410 --> 00:00:52,290 And in this one, we will try to convert them to US dollars. 15 15 00:00:52,290 --> 00:00:55,280 So let's suppose these movements are in euros 16 16 00:00:55,280 --> 00:00:58,830 and we now want to convert them to US dollars. 17 17 00:00:58,830 --> 00:01:02,330 And let's suppose that one Euro is worth $1.1, 18 18 00:01:04,924 --> 00:01:07,400 so let's just store that conversion rate here first 19 19 00:01:07,400 --> 00:01:08,963 to a separate variable. 20 20 00:01:09,990 --> 00:01:14,990 So Euro to USD is 1.1 and so now what we want to do 21 21 00:01:15,550 --> 00:01:18,110 is to basically multiply each element 22 22 00:01:18,110 --> 00:01:21,363 of the movements array by this 1.1. 23 23 00:01:22,320 --> 00:01:27,320 So let's say movements.map, and then just like 24 24 00:01:28,740 --> 00:01:32,620 in a, for each method, we need a callback function. 25 25 00:01:32,620 --> 00:01:36,000 And this callback function also gets as an argument, 26 26 00:01:36,000 --> 00:01:37,850 the current array element. 27 27 00:01:37,850 --> 00:01:40,360 So again just like in a, for each method 28 28 00:01:40,360 --> 00:01:42,000 that we studied before 29 29 00:01:42,000 --> 00:01:43,850 and that's why I said back then 30 30 00:01:43,850 --> 00:01:46,810 that once you understood the for each method, 31 31 00:01:46,810 --> 00:01:48,880 all the other methods will then become 32 32 00:01:48,880 --> 00:01:50,763 a lot easier to understand. 33 33 00:01:51,690 --> 00:01:54,593 So let's call this one here, a Mov one more time. 34 34 00:01:55,550 --> 00:01:57,810 And then here in the callback function 35 35 00:01:57,810 --> 00:02:01,510 we need to return the value that we want the new array 36 36 00:02:01,510 --> 00:02:04,380 to have in the current position. 37 37 00:02:04,380 --> 00:02:09,380 And so in this case, we want the original array 38 38 00:02:10,320 --> 00:02:13,973 times the euro to USD conversion rate. 39 39 00:02:14,980 --> 00:02:18,820 And this will make sense when we now see this result. 40 40 00:02:18,820 --> 00:02:21,830 And so let's actually store it to a variable. 41 41 00:02:21,830 --> 00:02:25,450 So we already know that the map method will return 42 42 00:02:25,450 --> 00:02:26,743 a brand new array. 43 43 00:02:28,110 --> 00:02:30,173 And so we need to store that somewhere. 44 44 00:02:31,030 --> 00:02:35,453 So let's call it movements USD, and then let's log both 45 45 00:02:37,040 --> 00:02:41,893 to the console movements and movements USD, 46 46 00:02:45,200 --> 00:02:47,150 give it a safe and sometimes we need 47 47 00:02:47,150 --> 00:02:48,793 to reload the page as well. 48 48 00:02:50,830 --> 00:02:53,850 But anyway, here is the result. 49 49 00:02:53,850 --> 00:02:56,960 Now, nevermind these multiplication errors here. 50 50 00:02:56,960 --> 00:03:00,200 I'll explain you a little bit later where they come from, 51 51 00:03:00,200 --> 00:03:04,220 but essentially this new value here is now 220 52 52 00:03:04,220 --> 00:03:07,800 which is exactly 200 times 1.1. 53 53 00:03:07,800 --> 00:03:10,920 And so indeed we ended up with a new array 54 54 00:03:10,920 --> 00:03:12,960 containing all the movements 55 55 00:03:12,960 --> 00:03:16,550 but convert it from euros to US dollars. 56 56 00:03:16,550 --> 00:03:19,510 And again that's because that is exactly 57 57 00:03:19,510 --> 00:03:23,060 what we returned here from this callback function 58 58 00:03:23,060 --> 00:03:26,653 we could of course have returned simply something else. 59 59 00:03:27,830 --> 00:03:31,510 So we could have returned simply 23. 60 60 00:03:31,510 --> 00:03:34,763 And so what do you think we will end up in this situation? 61 61 00:03:36,340 --> 00:03:40,070 Well, we now simply have an array of the same length 62 62 00:03:40,070 --> 00:03:43,170 which in each of the position contains 23 63 63 00:03:43,170 --> 00:03:46,800 because that's what we returned from the callback function. 64 64 00:03:46,800 --> 00:03:50,430 And so in each iteration of the original movements array 65 65 00:03:50,430 --> 00:03:55,430 it simply put 23 into the new array at the same position. 66 66 00:03:55,520 --> 00:03:58,090 But of course that's a little bit useless. 67 67 00:03:58,090 --> 00:04:02,770 And so let's go back to the example that we're working with. 68 68 00:04:02,770 --> 00:04:06,103 Great, and of course you can also see 69 69 00:04:06,103 --> 00:04:08,320 that the original movements array 70 70 00:04:08,320 --> 00:04:11,510 was not mutated at all right? 71 71 00:04:11,510 --> 00:04:15,080 And so indeed the map method really only returns 72 72 00:04:15,080 --> 00:04:18,290 in new array with the new elements. 73 73 00:04:18,290 --> 00:04:20,450 And this really is the fundamentals 74 74 00:04:20,450 --> 00:04:22,810 of how the map method works. 75 75 00:04:22,810 --> 00:04:24,070 So we can use this 76 76 00:04:24,070 --> 00:04:28,240 and we will use it in all kinds of different situations. 77 77 00:04:28,240 --> 00:04:31,170 Now, just for fun let's write the same thing here 78 78 00:04:31,170 --> 00:04:36,170 using a for off loop, so we can create another Muff. 79 79 00:04:38,070 --> 00:04:41,500 And then we are looping the movements, of course. 80 80 00:04:41,500 --> 00:04:44,590 And so in this loop, we want to create a new array. 81 81 00:04:44,590 --> 00:04:46,060 And so in this case 82 82 00:04:46,060 --> 00:04:49,183 actually, we first need to create that new array. 83 83 00:04:50,940 --> 00:04:53,333 So let's call it again, movements USD, 84 84 00:04:54,570 --> 00:04:59,570 but then for, so here we first need to define that MTRA 85 85 00:05:01,160 --> 00:05:03,560 and then as we loop over movements 86 86 00:05:03,560 --> 00:05:08,560 we keep pushing a value to the new movements USD for array. 87 87 00:05:12,020 --> 00:05:17,020 So push mov current element times euros to USD, 88 88 00:05:22,680 --> 00:05:24,300 Let's log that as well, 89 89 00:05:24,300 --> 00:05:27,090 and it should look exactly the same, 90 90 00:05:27,090 --> 00:05:29,660 and in fact it does. 91 91 00:05:29,660 --> 00:05:32,470 And so, yeah, we could have written this here 92 92 00:05:32,470 --> 00:05:35,280 and it doesn't look too bad either 93 93 00:05:35,280 --> 00:05:38,300 but it's a completely different philosophy. 94 94 00:05:38,300 --> 00:05:42,510 So here in the map method, we use a function 95 95 00:05:42,510 --> 00:05:46,210 to solve this problem of creating a new array. 96 96 00:05:46,210 --> 00:05:49,710 While here we simply loop over one array 97 97 00:05:49,710 --> 00:05:52,190 and then manually create a new one. 98 98 00:05:52,190 --> 00:05:54,810 So these are completely different philosophies 99 99 00:05:54,810 --> 00:05:57,090 or we can also say paradigms. 100 100 00:05:57,090 --> 00:06:00,780 So this here is more in line with functional programming 101 101 00:06:00,780 --> 00:06:02,700 which is something that I have mentioned 102 102 00:06:02,700 --> 00:06:04,850 a couple of times in this course. 103 103 00:06:04,850 --> 00:06:08,570 And we will talk about it later in greater detail 104 104 00:06:08,570 --> 00:06:11,190 and in modern JavaScript, there is definitely 105 105 00:06:11,190 --> 00:06:15,270 a push going on in the direction of functional programming. 106 106 00:06:15,270 --> 00:06:17,350 So over a more functional language. 107 107 00:06:17,350 --> 00:06:20,070 And therefore in modern JavaScript this here 108 108 00:06:20,070 --> 00:06:21,610 is the way to go. 109 109 00:06:21,610 --> 00:06:24,110 So using methods together with callback functions 110 110 00:06:24,110 --> 00:06:28,023 like this, is the new and modern way of doing stuff. 111 111 00:06:29,690 --> 00:06:32,960 All right, but now let's actually make 112 112 00:06:32,960 --> 00:06:36,600 our callback function here, look a little bit cleaner. 113 113 00:06:36,600 --> 00:06:40,630 So this callback function we can simplify it greatly. 114 114 00:06:40,630 --> 00:06:43,270 So do you remember arrow functions. 115 115 00:06:43,270 --> 00:06:45,920 We could perfectly use an arrow function here 116 116 00:06:45,920 --> 00:06:49,830 and simplified as here into just one line of code. 117 117 00:06:49,830 --> 00:06:51,950 So here is my challenge for you. 118 118 00:06:51,950 --> 00:06:54,420 Do you think that you can do that yourself? 119 119 00:06:54,420 --> 00:06:58,570 So basically replacing this callback with an arrow function 120 120 00:06:58,570 --> 00:07:01,520 take a minute and see if you can do that for yourself. 121 121 00:07:01,520 --> 00:07:03,473 And I'll see you back here in a second. 122 122 00:07:05,690 --> 00:07:10,690 So let's just copy this and then replace this by parts. 123 123 00:07:13,850 --> 00:07:16,820 So first we can remove the function keywords 124 124 00:07:17,970 --> 00:07:21,730 and then replace it with an arrow. 125 125 00:07:21,730 --> 00:07:24,570 Then we can also remove these parenthesis here 126 126 00:07:24,570 --> 00:07:27,400 because there's only one argument. 127 127 00:07:27,400 --> 00:07:31,120 And finally, since we only have one line of code, 128 128 00:07:31,120 --> 00:07:33,800 we can remove the curly braces 129 129 00:07:33,800 --> 00:07:37,650 and we can even remove the return statement. 130 130 00:07:37,650 --> 00:07:39,750 And so this code that we have here now 131 131 00:07:39,750 --> 00:07:42,570 is exactly the same as before. 132 132 00:07:42,570 --> 00:07:44,693 So we can comment out this one here. 133 133 00:07:45,870 --> 00:07:48,360 And of course I'm leaving it here for reference, 134 134 00:07:48,360 --> 00:07:51,370 but as I save it now you see that the result 135 135 00:07:51,370 --> 00:07:52,920 is exactly the same. 136 136 00:07:52,920 --> 00:07:55,710 And so here we now have a nice and clean 137 137 00:07:55,710 --> 00:07:59,350 one liner callback function, just like this. 138 138 00:07:59,350 --> 00:08:03,830 However many people don't like the way that this looks. 139 139 00:08:03,830 --> 00:08:06,850 So they argued that this lacks the function 140 140 00:08:06,850 --> 00:08:09,350 and the return keyword which they say 141 141 00:08:09,350 --> 00:08:11,300 it leads to bad readability. 142 142 00:08:11,300 --> 00:08:13,470 And that it makes this whole thing 143 143 00:08:13,470 --> 00:08:16,130 more difficult to understand. 144 144 00:08:16,130 --> 00:08:19,400 And while I can see that, that might be true. 145 145 00:08:19,400 --> 00:08:22,870 I actually do prefer the fact how much smaller 146 146 00:08:22,870 --> 00:08:25,160 and cleaner this code is. 147 147 00:08:25,160 --> 00:08:27,890 So in my opinion if you understand well enough 148 148 00:08:27,890 --> 00:08:29,990 how the arrow function actually works 149 149 00:08:29,990 --> 00:08:33,500 then you will become familiar with this pretty quickly. 150 150 00:08:33,500 --> 00:08:37,565 And so then there is no problem in writing code like this. 151 151 00:08:37,565 --> 00:08:40,430 Okay, the main thing that you need to keep in mind 152 152 00:08:40,430 --> 00:08:44,860 is that here we are actually returning this value. 153 153 00:08:44,860 --> 00:08:46,570 So you need to remember 154 154 00:08:46,570 --> 00:08:49,363 that this is like writing return here. 155 155 00:08:51,740 --> 00:08:55,560 And so if you understand that, then you're good to go. 156 156 00:08:55,560 --> 00:08:59,700 So I will actually use arrow functions in this situations 157 157 00:08:59,700 --> 00:09:02,380 in the rest of the course, because I believe 158 158 00:09:02,380 --> 00:09:06,170 that they are perfect for these small callback functions. 159 159 00:09:06,170 --> 00:09:08,490 In my opinion they were really developed 160 160 00:09:08,490 --> 00:09:11,000 for this kind of application. 161 161 00:09:11,000 --> 00:09:13,930 But as always, if you do prefer the irregular 162 162 00:09:13,930 --> 00:09:17,890 function syntax then please feel 100% free 163 163 00:09:17,890 --> 00:09:20,450 to keep using them instead. 164 164 00:09:20,450 --> 00:09:23,420 And with that being said, let's now experiment 165 165 00:09:23,420 --> 00:09:26,983 a little bit more and explore the map method some more. 166 166 00:09:28,470 --> 00:09:30,800 So just like to for each method, 167 167 00:09:30,800 --> 00:09:33,470 the math method also has access 168 168 00:09:33,470 --> 00:09:36,320 to the exact same three parameters. 169 169 00:09:36,320 --> 00:09:38,670 So besides the current array element 170 170 00:09:38,670 --> 00:09:41,360 which is this one here, we also get access 171 171 00:09:41,360 --> 00:09:45,240 to the current index as well as the whole array. 172 172 00:09:45,240 --> 00:09:49,460 So let's now use the map method to loop again 173 173 00:09:49,460 --> 00:09:51,170 over the movements array. 174 174 00:09:51,170 --> 00:09:54,600 But this time we're gonna create a string similar 175 175 00:09:54,600 --> 00:09:56,210 to the one step we printed 176 176 00:09:56,210 --> 00:09:59,330 to the console earlier using for each. 177 177 00:09:59,330 --> 00:10:01,363 So let me actually get that logic. 178 178 00:10:02,660 --> 00:10:04,573 And so it's this one here. 179 179 00:10:11,050 --> 00:10:13,800 So let's specify a callback function 180 180 00:10:13,800 --> 00:10:18,180 and indeed now I will actually use an arrow function. 181 181 00:10:18,180 --> 00:10:22,520 And so, as I said, we get access to the current element 182 182 00:10:22,520 --> 00:10:25,950 but also to the index and to the entire array 183 183 00:10:28,520 --> 00:10:31,770 this time we do need a block, at least for now. 184 184 00:10:31,770 --> 00:10:35,100 And then here we have our logic. 185 185 00:10:35,100 --> 00:10:38,890 Now in this case, we will not lock something to the console. 186 186 00:10:38,890 --> 00:10:41,670 So instead we want to return the string 187 187 00:10:41,670 --> 00:10:44,960 so that it then gets put into the new array, 188 188 00:10:44,960 --> 00:10:47,523 that results from the map method. 189 189 00:10:48,860 --> 00:10:51,793 So let's say here movementsDiscriptions 190 190 00:10:55,640 --> 00:11:00,640 so that's a long name, but anyway 191 191 00:11:00,930 --> 00:11:04,473 again, here we do not want to lock something to the console. 192 192 00:11:05,990 --> 00:11:10,190 So we don't want to simply do something with this value. 193 193 00:11:10,190 --> 00:11:13,400 Like we do when we console.log instead 194 194 00:11:13,400 --> 00:11:15,880 we really want to return it. 195 195 00:11:15,880 --> 00:11:20,223 And so that will then place this value into the new array. 196 196 00:11:21,160 --> 00:11:23,006 So let's save that. 197 197 00:11:23,006 --> 00:11:25,000 Let's then also log this 198 198 00:11:25,000 --> 00:11:28,263 to the console movementDescriptions. 199 199 00:11:30,190 --> 00:11:32,550 And so indeed we get to this array 200 200 00:11:32,550 --> 00:11:36,980 with these strings that we previously logged to the console. 201 201 00:11:36,980 --> 00:11:39,880 And by the way it's completely acceptable 202 202 00:11:39,880 --> 00:11:41,860 to have to return statements 203 203 00:11:41,860 --> 00:11:44,280 or even more in the same function 204 204 00:11:44,280 --> 00:11:48,670 as long as only one of them is executed, right? 205 205 00:11:48,670 --> 00:11:51,610 So in this case either this one here is executed 206 206 00:11:51,610 --> 00:11:54,650 or this one, it's impossible for both of them 207 207 00:11:54,650 --> 00:11:57,700 to return at the same time, right? 208 208 00:11:57,700 --> 00:12:01,470 And actually we can even simplify this whole thing here 209 209 00:12:01,470 --> 00:12:04,000 because these two strings are essentially 210 210 00:12:04,000 --> 00:12:08,380 the exact same thing, except for this word here. 211 211 00:12:08,380 --> 00:12:11,687 And so let's do something else here, right. 212 212 00:12:14,310 --> 00:12:17,970 Now you also have this math.absolute value 213 213 00:12:17,970 --> 00:12:21,710 but if the value is already positive as it is here, 214 214 00:12:21,710 --> 00:12:24,660 then that simply makes no difference. 215 215 00:12:24,660 --> 00:12:29,240 And so let's use a ternary operator here, 216 216 00:12:29,240 --> 00:12:33,253 to put either withdrew or deposited right here. 217 217 00:12:34,800 --> 00:12:37,420 And so this has nothing to do with the map method, 218 218 00:12:37,420 --> 00:12:41,270 but yeah, it's a good way to also keep practicing 219 219 00:12:41,270 --> 00:12:44,390 the other skills that we have been learning. 220 220 00:12:44,390 --> 00:12:48,200 So we can check if the movement is greater than zero. 221 221 00:12:48,200 --> 00:12:50,130 So the same condition as here. 222 222 00:12:50,130 --> 00:12:54,210 And if it is then at this part of the string, 223 223 00:12:54,210 --> 00:12:56,300 it should say deposited. 224 224 00:12:56,300 --> 00:13:00,203 And if not, well, then it should say withdrew. 225 225 00:13:02,220 --> 00:13:06,000 And so like this, we built this string all in one go. 226 226 00:13:06,000 --> 00:13:07,960 And so we can get rid of this. 227 227 00:13:07,960 --> 00:13:10,180 We can get rid of this. 228 228 00:13:10,180 --> 00:13:14,680 And so therefore we don't need the return keyword anymore. 229 229 00:13:14,680 --> 00:13:16,423 And so it works just the same. 230 230 00:13:17,670 --> 00:13:21,890 Okay, now, in this case, we don't need this array here. 231 231 00:13:21,890 --> 00:13:23,790 So that's actually also get rid of it. 232 232 00:13:26,090 --> 00:13:29,910 And it's a good idea to keep in mind why we actually 233 233 00:13:29,910 --> 00:13:33,910 get access to these two parameters here. 234 234 00:13:33,910 --> 00:13:37,430 So one more time, all we do here is to pass 235 235 00:13:37,430 --> 00:13:41,930 this callback function into the map method, right? 236 236 00:13:41,930 --> 00:13:44,705 But we do not call this function by ourselves. 237 237 00:13:44,705 --> 00:13:48,230 It is the map method who we'll call this function 238 238 00:13:48,230 --> 00:13:53,230 for each of the array elements in the movement array. 239 239 00:13:53,230 --> 00:13:58,230 Okay, now each time that the map method calls or callback 240 240 00:13:58,300 --> 00:14:01,780 it will simply pass in the current array element as well 241 241 00:14:01,780 --> 00:14:04,690 as the current index and the whole array. 242 242 00:14:04,690 --> 00:14:08,910 And off these three, here we are only using the first two, 243 243 00:14:08,910 --> 00:14:13,370 just the current element and the current index, all right? 244 244 00:14:13,370 --> 00:14:15,500 And with this, I hope that by now 245 245 00:14:15,500 --> 00:14:19,700 it is really crystal clear how this all works. 246 246 00:14:19,700 --> 00:14:23,110 Now you could say, that what we did here 247 247 00:14:23,110 --> 00:14:26,100 with this map method is essentially the same 248 248 00:14:26,100 --> 00:14:28,810 as what we did with the, for each method. 249 249 00:14:28,810 --> 00:14:31,510 But in fact, there is a big, big difference 250 250 00:14:31,510 --> 00:14:33,820 between these two approaches. 251 251 00:14:33,820 --> 00:14:36,860 So before we printed each line individually 252 252 00:14:36,860 --> 00:14:40,330 to the console, as we were looping over the array. 253 253 00:14:40,330 --> 00:14:43,770 So in each of the iterations, we performed some action 254 254 00:14:43,770 --> 00:14:46,160 that was then visible in the console 255 255 00:14:46,160 --> 00:14:48,910 and we can call this a side effect. 256 256 00:14:48,910 --> 00:14:52,480 So the, for each method creates side effects. 257 257 00:14:52,480 --> 00:14:54,940 But now here with this map method, 258 258 00:14:54,940 --> 00:14:56,800 all we did was to return each 259 259 00:14:56,800 --> 00:14:59,550 of the strings from the callback. 260 260 00:14:59,550 --> 00:15:03,200 And so basically they got added into a new array. 261 261 00:15:03,200 --> 00:15:06,430 And then finally we logged that entire array 262 262 00:15:06,430 --> 00:15:09,880 to the console and not the elements one by one. 263 263 00:15:09,880 --> 00:15:12,510 And so here in this map method 264 264 00:15:12,510 --> 00:15:16,270 we did not create a side effect in each of the iteration. 265 265 00:15:16,270 --> 00:15:19,890 All we did was to build a brand new array 266 266 00:15:19,890 --> 00:15:23,780 and this idea of side effects will become important again, 267 267 00:15:23,780 --> 00:15:26,940 as we talk more about functional programming. 268 268 00:15:26,940 --> 00:15:30,340 Great, and this is how the map method works, 269 269 00:15:30,340 --> 00:15:34,030 in the next video, we will see a more practical application 270 270 00:15:34,030 --> 00:15:37,923 of it in the context of our Bankist application. 24433