1 00:00:02,200 --> 00:00:04,220 Now, in this course section, 2 00:00:04,220 --> 00:00:07,540 we again learned a lot of important new things 3 00:00:07,540 --> 00:00:09,850 and as we learned new things, 4 00:00:09,850 --> 00:00:11,560 this app.js file, 5 00:00:11,560 --> 00:00:16,300 which contains our Node Express code got bigger and bigger. 6 00:00:16,300 --> 00:00:18,120 It's still not large 7 00:00:18,120 --> 00:00:20,680 but it grew quite a bit. 8 00:00:20,680 --> 00:00:24,300 And this overall is a simple page. 9 00:00:24,300 --> 00:00:26,400 It's probably easy to imagine 10 00:00:26,400 --> 00:00:29,260 that if you're building more complex websites, 11 00:00:29,260 --> 00:00:32,930 this gets even more complex and bigger, 12 00:00:32,930 --> 00:00:35,170 and hence, as a developer, 13 00:00:35,170 --> 00:00:38,250 you typically wanna split your code 14 00:00:38,250 --> 00:00:40,520 into multiple smaller pieces, 15 00:00:40,520 --> 00:00:45,450 which are then each a bit easier to handle and maintain. 16 00:00:45,450 --> 00:00:48,600 And that's what we did with our templates already. 17 00:00:48,600 --> 00:00:51,850 Restaurant-item is a small, manageable piece 18 00:00:51,850 --> 00:00:53,810 of HTML, for example, 19 00:00:53,810 --> 00:00:57,860 which is then combined with other parts of this page. 20 00:00:57,860 --> 00:01:01,210 And what we also did before with CSS 21 00:01:01,210 --> 00:01:04,849 where we split our code across multiple files. 22 00:01:04,849 --> 00:01:08,970 And we typically wanna do the same for our backend code. 23 00:01:08,970 --> 00:01:12,680 And a good example here for splitting our code a little bit 24 00:01:12,680 --> 00:01:16,410 and for also extracting some reused functionality 25 00:01:16,410 --> 00:01:18,430 into a utility function, 26 00:01:18,430 --> 00:01:23,430 would be this code where I access my stored restaurants 27 00:01:23,550 --> 00:01:25,520 because we have the same code here 28 00:01:25,520 --> 00:01:27,240 in the recommend route 29 00:01:27,240 --> 00:01:30,840 and then also here in the restaurants detail route 30 00:01:30,840 --> 00:01:32,520 for a specific ID 31 00:01:32,520 --> 00:01:36,210 and then also here in that get route 32 00:01:36,210 --> 00:01:37,963 where we get all the restaurants. 33 00:01:39,350 --> 00:01:40,870 So we have the same kind of code 34 00:01:40,870 --> 00:01:42,750 in different routes. 35 00:01:42,750 --> 00:01:46,500 And such duplication is typically something you wanna avoid 36 00:01:48,020 --> 00:01:51,110 because if I ever have to change something about that, 37 00:01:51,110 --> 00:01:53,800 if I have to change the way we built this path, 38 00:01:53,800 --> 00:01:56,063 I have to do it in three places. 39 00:01:57,340 --> 00:02:00,620 Hence, what you typically would do in such a scenario 40 00:02:00,620 --> 00:02:03,680 is you would create a brand new function, 41 00:02:03,680 --> 00:02:05,690 which contains this code, 42 00:02:05,690 --> 00:02:09,252 which then could be called from all these different routes. 43 00:02:10,530 --> 00:02:12,330 Now, that is what we will do 44 00:02:12,330 --> 00:02:15,000 but I also mentioned that we wanna split our code 45 00:02:15,000 --> 00:02:18,100 across files to keep our files maintainable. 46 00:02:18,100 --> 00:02:21,233 And therefore, I'll do both things in one go here. 47 00:02:22,160 --> 00:02:24,220 I'll add a new subfolder here, 48 00:02:24,220 --> 00:02:27,563 which I'll name util for utility. 49 00:02:29,100 --> 00:02:32,300 This is absolutely not a name you have to use. 50 00:02:32,300 --> 00:02:34,920 Instead, that's just a name I will use here 51 00:02:34,920 --> 00:02:39,870 to put all my utility backend code into this folder 52 00:02:40,900 --> 00:02:43,550 so that I have a folder with the public files, 53 00:02:43,550 --> 00:02:46,040 which are shared statically, 54 00:02:46,040 --> 00:02:48,960 that I have a folder for my templates, 55 00:02:48,960 --> 00:02:51,350 that I have a folder for my data, 56 00:02:51,350 --> 00:02:55,390 and now I also have a folder with some utility functions 57 00:02:55,390 --> 00:02:57,193 that I use in my backend code. 58 00:02:58,200 --> 00:03:02,120 And in there, I'll add my restaurant-file.js file 59 00:03:05,540 --> 00:03:08,823 because this JavaScript file should hold the code 60 00:03:08,823 --> 00:03:12,370 for working with that restaurant data file. 61 00:03:12,370 --> 00:03:14,860 And maybe we therefore name is restaurant-data 62 00:03:14,860 --> 00:03:16,363 now that I think about it. 63 00:03:17,720 --> 00:03:20,200 And in this restaurant-data.js file, 64 00:03:20,200 --> 00:03:24,470 I'll add a function, which I'll name getStoredRestaurants 65 00:03:26,320 --> 00:03:29,450 because that is what this piece of code, 66 00:03:29,450 --> 00:03:31,510 which I wanna reuse does. 67 00:03:31,510 --> 00:03:34,580 It gets me this list of stored restaurants 68 00:03:34,580 --> 00:03:37,463 by reading that restaurants.json file. 69 00:03:38,620 --> 00:03:40,570 So now I'll copy that here, 70 00:03:40,570 --> 00:03:43,959 that code snippet, which we are repeating so often 71 00:03:43,959 --> 00:03:48,730 and I'll add that here in getStoredRestaurants. 72 00:03:48,730 --> 00:03:52,900 Here I now just wanna return those storedRestaurants then 73 00:03:52,900 --> 00:03:56,480 so that I don't just have them available in this function 74 00:03:56,480 --> 00:04:00,860 but also in any function that calls this function here 75 00:04:00,860 --> 00:04:04,100 because that's the idea behind getStoredRestaurants. 76 00:04:04,100 --> 00:04:06,780 I am creating the standalone function 77 00:04:06,780 --> 00:04:09,550 with this shared functionality 78 00:04:09,550 --> 00:04:12,810 so that different places in my Express app 79 00:04:12,810 --> 00:04:14,470 can call this function, 80 00:04:14,470 --> 00:04:16,649 and can get the storedRestaurants, 81 00:04:16,649 --> 00:04:18,760 which I'm retrieving here. 82 00:04:18,760 --> 00:04:20,130 But for that to happen, 83 00:04:20,130 --> 00:04:22,500 I need to make then accessible outside 84 00:04:22,500 --> 00:04:23,790 of this function as well, 85 00:04:23,790 --> 00:04:26,173 and that is what we do by returning them. 86 00:04:27,540 --> 00:04:31,340 Now, in app.js, for example, here in the recommend route, 87 00:04:31,340 --> 00:04:35,640 if I need my storedRestaurants, and I do need them 88 00:04:35,640 --> 00:04:37,590 because I work with them here, 89 00:04:37,590 --> 00:04:40,830 I have to use this function, 90 00:04:40,830 --> 00:04:43,640 this getStoredRestaurants function here, 91 00:04:43,640 --> 00:04:46,840 and then store the value that is returned 92 00:04:46,840 --> 00:04:49,450 by that function, which is that array of restaurants 93 00:04:49,450 --> 00:04:52,183 in the storedRestaurants here. 94 00:04:53,410 --> 00:04:55,750 So here in the recommend route, 95 00:04:55,750 --> 00:04:59,060 I can now add storedRestaurants, 96 00:04:59,060 --> 00:05:01,980 and then call getStoredRestaurants like this, 97 00:05:01,980 --> 00:05:05,673 and that should then return me this storedRestaurants array. 98 00:05:06,930 --> 00:05:08,220 Now, it can be confusing 99 00:05:08,220 --> 00:05:11,350 that I have storedRestaurants here in this function 100 00:05:11,350 --> 00:05:13,560 and also here as a name 101 00:05:13,560 --> 00:05:15,650 but that's only a coincidence here 102 00:05:15,650 --> 00:05:18,630 or well, we have that name for historic reasons 103 00:05:18,630 --> 00:05:22,110 because this code here in getStoredRestaurants 104 00:05:22,110 --> 00:05:25,030 was in this place a couple of seconds ago 105 00:05:25,030 --> 00:05:27,030 but we can now also rename this, 106 00:05:27,030 --> 00:05:29,360 for example, to just restaurants 107 00:05:31,100 --> 00:05:33,200 like that in all the places 108 00:05:33,200 --> 00:05:36,700 where I was using storedRestaurants here. 109 00:05:36,700 --> 00:05:40,580 Now I did rename it to just restaurants 110 00:05:40,580 --> 00:05:42,650 and that's now the data which I'm getting 111 00:05:42,650 --> 00:05:45,073 with help of my utility function. 112 00:05:46,200 --> 00:05:50,600 But this code like that would not work. 113 00:05:50,600 --> 00:05:52,773 And why would it not work? 114 00:05:54,570 --> 00:05:56,710 For a couple of reasons actually. 115 00:05:56,710 --> 00:06:00,260 For one, just using the function name like this 116 00:06:00,260 --> 00:06:04,940 if the function is stored in a different file would fail. 117 00:06:04,940 --> 00:06:06,283 We'll fix this later. 118 00:06:07,280 --> 00:06:08,721 It would also not work though 119 00:06:08,721 --> 00:06:13,640 because I'm then trying to write back into this file, 120 00:06:13,640 --> 00:06:16,810 which is stored in this filePath 121 00:06:16,810 --> 00:06:21,010 but filePath previously was a constant 122 00:06:21,010 --> 00:06:23,550 in this route function. 123 00:06:23,550 --> 00:06:25,467 It isn't anymore. 124 00:06:25,467 --> 00:06:30,467 filePath is now actually a constant in getStoredRestaurants. 125 00:06:31,590 --> 00:06:34,210 And you learned earlier in the course already 126 00:06:34,210 --> 00:06:36,670 when we had a look at the basics of JavaScript 127 00:06:36,670 --> 00:06:38,840 in the browser, and it's the same here 128 00:06:38,840 --> 00:06:39,986 because as you learned, 129 00:06:39,986 --> 00:06:43,360 NodeJS JavaScript generally works 130 00:06:43,360 --> 00:06:46,040 just like browser-side JavaScript. 131 00:06:46,040 --> 00:06:49,530 There you learned that if you have a variable 132 00:06:49,530 --> 00:06:51,940 that is defined in a function, 133 00:06:51,940 --> 00:06:54,280 it's not by default available 134 00:06:54,280 --> 00:06:56,323 in other parts of your code. 135 00:06:57,230 --> 00:06:59,510 So in this app.js function here, 136 00:06:59,510 --> 00:07:02,002 I can't just use filePath. 137 00:07:02,002 --> 00:07:06,200 It is defined in this getStoredRestaurants function 138 00:07:06,200 --> 00:07:09,450 but it's basically also captured in there. 139 00:07:09,450 --> 00:07:12,573 You don't have access to it in other places. 140 00:07:13,840 --> 00:07:15,824 Now, a good way of solving this 141 00:07:15,824 --> 00:07:19,840 would be to simply add another utility function 142 00:07:19,840 --> 00:07:23,680 in this restaurant-data.js file in the util folder, 143 00:07:23,680 --> 00:07:28,530 and this utility function stores our restaurants back 144 00:07:28,530 --> 00:07:29,803 into this file. 145 00:07:31,170 --> 00:07:34,803 So here we could name this storeRestaurants like this, 146 00:07:39,350 --> 00:07:42,210 and I would expect that I get the restaurants 147 00:07:42,210 --> 00:07:44,690 that should be stored as a parameter. 148 00:07:44,690 --> 00:07:47,120 So here I get my restaurants 149 00:07:47,120 --> 00:07:50,973 or the storableRestaurants, however you wanna name this. 150 00:07:52,440 --> 00:07:56,070 And then in there inside of this helper function, 151 00:07:56,070 --> 00:08:00,150 we then reach out to the file to store our data. 152 00:08:00,150 --> 00:08:02,900 So we copy this line of code, 153 00:08:02,900 --> 00:08:07,900 writeFileSync, and add that here in storeRestaurants. 154 00:08:09,430 --> 00:08:12,710 With that, we still don't have access to the filePath 155 00:08:12,710 --> 00:08:15,130 because that's still in a different function 156 00:08:15,130 --> 00:08:17,330 but what we could do now 157 00:08:17,330 --> 00:08:22,190 is we could just move that out of getStoredRestaurants 158 00:08:22,190 --> 00:08:24,480 and turn this into a constant, 159 00:08:24,480 --> 00:08:27,600 which is available in this file as a whole, 160 00:08:27,600 --> 00:08:29,320 and if you do that, 161 00:08:29,320 --> 00:08:33,230 this will actually be accessible by all the functions 162 00:08:33,230 --> 00:08:35,030 in this file. 163 00:08:35,030 --> 00:08:38,039 Not in other files, I can say that, 164 00:08:38,039 --> 00:08:40,193 but all the functions of this file. 165 00:08:41,100 --> 00:08:44,570 And therefore, filePath now is available here 166 00:08:44,570 --> 00:08:49,533 in getStoredRestaurants, but also here in storeRestaurants. 167 00:08:50,720 --> 00:08:53,650 And in storeRestaurants, I now just wanna make sure 168 00:08:53,650 --> 00:08:57,173 that I store my storableRestaurants like this. 169 00:08:59,960 --> 00:09:02,680 Now we outsource both the readFile 170 00:09:02,680 --> 00:09:06,640 and writeFile functionality into separate functions 171 00:09:06,640 --> 00:09:09,540 that have some extra functionality inside of them 172 00:09:09,540 --> 00:09:11,283 in this utility file. 173 00:09:13,670 --> 00:09:18,290 Now in app.js where I wanna write to this file, 174 00:09:18,290 --> 00:09:21,240 I can just call storeRestaurants 175 00:09:22,240 --> 00:09:24,860 and pass my updated restaurants, 176 00:09:24,860 --> 00:09:26,300 which is this restaurants array 177 00:09:26,300 --> 00:09:30,720 to which I pushed a new restaurant to storeRestaurants 178 00:09:32,760 --> 00:09:36,580 because storeRestaurants, this function which we just added, 179 00:09:36,580 --> 00:09:40,150 does have this storableRestaurants parameter, 180 00:09:40,150 --> 00:09:42,150 which is that value that it wants 181 00:09:42,150 --> 00:09:44,563 to then store it in our file. 182 00:09:45,440 --> 00:09:47,870 So we should make sure that we pass a value 183 00:09:47,870 --> 00:09:49,493 for this parameter here. 184 00:09:51,490 --> 00:09:54,260 And I know that these were a lot of steps, 185 00:09:54,260 --> 00:09:56,628 and we did move quite a bit of code around 186 00:09:56,628 --> 00:09:59,480 but refactoring code like this 187 00:09:59,480 --> 00:10:03,490 is a common task to avoid code duplication 188 00:10:03,490 --> 00:10:07,400 and to keep your individual code snippets short, 189 00:10:07,400 --> 00:10:09,860 concise and maintainable. 190 00:10:09,860 --> 00:10:11,523 That's why I'm doing this. 191 00:10:13,120 --> 00:10:16,200 Still, unfortunately, we're still not there. 192 00:10:16,200 --> 00:10:18,550 This code would fail, 193 00:10:18,550 --> 00:10:21,893 and I'll tell you why and we'll fix it in the next lecture.