1 00:00:00,630 --> 00:00:02,750 We've now finished up our processing pipeline. 2 00:00:02,760 --> 00:00:07,620 But before we move on I want to do a little bit of a reflektor to the code inside of you're just to 3 00:00:07,620 --> 00:00:10,880 condense things a little bit and just clean up our code a little. 4 00:00:11,010 --> 00:00:14,790 So we're going to divide this refactor into two different stages. 5 00:00:14,790 --> 00:00:18,930 The first stage is going to be a very small little change that's going to just slightly clean up our 6 00:00:18,930 --> 00:00:25,200 map statement and then the second stage will be a much more significant factor that condenses down all 7 00:00:25,200 --> 00:00:27,570 these different loadout helpers that we're making use of. 8 00:00:27,750 --> 00:00:28,650 So let's get to it. 9 00:00:28,650 --> 00:00:31,640 We're going to start off with the first stage of the reactor. 10 00:00:31,950 --> 00:00:38,220 So Stage 1 I'm going to identify the fact that we create this new path helper and then we really use 11 00:00:38,220 --> 00:00:39,850 it as P-doc test. 12 00:00:39,900 --> 00:00:45,390 But there's no reason that I need to make a new instance of this path halber every iteration through 13 00:00:45,390 --> 00:00:47,650 the map help through the map statement. 14 00:00:47,670 --> 00:00:54,030 So I'm going to take the Konst be equals new path line and I'm going to move it outside of the map statement 15 00:00:54,120 --> 00:00:54,700 like so. 16 00:00:54,830 --> 00:00:59,940 So now I don't have to create a new path helper for every iteration through the loop. 17 00:00:59,970 --> 00:01:05,990 Now when I do that refactor I can then kind of very quickly identify the fact that we have this pathname 18 00:01:06,000 --> 00:01:11,550 variable being created right here and then we are immediately passing it into peacoat test. 19 00:01:11,670 --> 00:01:15,430 So I don't think we need the extra pathname variable at all. 20 00:01:15,630 --> 00:01:19,140 So we're going to take New York while you are l.com pathname. 21 00:01:19,150 --> 00:01:21,310 I'm going to highlight all this stuff. 22 00:01:21,690 --> 00:01:29,380 I'm going to cut it and I'll paste it into Picart test like so now I can clean up the pathname variable 23 00:01:29,430 --> 00:01:32,700 that we were declaring before and leave it just like so. 24 00:01:33,060 --> 00:01:33,330 OK. 25 00:01:33,390 --> 00:01:35,340 So that's that's Stage 1 right there. 26 00:01:35,340 --> 00:01:36,390 Nice and easy start. 27 00:01:36,420 --> 00:01:42,300 We've just condense things inside the map statement to make it just a little bit more concise. 28 00:01:42,600 --> 00:01:45,150 Now comes for the more challenging part. 29 00:01:45,160 --> 00:01:51,470 Stage 2 at this stage to refactor is going to be a little bit more complex. 30 00:01:51,600 --> 00:01:55,080 Now before we do three factor I want to point one thing out to you. 31 00:01:55,230 --> 00:02:01,190 Notice how we're making use of three low dash helper's inside of your first map. 32 00:02:01,470 --> 00:02:07,620 Then compact then unique by in every case we take the result of the helper. 33 00:02:07,890 --> 00:02:13,380 We assign it to some temporary variable like events right here and then we pass that temporary variable 34 00:02:13,650 --> 00:02:18,140 into the next load helper and then we repeat that same process over again. 35 00:02:18,150 --> 00:02:25,400 So we essentially say map goes to events past events into compact compact goes to compact events pass 36 00:02:25,410 --> 00:02:27,280 compact events into unique by. 37 00:02:27,510 --> 00:02:33,030 And so because we have this very repetitive pattern we can make use of a fantastic little helper in 38 00:02:33,030 --> 00:02:37,470 the load ash library called the chain function. 39 00:02:37,470 --> 00:02:42,660 The purpose of the chain function is to clean up this very repetitive syntax that we're seeing right 40 00:02:42,660 --> 00:02:43,640 here. 41 00:02:43,710 --> 00:02:50,550 Now before we do this refactor to make use of chain I want to tell you that chain is a very very advanced 42 00:02:50,610 --> 00:02:54,330 javascript and very advanced load dash topic. 43 00:02:54,360 --> 00:02:58,010 So with every factor we're going to do is going to be just a little bit intense. 44 00:02:58,040 --> 00:03:03,000 OK but I'm really I'm definitely comfortable I feel like we can really pull this off. 45 00:03:03,270 --> 00:03:08,250 Now before we just go ahead and dive into the factor I want to give you a little bit of a better idea 46 00:03:08,310 --> 00:03:11,140 of exactly how chain works. 47 00:03:11,220 --> 00:03:17,060 So I'm going to pull open a little tool really quickly and you don't need to navigate to this tool yourself. 48 00:03:17,070 --> 00:03:22,370 I just want to I want you to just look at what I'm doing and exactly how we're going to use change. 49 00:03:22,710 --> 00:03:27,090 So on this little two right you're going to write some javascript code on the left hand side and then 50 00:03:27,150 --> 00:03:31,080 the result of that code will pop up on the right hand side automatically. 51 00:03:31,080 --> 00:03:38,160 So if I say like one SDF two or you know whatever we see the results pop up you're on the right hand 52 00:03:38,160 --> 00:03:38,720 side. 53 00:03:39,000 --> 00:03:39,680 OK. 54 00:03:39,690 --> 00:03:43,670 So I want to define an array with the numbers 1 2 3 like so. 55 00:03:44,220 --> 00:03:48,510 And then I'm going to use the low dash function inside of your called chain. 56 00:03:48,840 --> 00:03:56,870 So say underscore dot chain and I'm going to pass in my array as the first and only argument. 57 00:03:56,880 --> 00:04:01,050 Now you'll notice that when I call chain I get back my array. 58 00:04:01,080 --> 00:04:07,470 So by default nothing really happened where things start to get interesting is when I start to add on 59 00:04:07,590 --> 00:04:10,830 additional statements to the chain function. 60 00:04:10,830 --> 00:04:15,540 So something like underscore dot chain dot map. 61 00:04:15,840 --> 00:04:17,470 And then I can pass in a map function. 62 00:04:17,670 --> 00:04:23,140 So we'll say for every number in the array return numb times 2. 63 00:04:23,160 --> 00:04:28,620 So this says go through the number the A-R our array. 64 00:04:28,740 --> 00:04:33,090 And for every number in there multiply it by 2 and return the result you'll see that. 65 00:04:33,090 --> 00:04:34,490 Now I've got two four six. 66 00:04:34,500 --> 00:04:36,790 Pretty much as you might expect. 67 00:04:36,800 --> 00:04:39,520 So now things start to get a little bit more interesting. 68 00:04:39,570 --> 00:04:43,820 Let's see how I'm going to do a little new line in here like so. 69 00:04:43,960 --> 00:04:45,430 So it's still the same exact code. 70 00:04:45,450 --> 00:04:47,970 I'd just put in a new line just for styling. 71 00:04:48,130 --> 00:04:52,850 And now I can start to chain on as many load ash helpers as I want. 72 00:04:53,190 --> 00:04:55,530 So I can add on another map function. 73 00:04:55,530 --> 00:05:06,270 So maybe this one will be numb divided by 10 and I can on map of numb numb Plus the string of high there. 74 00:05:06,510 --> 00:05:07,710 And so now you'll notice I have. 75 00:05:07,710 --> 00:05:13,760 Point two with the string high there and then maybe I want to I don't know whether some other loadout 76 00:05:13,770 --> 00:05:18,890 functions we can essentially chain on as many load ash helpers to the single statement as you wish. 77 00:05:19,020 --> 00:05:24,090 So maybe we will also want to do let's just look up the documentation for chain and that will probably 78 00:05:24,090 --> 00:05:25,900 give us some good ideas here. 79 00:05:26,010 --> 00:05:30,790 So if we look up the documentation for chain Okay here's a good example here. 80 00:05:30,840 --> 00:05:35,400 Okay let's do some sorting and then let's just do a sort. 81 00:05:35,400 --> 00:05:36,130 How about that. 82 00:05:36,210 --> 00:05:42,440 Will do sorts like so and we will change the first number on here. 83 00:05:42,450 --> 00:05:44,350 And we should see a different result. 84 00:05:44,370 --> 00:05:49,550 So notice how I'm now sorting in it's going from point 4 2.6 to 2000. 85 00:05:49,890 --> 00:05:54,120 Maybe if we do just like a b 86 00:05:57,000 --> 00:06:01,690 and then see the whole be a little bit more a little bit better since I can remove all the maps statements 87 00:06:01,690 --> 00:06:02,330 on here. 88 00:06:02,630 --> 00:06:03,590 I get ABC. 89 00:06:03,610 --> 00:06:04,620 It's sorted. 90 00:06:04,750 --> 00:06:06,250 Maybe I'll reverse it. 91 00:06:06,460 --> 00:06:13,540 Now it's CBA and now I can sort it again and so I know I'm going very rapid fire here but the end goal 92 00:06:13,570 --> 00:06:18,400 what I'm trying to communicate here is that we can use the chain helper to just add on as many of these 93 00:06:18,400 --> 00:06:24,960 very short very quick statements as we wish without having to assign the result to any temporary variable. 94 00:06:25,090 --> 00:06:30,820 And then when we're all done with all these changing statements in here we can then call the value function 95 00:06:31,090 --> 00:06:35,240 and that returns the actual underlying newly processed array. 96 00:06:35,680 --> 00:06:40,700 So essentially it's called Chain do the individual processing steps you want to do. 97 00:06:40,800 --> 00:06:43,260 And at the very end call value. 98 00:06:43,570 --> 00:06:49,330 So just to add on a couple of more steps here for fun maybe we'll map over this array will take every 99 00:06:49,330 --> 00:06:58,510 string and return string plus a like so now I get a B.A. blah blah blah and we can add on a at the very 100 00:06:58,510 --> 00:07:04,240 start and maybe we sort of do get it afterwards and it goes crazy as you want. 101 00:07:04,240 --> 00:07:08,120 Here again we can out in as many steps as we please. 102 00:07:08,450 --> 00:07:13,240 Get so going over it off topic but hopefully you've got a slightly better kind of visual impression 103 00:07:13,270 --> 00:07:14,620 of what Shane does. 104 00:07:14,830 --> 00:07:19,510 So now we're going to go back over to our request handler over here and we're going to identify the 105 00:07:19,510 --> 00:07:25,330 fact that we are essentially taking this array doing these processing steps over it and then just really 106 00:07:25,330 --> 00:07:27,230 making use of the end product. 107 00:07:27,250 --> 00:07:33,730 So we're going to refactor our code to use the chain helper rather than repeatedly assigning these temporary 108 00:07:33,730 --> 00:07:35,590 results along the way. 109 00:07:35,590 --> 00:07:39,400 So those three factors can be a little bit intense again but I know that we're going to be able to pull 110 00:07:39,400 --> 00:07:41,330 it off just A-OK. 111 00:07:41,470 --> 00:07:42,420 So let's get to it. 112 00:07:42,430 --> 00:07:48,130 The first thing I'm going to do is remove all these temporary variables that we are assigning these 113 00:07:48,130 --> 00:07:48,640 things to. 114 00:07:48,670 --> 00:07:51,430 So when I say Konst events no not anymore. 115 00:07:51,520 --> 00:07:52,470 That's gone. 116 00:07:52,480 --> 00:07:55,010 We're going to leave as just the map statement. 117 00:07:55,060 --> 00:08:02,220 No more compact events equals just compact and then no more unique events equals just unique. 118 00:08:02,210 --> 00:08:10,960 By next I can remove the underscore at the start of every statement so no underscore no underscore no 119 00:08:10,960 --> 00:08:14,190 underscore and then going back over here. 120 00:08:14,200 --> 00:08:20,380 You'll notice that it's kind of implied that we take this array and pass it to the sort function. 121 00:08:20,380 --> 00:08:26,350 Take the results that pass the reverse take the result of that passage to sort and so we no longer have 122 00:08:26,350 --> 00:08:34,000 to pass in events or compact events or body up here so we're going to remove the first argument from 123 00:08:34,040 --> 00:08:37,510 every one of these helpers so no more racked up body. 124 00:08:37,660 --> 00:08:44,650 Instead it's going to be just our arrow function no more events no more compact events just the two 125 00:08:44,650 --> 00:08:51,100 properties that we want to do the unique by check on now we're going to remove the semi-colons at the 126 00:08:51,100 --> 00:08:52,240 end of each line. 127 00:08:52,630 --> 00:08:58,950 So remove one or remove to remove three will group them all together. 128 00:08:59,590 --> 00:09:02,110 We will indent the whole block. 129 00:09:02,810 --> 00:09:05,920 We look out on the chain statement at the very top. 130 00:09:06,220 --> 00:09:10,710 So we'll say underscore dot chain I will pass in the array that we want to iterate over. 131 00:09:10,720 --> 00:09:13,860 So we'll say rec dot body. 132 00:09:14,560 --> 00:09:20,620 And then as the very last step after doing the map after doing the compact and after doing unique by 133 00:09:20,920 --> 00:09:27,640 will then pull out the underlying array by calling dot value like so and the very last thing will make 134 00:09:27,640 --> 00:09:33,790 sure that after we actually pull that array out was signed the result of all this processing to a variable 135 00:09:33,790 --> 00:09:36,750 that we'll call events like so. 136 00:09:36,820 --> 00:09:41,060 So now at the very last step here before we were Consta logging events. 137 00:09:41,170 --> 00:09:44,510 Now we're just going to log events like so. 138 00:09:45,170 --> 00:09:45,530 OK. 139 00:09:45,550 --> 00:09:48,470 So that's a pretty good re factor pretty sizable. 140 00:09:48,640 --> 00:09:52,330 But now we have a much more legible sequence of events here. 141 00:09:52,360 --> 00:09:58,270 So any other engineer who starts to come back and read your code will understand that OK we're going 142 00:09:58,270 --> 00:10:00,430 to iterate over recked of body. 143 00:10:00,700 --> 00:10:02,410 We're first going to map over it. 144 00:10:02,560 --> 00:10:07,140 Well then compact it will then do a uniqueness check and then return the value. 145 00:10:07,420 --> 00:10:12,160 So this chain helper is really all about making your code much more legible when you're doing these 146 00:10:12,230 --> 00:10:16,030 repeat repetitive iteration steps over in Iraq. 147 00:10:16,540 --> 00:10:22,000 So last thing to do is to test this out by clicking on another e-mail and making sure that we are still 148 00:10:22,000 --> 00:10:24,830 getting the correct result here at the very end. 149 00:10:24,970 --> 00:10:30,010 Before we go and click on the e-mail I do encourage you to flip on over to your terminal and just verify 150 00:10:30,010 --> 00:10:33,260 that you don't have any error messages or anything like that over here. 151 00:10:33,900 --> 00:10:34,160 OK. 152 00:10:34,180 --> 00:10:39,940 Now flip back over to my e-mail or click on the link or let it do its thing. 153 00:10:39,940 --> 00:10:43,570 We'll flip back to the terminal and then I think you know what comes next we're going to take a quick 154 00:10:43,570 --> 00:10:49,210 pause we'll let the council live pop up and it we'll continue in the next section so I'll see you in 155 00:10:49,210 --> 00:10:50,260 just a minute.